Welcome to Tidy Site

This site serves to demonstrate how I set up a fairly minimal static website that ticks all of my back-end engineer boxes. The source code is over at github.com/focusaurus/tidy-site.

Tech Stack

zola static site generator
- Uses nice tera templates
  - I like the inheritence and block override mechanism
  - Useful filters
- shortcodes a la WordPress are great
- It's in rust and I'm biased toward rust
SCSS for CSS nesting and processing
markdown for simple text content markup

Inspiration

While I admire the minimalism, I can't quite bring myself to go full Dan Luu mode with almost no CSS. I love the look of Kind Engineering, which I was hoping to study and copy, but when I viewed source it seems to be a squarespace template full of limitless complexity, breakpoints galore, !important, and generated code so I'll take the design and leave the implementation.

Semantic HTML (mostly)

A lot of the "tidiness" that I seek has to do with strong limits to the amount of non-semantic HTML I need to sprinkle into my markup. I think SCSS mixins help a lot with this so I generally try to just add a single semantic class in my HTML and then apply a mixin to that. So for example, I might have <section class="intro"> and then in the SCSS I'll link that to it's style with section.intro { @include centered-column; }

Keeping Colors Tidy

I put all my custom brand colors in as SASS variables, import them where needed with @import "colors"; and that keeps things tidy and easy to tweak. I prefix the variables with $brand- for easy grepping to find all use of custom colors.

Code: sass/_colors.scss

Mobile-first and Responsive

Small screens

design scales down to iPhone SE 375px width
No horizontal scrolling
Handles large images, videos, etc
Fonts are sized for readability without extra zooming for most folks

Large Desktop screens

looks fine on large desktop screens
maximum content width applied so paragraphs stay readable
content can easily be centered so extra space is even on left and right sides

Layout Basics

The file sass/_core-layout.scss handles our basic solution. There's a SCSS mixin called centered-column which uses CSS grid and a clever max-width to make our opt-in center column work properly.

Font Sizes

Over many years, web designers have blogged so many terrible font size hacks full of magic numbers, weird scaling, etc. I looked at some more modern approaches based on vw units and CSS calc, but there were still just too many shenanigans going on.

Happily though, I think the answer might be as simple as: 18px for body and larger in small increments for headings.

Someone prove me wrong or something. I can read this site fine on phones, tablets, and desktops in portrait and landscape mode and there's no deep magic going on with font sizes.

Full Width Content

We do allow for full-width content which is techincally the default since our centered-column mixin is opt-in. This paragraph demonstrates this since the light grey background color goes full width. I find this useful for full-page background images, some other types of image galleries and so on.

Layout for images

We set max-width: 100% on the multimedia tags like img, svg, and canvas and that prevents them from overflowing and making a horizontal scrollbar on small screens.

Here's a 1200px image to demonstrate.

And here's a narrow image with an image tag as a direct child of our section container that should be centered.

To handle markdown unfortunately wrapping images in paragraph tags, we need some additional styles to center this narrow image.

Layout for videos

One thing that I love from zola is it's shortcodes feature (borrowed from WordPress), so to embed a video in a markdown file, I just need youtube(id="FEnRpy9Xfes" orientation="landscape") inside a tera template snippet. So tidy! This also comes in completely essential in terms of DRY when you have dozens of these sprinkled across your site's content and you decide you want to tweak the HTML markup for them. Life saver.

We handle youtube iframe tags in an elegant and responsive way with the relatively new CSS aspect-ratio property.

Here's an example video in landscape orientation.

And here's an example video in portrait orientation.

Code: tempates/shortcodes/youtube.html and sass/_core-videos.css

Image Float Option

Just for funzies, we can do a responsive image float, too. This starts mobile-first as single column, but on bigger screens the image floats on the right. SASS has a nice way to parameterize this mixin for left and right floats. I should also note that this is the ONLY use of CSS media query breakpoints I use on this site.

Code: sass/_core-layout.scss the float mixin.

I kind of hate all mobile navigation and hamburger menus, but couldn't commit to making the hamburger menu just anchor link to the footer navigation and be done with it, so I implemented one. There's not too much special here you won't find clicking around a web search, but I do want to point out that &equiv; and × are great HTML escaped elements to use for your open/close buttons and there's no need for images, SVGs, or bizarre creation of hamburger menu out of div tags and CSS (which I definitely saw in some of the more terrible samples out there).

I share content for both the nav popup menu and the site footer with a zola/tera partial in templates/partials/nav.html . There's some fancy a + a CSS selector stuff to automatically separate the footer links with a vertical bar which is pretty neat.

Code: sass/_navigation.scss

Responsive Photo Grid Challenge

So far our content has been pretty table-stakes stuff you must address to have a realistic useful web site. For a specific site I was working on, I had a photo grid challenge that I was able to address with CSS Grid and auto-fill, so I'll show it off here just because it's kind of neat. It makes a seamless grid with as many columns/rows as the screen will fit. I don't fully understand all the limitations, but I made all the images 4:3 aspect ratio, but not all identical size, and I used place-items: stretch and it seems to work.