eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

blog: Restore the two column layout on Netscape Meteors

Browse source 
At the bottom of this post is a two-column layout showing two versions of the
meteors spinner. I broke that in a previous commit and this commit brings it back.

Use the new content-grid shortcode (implemented in the submodule commit) to render
a two-column grid.
This commit is contained in:
Eryn Wells 2024-11-26 08:39:50 -07:00
parent 052152193d
commit 80d1f8106a
2 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
content/blog/2023/netscape-meteors/index.md
View file

@ -26,13 +26,13 @@ Navigator "meteors" animation. This one has a special place in my head and
heart because it is so clearly connected to my memories of discovering the
web as a kid. Here it is in its original 60×60 px glory:
{{< figures/image name=netscape60 shouldShowTitle=false >}}
{{< figures/image name=netscape60 shouldShowTitle=false size=small >}}
I started out doing some web searches that turned up several versions. One was
promising but far too big: 400&times;400 px. Worse, after some shoddy resize
attempts, the "pixels" had become rectangular.
{{< figures/image name=rectangular-pixels shouldShowTitle=false >}}
{{< figures/image name=rectangular-pixels shouldShowTitle=false size=small >}}
This would not do.
@ -81,7 +81,10 @@ that replaces those pixels with ones that match the surrounding pixels. Here's
the modified 60&times;60 one and a bigger 240&times;240 px one, for good
measure:
{{< figures/image names="netscape-modified60,netscape-modified240" shouldShowTitle=false >}}
{{< content-grid columns=2 >}}
{{< figures/image name="netscape-modified60" shouldShowTitle=false shouldResize=false size=small >}}
{{< figures/image name="netscape-modified240" shouldShowTitle=false shouldResize=false size=small >}}
{{< /content-grid >}}
<script src="https://mastodon.social/embed.js" async="async"></script>