Want to add a lengthier Author Bio to Home.html, but doesn't inherit CSS styles

[ryan-p-randall]

Love the theme!!! I've gotten lots of compliments on it as well.

Here's my iteration so far: http://ryan-p-randall.github.io/

I'm using this theme for a slightly different type of portfolio/blog, and most of the readers will expect to see a few paragraphs of a bio on the landing home page. I've added this kind of bio to the home index in a way that sort of works—but those paragraphs don't have the appropriate CSS styles (link appearance).

I've tried using an include on the local host, but that doesn't render right, either. I'm new to this and basically learning by tinkering, building, seeing if it worked, and then guessing at what else to change—and I've run out of ideas! Ideally, it'd be nice to have a second author bio that I could write in Markdown, then have appear above the index of "Recent Posts," but I'm just curious about any way to get this to work.

Thanks!!!

[mmistakes]

Not sure what sort of styling you're looking for on the bio, but if you wanted it to follow something closer to what is on the homepage you could use the same CSS as what's being applied to the #index element.

Easiest way to do that would be to add the #about-me selector to #index like so to page.less If you're not comfortable with less then you could do the same to main.min.css, you'll just need to apply #about-me to all of the #index selectors. I think there are 3 or so for the various page width breakpoints.

#index,
#about-me {
    .container();
    .grid(12,10);
    .prefix(12,1);
    .suffix(12,1);
    margin-bottom: 2em;
    @media @600px {
        .grid(12,6);
        .prefix(12,0);
        .suffix(12,0);
    }
    @media @1382px {
        .grid(12,4.5);
    }
    h3 {
        margin: 0;
        padding-bottom: .5em;
        .font-rem(28);
        border-bottom: 1px solid lighten(@black,70);
    }
    article {
        h2 {
            margin-bottom: 4px;
            .font-rem(20);
            &.link-post {
                margin-bottom: 0px + @doc-line-height;
                margin-bottom: 0rem + (@doc-line-height / @doc-font-size);
            }
        }
        p {
            .font-rem(14);
        }
        p+p {
            text-indent: 0;
        }
    }
}

Making this small change will give you something like the following. If you want to further style it you can just apply the appropriate styles to #about-me

[ryan-p-randall]

That mockup looks great, thanks. As far as "styling," I just wanted it to remain in the same column like shown, plus have the same link styles as elsewhere.

Your quick response is massively appreciated—I'll try it out soon!

[ryan-p-randall]

In your suggestion, am I just adding a , after #index and then #about-me on the next line?

I tried doing that, and it mostly works—except for having an odd jump to the left at certain break points (I think that's the right term for resizing the window). Any ideas what might be going wrong?

The other "styling" I'm after is just the dotted underline to indicate links. If I just cut & paste that from the .article-wrap section in page.less, where would I put it in the #about-me section?

Thanks for responding to what are probably somewhat basic questions.

[mmistakes]

It would probably be easier to just move the about me content within #index. I noticed some weird floats and wrapping going on otherwise and if you're not comfortable with doing a bunch of CSS it might be a pain to sort out.

And for the dotted links you can just take the styles from .article-wrap p>a and apply them to #about-me or #index depending on if you move the content or not.

Personally I would move the about me h2, and paragraphs under <div id="index"> before the recent posts, and then add something like this for the dotted line links:

#index p>a {
  border-bottom: 1px dotted #b3b3b3;
}

You'll probably need to add the hover style for the links too.

[ryan-p-randall]

That works beautifully, thanks so much!

Possible other issue: When I'm in the localhost version, should I be able to see the actual posts linked from the list on the index? When I click on the links, I see error messages that read:

"Bad Request

bad URI `/[%22blog%22]/new-site/'."

Is this expected on the localhost or did I mess something up related to the category generation while tinkering?

[mmistakes]

I couldn't isolate the problem file but I get all kinds of Liquid errors when I try to run your repo locally. Usually when I encounter that with Jekyll it's because a character isn't encoded properly in one of my MarkDown files and Jekyll pukes on it, or there's bad YAML front matter in a post/page.

I see that you're trying to assign multiple categories to a few posts. That could be the problem too since Jekyll might be trying to assign both to the url as specified in the permalink structure. I've personally never tried doing multiple categories this way so no idea how Jekyll typically supports it.

I assign a category as a bucket to stick posts in for navigation purposes and then use tags for more specific classification. Other than trying to remove the multiple categories and stick with one the only other things I can think of:

1. You have some bad YAML in one of your posts or pages, possibly an encoding problem?
2. Having tags and categories named the same ie blog might be causing something to get confused and mucked up.

[mmistakes]

Think I might have found a partial solution. If you assign multiple categories to a post it has to read categories: [cat1, cat2] in the YAML front matter and not category: [cat1, cat2]. categories: seems to work for one or multiple categories so you could probably swap all instances of category to categories in the YAML and be ok.

Even with that fix it might not meet your needs though. I'm taking a guess here but if you had a post named 2014-04-30-test-post.md with categories: [blog, cat2], you're looking for it to render a post in \blog\ and \cat2\. Problem is Jekyll doesn't do that with the current permalink structure defined in _config.yml.

Instead it looks like it nests each category in the order you assign them in the YAML. ie: _site\blog\cat2\test-post\index.html.

If you really want to classify posts into multiple categories a way to do if you didn't care about permalinks that are easily browseable would be to alter the structure in _config.yml. I'd start by changing it permalink: /:title/ to remove the categories from the URL. It'll flatten the hierachy and put everything in root, but then you can build category index pages for each and just pull in posts assigned for it with something like:

<ul class="post-list">
<!--list posts with blog category only -->
{% for post in site.categories.blog %} 
  <li><article><a href="{{ site.url }}{{ post.url }}">{{ post.title }} <span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time></span></a></article></li>
{% endfor %}
</ul>