SCSS + Variables + Relative Units

[mx3m]

Alright. So this is the big one.

The overall architecture of this theme has changed dramatically. I don't have a lot of time so had to do this in a few hours. Far from being perfect but I tried to keep it as simple as possible (for me, and everyone else).

There is now a side nav (instead of the one on top). It looks like this:

SCSS obviously allowed me to make variables. There is only 1 $main-color variable to change to make this theme unique.

Not ready for a merge right now but making this PR so the few persons interested in Hikari can try it out and help making this better.

My plan is to move the bio description & social links (twitter, instagram etc) to _config.yml to make it even easier for people with little experience to get started with Jekyll.

Cheers, Mathieu

[ssorallen]

I follow several design guidelines for CSS that are used by widely-installed frameworks like Bootstrap and Foundation. You can argue they are personal preference, but used together they lead to a more sustainable and customizable use of CSS and have helped Bootstrap and Foundation become as successful as they are.

• Use tag selectors rarely. For example, h1.title does not need to be scoped to h1, section#single-wrap does not need to be scoped to section. Add the tag selector only when you need the specificity.
• Make selectors only as specific as needed and no more. For example, #off-canvas #avatar does not need the #off-canvas ancestor; it could be just #avatar. Using more selectors than needed leads to specificity problems as you add more styles and try to override ones that have been previously applied. It also imposes on the structure of your document. If you move #avatar elsewhere in the future, it should probably still look like #avatar even if it's no longer a descendant of #off-canvas.
• Avoid ID selectors almost entirely. For example, #avatar could be .avatar and #off-canvas could be .off-canvas. IDs must be unique, which somewhat defeats the purpose of reusable CSS. They also hold the highest specificity ranking in CSS, which makes them difficult to override.

[mx3m]

Agree with everything you said.

When I made this theme I had very little knowledge of CSS best practices.

I barely touched the HTML files as you can see in the PR which can explain why I haven't converted all unecessary IDs to classes.

I'll have a better look at it tomorrow and clean it up. Thank you for insisting on these points that I believe to be essential too.

[ssorallen]

:+1: The move to Scss is great. Nice work, @m3xm.

[mx3m]

@ssorallen fixed most things I think ;p

Posts typography is cleaner too. I might change the theme default color to celebrate 2.0 :p Any suggestion?