In the first iteration of this reincarnation of my site, I started with a quick-n-dirty Bootstrap theme to get the ball rolling...seemed reasonable, right? A quick way to get started?

Yeah, well...it took roughly 2 hours before I began to realize that implementing anything in Bootstrap before I had at least a passing familiarity with CSS was a bad idea. When I found myself sprinkling the pages with <hr>s and  s just to mess with layout, that was a danger sign. Young(er) Dan may well have stubbornly forged ahead, but old(er) wise(r) Dan chose another path.

So, I pulled out all of the CSS and Bootstrap junk I'd dropped in place, and started instead hand-crafting the CSS one step at a time.

Eleventy blocks

1. In my base page layout (base.njk), I defined the title as <title>{% block title %}Dan Blumenfeld - {{ title }}{% endblock %}</title>, so that whatever title was defined in the front matter of the page being displayed would be used.
2. I created a child layout (blog.njk), with the following content:

   {% extends "layouts/base.njk" %} {% block title %}Dan Blumenfeld - Blog - {{ title }}{% endblock %}

3. I specified the child layout in the front matter of my post as so: layout: layouts/blog.njk

And just like magic, it worked. :-)

File format choices

I had started with a mix of Markdown and HTML, as I hadn't yet come across a reason to prefer one over the other. Until I realized that Markdown was going to be converted to HTML anyway, so I'd have more control over the eventual output if I just went to HTML in the first place.

This triggered a bit of angst because I'd already created quite a few Markdown files which needed to be converted; but, taking steps now to make things more consistent down the road seemed wise.

So, to sum up: the gerneral rule is that all layout files are Nunjucks(.njk) and all content files are HTML.

Semantic markup

Apparently, in this newfangled world of HTML5, there are more options than just the <p> tag for grouping content. Who knew?!?

So, I went through and made a feeble stab at applying the correct tags.

Resources used

• CSS Tutorial Video
• MDN CSS Reference

My first question: variables, please?

After typing the same color and size variables more than twice, I had to ask: how can I define variables or otherwise keep my CSS as DRY as possible?

It turns out that I can use CSS Custom Properties. This is a means by which properties can be defined using two dashes (--), so that they operate in the same cascading manner as other CSS entities; or they can be defined using the @property at-rule. In both cases, they can then be referenced using an inline var(--custompropname); syntax in the following CSS.

            :root {
                --secondary-color: #c0ffee;
              }
              
        

            @property --secondary-color {
                syntax: "";
                inherits: false;
                initial-value: #c0ffee;
              }              
        

            main {
                background-color: var(--secondary-color);
              }