Spring Cleaning On My Website
This isn't my usual "I'm learnding!" post, because it doesn't relate to any course I've taken, but it does relate to bits and pieces I learned in my web dev course and how I applied them.
Because, in a fit of pique, I redid my website.
No, you can't obviously tell. Unless you're on mobile. And even then, you probably can't really tell. It looks the same. It functions the same. It has pretty much the same text.
But I made it better using more modern CSS, and I am pleased with myself.
So this is where I'm going to go into what I did. And it's going to be pedantic as hell, so, apologies in advance.
What's in your head?
The previous version was, at least, <!DOCTYPE html>, but there were a few things missing.
The <html> now specifies that the lang="en". There's the <meta charset="UTF-8"> tag. And there's the viewport meta tag as well.
I also added
<meta name="fediverse:creator" content="@katemonkey@blorbo.social">
Which means that whenever someone links to my site on Mastodon, they'll be told that, hey, this person has a Mastodon account, go hang out with them.
I still have all the ridiculous OG and Twitter stuff, which I can probably clear out at some point, but I need to do a bit more research to see what needs to be included.
So, if you were to go to the 5-13 Knitting Pattern, and take a peek at the <head> this is what you'll see now:
<head>
<title>5-13 — Knitting Patterns
— KateBolin.com</title>
<link href="style.css" rel="stylesheet"
type="text/css">
<link href="print.css" rel="stylesheet"
type="text/css" media="print">
<link href="favicon.gif" rel="icon"
type="image/gif">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<base href="https://www.katebolin.com">
<link rel="canonical"
href="https://www.katebolin.com/5-13.html">
<meta name="keywords" content="knitting pattern
5-13 shawl scarf triangle lace knit kate bolin">
<meta name="description" content="The 5-13
triangular shawl knitting pattern written by Kate
Bolin.">
<meta name="author" content="Kate Bolin">
<meta property="og:title"
content="5-13 — Knitting Patterns
— KateBolin.com">
<meta property="og:url"
content="https://www.katebolin.com/5-13.html">
<meta property="og:description"
content="The 5-13 triangular shawl knitting
pattern written by Kate Bolin.">
<meta property="og:image"
content="https://www.katebolin.com/5-13.jpg">
<meta name="twitter:title" content="5-13
— Knitting Patterns — KateBolin.com">
<meta name="twitter:url"
content="https://www.katebolin.com/5-13.html">
<meta name="twitter:description" content="The
5-13 triangular shawl knitting pattern written
by Kate Bolin.">
<meta name="twitter:image"
content="https://www.katebolin.com/5-13.jpg">
<meta name="fediverse:creator"
content="@katemonkey@blorbo.social">
<link rel="license"
href="http://creativecommons.org/licenses
/by-nc-sa/4.0/">
</head>
To break it up:
- Title
- Stylesheets, both standard and print
- Favicon
- Content-type
- Charset
- Viewport
- Base URL
- Canonical link, Keywords, Description, and Author
- OG, Twitter, and Mastodon details
- Creative Commons License
Which is a lot, but I want to make sure that my knitting patterns look as good as possible where possible, so...
Clearing out the floats
I used to have my navigation go to the side using float, which, much like tying an onion to your belt, was the style at the time. But things have changed, so I needed to change too.
It took a little bit of trial-and-error, but I finally did manage to figure out how to get everything arranged using display: grid.
So instead of my body just being this:
body {
font-family: sans-serif;
background: #ABBAAE;
margin: 0;
padding: 0;
color: #082213;
}
It has a little more detail:
body {
font-family: sans-serif;
background: #ABBAAE;
color: #082213;
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto fit-content(20%);
}
Then my header, main, and footer tags have a little more to them to make them behave.
header {
margin: 0;
padding: 0;
order: 2;
}
main {
margin: 0;
order: 1;
}
footer {
padding: 1em 3em;
order: 3;
}
I still like using em for padding and the link, because everything else, including font-size is percentage based. So the padding matches the size of the font depending on what you're viewing it on.
And I discovered that for the occasional image that you pop in (like in my knitting patterns), float is still a good choice. So I didn't mess with this:
main#pattern img {
float: right;
margin: 1em;
padding: 0.5em;
border: 1px double #082213;
background: #9daea1;
}
Bringing in the screens
I did notice that when I brought in the viewport meta tag, then things were overlapping with the navigation on smaller browser windows, so I had to bring in some of that fancier CSS.
The big thing was setting a maximum width so that everything fit into the right place, especially with the knitting patterns. And the photos in the patterns.
@media screen and (max-width: 500px) {
main h1, main#pattern h1 {
font-family: serif;
font-size: 200%;
padding: 0.5em 10% 0 10%;
margin: 0;
}
main h2, main#pattern h2 {
font-family: serif;
font-size: 150%;
padding: 0.5em 10% 0 10%;
margin: 0;
color: #050709;
}
main ul {
font-size: 100%;
padding: 0 20%;
}
main#pattern img {
padding: 0.5em;
border: 1px double #082213;
background: #9daea1;
margin: 1em auto;
float: none;
width: 50%;
display: block;
}
}
This just takes everything down in size a bit, and turns the images into blocks rather than floating along the side. It all seemed to work really nicely when I tested it in Firefox and on my phone, but I'm sure there are still tweaks I can make.
Print me out and have some fun
I think I've mentioned this before, but I'll mention it again - I love print stylesheets. I think they're a great addition to a site, I think they work fantastically, and I want to have them on everything.
When you're knitting on the go, you usually want something you can refer to quickly, without trying to balance your phone as you knit. Often, you print out the pattern, so you can have it in the same bag as your work-in-progress.
A lot of knitting patterns are in PDF, but I knew I didn't want to do that. So I have a print stylesheet instead.
Most of it is pretty straightforward. Text is serif instead of sans-serif, black with a white background, grey links that are underlined, display: none on the navigation, that sort of thing.
I did get to add this:
a::after {
content: " (" attr(href) ")";
}
Which sticks the URL after the text in a link. I really love that, because it's so much easier to make sure that the print-out has everything it needs.
I also brought in turning the images grayscale, because why use up your colour ink for something as ridiculous as a tiny photo of a scarf?
main#pattern img {
float: right;
padding: 0.5em;
margin: 1em;
filter: grayscale(1);
}
And this isn't in the stylesheet, but it's my first piece of JavaScript on my site in a very long time.
The knitting patterns now tell you that you can print them out.
<p class="printing">Psst! <a href="javascript:window.print()">
You can print me out!</a></p>
(The class is there just to hide that paragraph in the printout.)
I know this is the most hacky half-ass JavaScript around, but, hey, it does the job, the window gets the print dialog up, and you can print.
But what do you think?
So those are the relatively small but very important changes I made on my website. But what do you think? What have I missed out? What breaks?
Let me know. I can't promise I'll make a lot of changes, but, hey, if I'm going to go through it and drop, like, a whole bunch of nonsense favicon related tags, there could be something nice you want me to add in.