A New Blog
Welcome to my new blog! This is where I’ll collect my random thoughts on various topics for the world.
To create this blog, here’s what I used:
- Zola provided site generation.
- HTML templates and CSS styles I created from scratch.
- Sass (the SCSS dialect) provided CSS wrangling.
- Cloudflare provided the domain name and hosting.
I was keen to explore creating my own CSS styles for the site. I haven’t necessarily finished them, but I’m happy with what I have for now.
Responsive Layout
A responsive layout was important to me, since I’d like the site to be legible on web browsers of multiple sizes. This is mostly done using @media queries, but the hiding and showing of the pop-over menu is done using JavaScript.
This is the normal web version of the site, in which I chose to use a header with buttons: Web version of the site, with a regular button menu.
The phone version of the site switches to a hamburger menu (shown on the left) with a pop-over menu (shown on the right). iPhone version of the site, with a hamburger menu.
Something that took me a while to figure out was why my site was scaling strangely on an iPhone. It turned out that I needed this magic incantation:
Setting width=device-width requests that mobile browsers use the actual width of the mobile device, and not a “virtual width”, which many do by default.