CSS Grids
I intended to do a more ambitious overhaul of my site, but I decided against it when I realized I could accomplish what I wanted much simpler. Instead of using a flexbox layout like before, I learned that I could use a CSS grid layout.
CSS grids have some interesting properties, the most useful one is that you can rearrange parts of the site in to specific locations. This is useful for making this site play nicely with mobile/portrait layouts.
Here’s the layout code for the site as it is now.
main {
display:grid;
grid-template-areas:
"header header header"
"side1 content side2"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 20% 60% 20%;
max-width:100vw;
justify-items: center;
gap:20px;
}
header{
grid-area: header;
}
#content {
grid-area: content;
}
#side1{grid-area: side1;}
#side2{grid-area: side2;}
footer{grid-area: footer;}
Pretty simple, I have the homepage content in the center and two sidebars on the side. In hugo, the sidebars are each their own partials that can be modified on their own. The magic comes in when I add a portrait layout media query:
@media screen and (orientation:portrait) {
main {
display:grid;
grid-template-areas:
"header"
"content"
"side1"
"side2"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
header{
grid-area: header;
}
#content {
grid-area: content;
}
#side1{grid-area: side1;}
#side2{grid-area: side2;}
footer{grid-area: footer;}
}
And voila! All the content is arranged into a single column but in a different order than they are declared in html. This is useful because it allows me to move the sidebars to after the main content when in portrait mode. I can imagine there are much more sophisticated layouts but it will take time to really design something interesting.
Using your own static site as a link shortener.
If your site has a short domain (or shorter than your other domains) you can use a simple trick to redirect browsers
I noticed on this Peertube Channel he has a variety of redirects pointed at various links with easy to remember links. You can replicate this without touching your webserver config while using an html redirect.
Step 1 Create a folder for your location
For example, instead of just linking https://mk.gabe.rocks/@gabriel (my fediverse profiel) I can instead create a link at gabe.rocks/fedi.
Since I’m using hugo I’ll create the fedi folder in the static directory, but if you’re managing your site directly you can just create the folder at the root.
Step 2 Create your index file
You’ll need an index.html file so that the pretty link works nicely. Here’s an example.
<html>
<head>
<meta http-equiv="refresh" content="0; url=YOUR_URL_HERE" />
</head>
<body>Attempting to redirect, if this fails <a href="YOUR_URL_HERE_AGAIN">click here</a>.
</body>
</html>