Comments (7)
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
from minimal-mistakes.
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!
from minimal-mistakes.
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.
from minimal-mistakes.
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.
from minimal-mistakes.
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?
from minimal-mistakes.
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:
- You have some bad YAML in one of your posts or pages, possibly an encoding problem?
- Having tags and categories named the same ie
blog
might be causing something to get confused and mucked up.
from minimal-mistakes.
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>
from minimal-mistakes.
Related Issues (20)
- Highlight color for TOC in the dark skin HOT 1
- Just built a Docker image for the theme
- there is a error that can't fix "An error occurred while installing json (1.8.3)"
- A problem occured when github action was running HOT 2
- Removing the `sticky` tag from the sidebar has no effect
- Deprecation warnings relative to use of / outside of calc, will be removed in Dart Sass 2.0.0 HOT 1
- Breadcrumbs `Home` points to `github.com HOT 1
- Add support for child menues in matheader
- Neon Code Hightlighting Broken
- Search includes asset files HOT 1
- Iam getting this error Can you please help on this HOT 1
- greedy-navigation timeout causes inconsistent behaviour with translucency
- Google analytics update HOT 2
- Accessibility bug: the nav elements across the theme should have an aria-label
- monochrome and color (predefined) icons in author bio HOT 2
- Jekyll plugins HOT 3
- page.url variable pointing to wrong page (post) HOT 3
- Error when installing Theme HOT 1
- setup a ttc skin
- "You may also enjoy" recommends hidden posts, when it probably shouldn't HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from minimal-mistakes.