Squashed commit of the following:

commit a8b9873182
Author: Alexander Avery <alex.avery@beetbox.io>
Date:   Mon Feb 3 21:31:12 2025 -0500

    fix some layouts

commit 86a069e5ef
Author: Alexander Avery <alex.avery@beetbox.io>
Date:   Mon Feb 3 21:25:20 2025 -0500

    only show labels if posts exist

commit c310b74e89
Author: Alexander Avery <alex.avery@beetbox.io>
Date:   Mon Feb 3 21:14:09 2025 -0500

    correct order of heading tags; remove larger images for mobile

commit 7c0421e3c8
Author: Alexander Avery <alex.avery@beetbox.io>
Date:   Mon Feb 3 21:13:49 2025 -0500

    minify css

commit 3f92309a91
Author: Alexander Avery <alex.avery@beetbox.io>
Date:   Mon Feb 3 20:17:11 2025 -0500

    more lighthouse fixes; simplifications to scss

commit e71d36ae03
Author: Alexander Avery <alex.avery@beetbox.io>
Date:   Mon Feb 3 20:16:50 2025 -0500

    remove fonts

commit ce224c6bd1
Author: Alexander Avery <alex.avery@beetbox.io>
Date:   Mon Feb 3 18:17:54 2025 -0500

    begin simplification

assets/sass/code.scss

@@ -1,18 +1,4 @@
-code {
+code { white-space: nowrap; }
-	background: $dark;
-	border-radius: .4rem;
-	margin: 0 .2rem;
-	padding: .2rem .5rem;
-	white-space: nowrap;
-}
-
-p code {
-	font-size: .9rem !important;
-}
-
-li code {
-    font-size: .9rem !important;
-}
 
 pre {
 	background-color: $background-color !important;
@@ -27,5 +13,6 @@ pre {
 		max-width: 100%;
 		overflow-x: auto;
 		border-left: .3rem solid $code-edge;
+    	border-radius: .4rem;
 	}
 }

assets/sass/fonts.scss

@@ -1,25 +0,0 @@
-/*
-You may download the entire Source Sans Pro font family here:
-https://fonts.google.com/specimen/Source+Sans+Pro?query=Source+Sans+Pro
-*/
-@font-face {
-	font-family: 'Source Sans Pro';
-	src: url('/fonts/SourceSansPro-Light.ttf') format('truetype');
-	font-weight: light;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Source Sans Pro';
-	src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype');
-	font-weight: normal;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Source Sans Pro';
-	src: url('/fonts/SourceSansPro-Bold.ttf') format('truetype');
-	font-weight: bold;
-	font-style: normal;
-}
-

assets/sass/main.scss

@@ -1,7 +1,6 @@
 @import 'colors.scss';
 @import 'cards.scss';
 @import 'code.scss';
-@import 'fonts.scss';
 
 @mixin screen-max($max) {
 	@media (max-width: $max - 1) {
@@ -14,95 +13,51 @@ body {
 	color: $font-color;
 	margin: 0px;
 	overflow-y: scroll;
-	font-family: 'Source Sans Pro';
+	font-family: 'Helvetica';
+	font-size: 1.1rem;
 }
 
+h2 {font-size: 1.2rem;}
+
 header {
 	background-color: $top-bar;
 	box-shadow: 0px 5px 10px black;
-	.spread {
+	nav {
-		gap: 24px;
+    	@include screen-max(500px){text-align: center;}
-		display: flex;
+
-		align-items: flex-end;
+    	div {display: inline-block;}
-		justify-content: space-between;
+
-		@include screen-max(1000px){justify-content: center;}
+		img { max-width: 300px; }
-		ul {
+
-			margin: 0px;
-			padding: 0px;
-			list-style-type: none;
     	a {
-				text-align: center;
+        	margin-right: 12px;
-				margin: auto;
         	font-weight: bold;
         	text-decoration: none;
-				color: $font-color-alternate;
+        	&, &:visited, &:hover {color: $font-color-alternate;}
-			}
-		}
-	}
-	nav {
-		max-width: 1400px;
-		margin: 0px auto;
-		padding: 8px;
-		flex-wrap: wrap;
-		a {
-			@include screen-max(1000px){flex-basis: 100%;}
-		}
-		img {
-			max-width: 300px;
-			display: block;
-			@include screen-max(1000px){margin: auto; flex-basis: 100%;}
     	}
 	}
 }
 
-a {
+header, main, section {padding: 0 16px;}
-	color: $link-color;
 
-	&:visited, &:hover {
+nav, main, section {max-width: 1200px; margin: auto;}
-		color: $link-color-visited;
+main img {max-width: 100%}
-	}
-}
 
-main {
+footer {text-align: center;}
-	max-width: 820px;
-	margin: auto;
-	@include screen-max(840px){padding: 0px 16px;}
 
-	img {
-		width: 100%;
-	}
-}
 
-.center-text {
+a {
-	text-align: center;
+	color: $link-color;
-	flex-basis: 100%;
+	&:visited, &:hover { color: $link-color-visited; }
-}
-
-a, p, li, h2 {
-	font-size: 1.25rem;
-}
-
-img {
-	 object-fit: cover;
 }
 
-img.featured {
+img.featured{aspect-ratio: 4/3;}
+img.featured, img.author {
+    display: block;
     border-radius: 8px;
+    margin: 12px 0;
+    object-fit: cover;
     max-height: 500px;
-    max-width: 100%;
-    display: block;
-}
-
-.margin {
-    margin: 12px auto;
-}
-
-.small-text {
-	font-size: 1rem;
-}
-
-.large-text {
-    font-size: 2rem;
 }
 
 .left-to-right {
@@ -117,26 +72,14 @@ img.featured {
     align-items: center;
 }
 
-section {
-	max-width: 1000px;
-	margin: 16px auto;
-	padding: 8px;
-}
-
 section.article-list {
+    margin: 8px 0px;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	gap: 40px;
 }
 
-.center-box {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-
 .fill-wh {
 	width: 100%;
 	height: 100%

layouts/404.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
-<div class="center-box">
+<main>
     <h1>404</h1>
-	<h2 class="center-text">This page doesn't exist. Let's go <a href="/">home</a></h2>
+    <h2>This page doesn't exist. Let's go <a href="/">home</a></h2>
-</div>
+</main>
 {{ end }}
 

layouts/_default/baseof.html

@@ -19,7 +19,7 @@
             <meta name="description" content="{{ delimit . "," }}">
         {{- end }}
 
-    	{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS -}}
+    	{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS | minify -}}
     	<link rel="stylesheet" href="{{ $style.Permalink }}">
 
     	<title>
@@ -29,12 +29,12 @@
 	</head>
 	<body>
 
-        {{ partial "header.html" . }}
+{{ partial "header.html" . }}
 
-		{{ block "main" . }}
+{{ block "main" . }}
-		{{ end }}
+{{ end }}
 
-		{{ partial "footer.html" . }}
+{{ partial "footer.html" . }}
 
 	</body>
 </html>

layouts/_default/list.html

@@ -1,26 +1,48 @@
 {{ define "main" }}
-
 	{{ $pages := .Site.RegularPages }}
+    {{if not .IsHome }} {{ $pages = .Pages }} {{ end }}
 
-    {{if not .IsHome }}
+    <main>
-
+    	{{ if not .IsHome }}
-    	<h1 class="center-text">{{ .Title | markdownify | lower }}</h1>
+        	<h1>{{ .Title | markdownify | lower }}</h1>
-
+        {{ else }}
-    	{{ $pages = .Pages }}
+        	<h1>Beet Box</h1>
-
     	{{ end }}
 
-    {{ if templates.Exists "partials/pre-content.html" }}
+    	{{ if and .IsSection (not .IsHome) }} {{ partial "article-meta.html" . }} {{ end }}
-    	{{ partial "pre-content.html" . }}
+
-    {{ end }}
+    	{{ with .Content }}
+        <section>
+        {{ . }}
+        </section>
+    	{{- end }}
 
-    <section>{{ .Content }}</section>
+    </main>
 
+    {{ with $pages.Limit 4 }}
+    	<section>
+            <h2>Latest Posts:</h2>
             <section class="article-list">
-     {{ range $pages }}
+            {{ range . }}
             {{ partial "article.html" . }}
             {{ end }}
             </section>
+    	</section>
+    {{ end }}
+
+    {{ with $pages }}
+    	<section>
+            <h2>All Posts:</h2>
+            {{ range .GroupByDate "2006" }}
+            	<p>{{ .Key }}</p>
+            	<ul>
+            	{{ range .Pages -}}
+            	<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+            	{{ end -}}
+            	</ul>
+            {{ end }}
+    	</section>
+    {{ end }}
 
 {{ end }}
 

layouts/_default/single.html

@@ -4,30 +4,17 @@
     <main>
     	{{ partial "article-meta.html" . }}
 
-        {{ if .Params.toc }}
-            {{ .TableOfContents }}
-        {{ end }}
-
-        {{ if templates.Exists "partials/pre-content.html" }}
-        	{{ partial "pre-content.html" . }}
-        {{ end }}
-
         {{ .Content }}
+    </main>
 
-        <p>
+    <section>
-
     	{{ with .NextInSection }}
-        		<b>Next: </b><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+    		<p>Next: <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></p>
-        		<br>
     	{{ end }}
 
     	{{ with .PrevInSection }}
-        		<b>Previous: </b><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+    		<p>Previous: <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></p>
-        		<br>
     	{{ end }}
+    </section>
 
-          <b><a href="/"> >> Home</a></b>
-    	</p>
-
-    </main>
 {{ end }}

layouts/authors/list.html

@@ -1,34 +1,33 @@
 {{ define "main" }}
-    <section class="left-to-right">
+    <section>
 
         {{ with .Resources.GetMatch "avatar" }}
-        <img class="shadow featured" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
+        <img class="shadow author" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
         {{ end }}
 
         <div>
             <h1>{{ .Params.name }}</h1>
-            <p>{{ .Params.bio }}</p>
+            <a href={{ .Params.projects }}>Projects</a>
-
-            <a class="small-text" href={{ .Params.projects}}>Projects</a>
             <span> | </span>
-            <a class="small-text" href="mailto:{{ .Params.email }}">{{ .Params.email}}</a>
+            <a href="mailto:{{ .Params.email }}">{{ .Params.email}}</a>
         </div>
 
     </section>
 
-    <section>
+    <main>
-
         {{ .Content }}
+    </main>
 
+	<section>
     <h2>Posts:</h2>
-
+    {{ with .Data.Pages }}
-    </section>
-
         <section class="article-list">
-        {{ range .Data.Pages }}
+        {{ range . }}
         {{ partial "article.html" . }}
         {{ end }}
         </section>
+    {{ end }}
+	</section>
 
 {{ end }}
 

layouts/authors/terms.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
-<h1 class="center-text">Authors</h1>
 
 <section>
+    <h1 class="center-text">Authors</h1>
 	{{ range .Data.Pages }}
 		{{ partial "article-alternate.html" . }}
 	{{ end }}

layouts/games/list.html

@@ -1,27 +0,0 @@
-{{ define "main" }}
-
-    <main>
-        {{ partial "article-meta.html" . }}
-
-        {{ if .Params.toc }}
-            {{ .TableOfContents }}
-        {{ end }}
-
-        {{ .Content }}
-    </main>
-
-        {{ if gt (len .Data.Pages) 0 }}
-
-        	<section>
-            	<h2>Devlogs:</h2>
-        	</section>
-
-            <section class="article-list">
-        	    {{ range .Data.Pages }}
-        	    	{{ partial "article.html" . }}
-        	    {{ end }}
-            </section>
-
-        {{ end }}
-
-{{ end }}

layouts/games/meta-extra.html

@@ -1,7 +0,0 @@
-{{ with .Params.releaseDate }}
-    <h2 class="small-text">Released: {{ dateFormat "Mon | Jan 2, 2006" . }}</h2>
-{{ end }}
-
-<h2 class="small-text">Platforms:
-<span class="margin small-text">{{ delimit .Params.platforms " · " }}</span>
-</h2>

layouts/partials/article-meta.html

@@ -1,25 +1,19 @@
 <section>
-    <h1 class="large-text">{{ .Title | markdownify }}</h1>
-
     {{ with .Params.authors }}
         {{ $author := (index . 0) }}
-        <h2>
+        <h4>Author: <a href={{ printf "/%s/%s" "authors" (urlize $author) }}>{{ $author }}</a></h4>
-            Author: <a href={{ printf "/%s/%s" "authors" (urlize $author) }}>{{ $author }}</a>
-        </h2>
     {{ end }}
 
     {{ with .Date }}
-        <h2 class="small-text">Posted: {{ .Format "Mon | Jan 2, 2006" }}</h2>
+        <h4>Posted: {{ .Format "Mon | Jan 2, 2006" }}</h4>
     {{ end }}
 
-    {{ .Render "meta-extra" }}
-
     {{ range (.GetTerms "tags") }}
     	<span>
-        	<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+        	<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
     	</span>
     {{ end }}
 
 	{{ $image := (.Resources.GetMatch "featured") }}
-	{{ partial "image.html" (dict "image" $image "alt" .Params.featured.alt "class" "shadow featured margin") }}
+	{{ partial "image.html" (dict "image" $image "alt" .Params.featured.alt "class" "shadow featured") }}
 </section>

layouts/partials/article.html

@@ -2,13 +2,13 @@
 
     <a href=" {{.Permalink }}">
     	{{ $image := .Resources.GetMatch "featured" }}
-    	{{ partial "image.html" (dict "image" $image "alt" .Params.featured.alt) }}
+    	{{ partial "image-small.html" (dict "image" $image "alt" .Params.featured.alt) }}
     </a>
 
     <div>
 
     	{{ with index (.GetTerms "tags") 0 }}
-    		<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+    		<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
     	{{ end }}
 
     	<h2 class="title">{{ .Title | markdownify }}</h2>

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <footer>
 	<hr>
-	<p class="center-text"><a class="small-text" href="/authors">Authors</a></p>
+	<p><a href="/authors">Authors</a></p>
-	<p class="center-text small-text">{{ $.Site.Copyright | safeHTML }}</p>
+	<p>{{ $.Site.Copyright | safeHTML }}</p>
 </footer>

layouts/partials/header.html

@@ -1,11 +1,11 @@
 <header>
-	<nav class="spread">
+	<nav>
 		<a href="/"><img src="{{ .Site.Params.logo }}" alt="The {{ .Site.Title }} Logo"></a>
-		<ul class="spread">
+		<div>
-    		{{ range .Site.Params.HeaderLinks }}
+    		{{ range .Site.Params.HeaderLinks -}}
-        		<li><a href="{{ .url }}" title="{{ .title }}">{{ .title }}</a></li>
+    		<a href="{{ .url }}" title="{{ .title }}">{{ .title }}</a>
-			{{ end }}
+    		{{ end -}}
-			<li>{{ printf `<a href="/index.xml" title="%s">RSS</a>` $.Site.Title | safeHTML }}</li>
+    		{{ printf `<a href="/index.xml" title="%s">RSS</a>` $.Site.Title | safeHTML }}
-		</ul>
+		</div>
 	</nav>
 </header>

layouts/partials/image-small.html

@@ -0,0 +1,28 @@
+<img class="{{ .class }}"
+	{{- with .image -}}
+
+        {{ $smallest := (.Resize "305x webp q60") }}
+
+		srcset="
+    		{{- with $smallest -}}
+        		{{ printf "%s %dw," .RelPermalink .Width }}
+    		{{- end -}}
+
+    		{{- with (.Resize "480x webp q60") -}}
+        		{{ printf "%s %dw," .RelPermalink .Width }}
+    		{{- end -}}
+
+		"
+
+		sizes="
+    		(max-width: 480px) 305px;
+    		480px"
+
+    	src="
+    	{{- with $smallest -}}
+    		{{ .RelPermalink }}
+    	{{- end -}}"
+
+        alt="{{ .Params.alt }}"
+	{{- end -}}
+>

layouts/partials/image.html

@@ -1,18 +1,35 @@
 <img class="{{ .class }}"
 	{{- with .image -}}
+
+        {{ $smallest := (.Resize "320x webp q60") }}
+
 		srcset="
-    		{{- with (.Resize "600x q40") -}}
+    		{{- with $smallest -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}
 
-    		{{- with (.Resize "1200x q65") -}}
+    		{{- with (.Resize "480x webp q60") -}}
-        		{{ printf "%s %dw" .RelPermalink .Width }}
+        		{{ printf "%s %dw," .RelPermalink .Width }}
-    		{{- end -}}"
+    		{{- end -}}
+
+    		{{- with (.Resize "600x webp q70") -}}
+        		{{ printf "%s %dw," .RelPermalink .Width }}
+    		{{- end -}}
+
+    		{{- with (.Resize "800x webp q90") -}}
+        		{{ printf "%s %dw," .RelPermalink .Width }}
+    		{{- end -}}
+
+		"
 
-    	sizes="(max-width: 900px) 600px, (min-width: 901px) 1200px"
+		sizes="
+    		(max-width: 480px) 320px;
+    		(max-width: 600px) 480px;
+    		(max-width: 800px) 600px;
+    		800px"
 
     	src="
-    	{{- with (.Resize "600x q40") -}}
+    	{{- with $smallest -}}
     		{{ .RelPermalink }}
     	{{- end -}}"
 

layouts/partials/posts-artfully-enumerated.html

@@ -0,0 +1 @@
+

layouts/partials/posts-enumerated.html

@@ -0,0 +1,20 @@
+{{ with . }}
+<section>
+    <h2>Latest Posts:</h2>
+    <section class="article-list">
+    {{ range .Limit 5 }}
+        {{ partial "article.html" . }}
+    {{ end }}
+    </section>
+
+    <h2>All Posts:</h2>
+    {{ range .GroupByDate "2006" }}
+    	<p>{{ .Key}}</p>
+    	<ul>
+    	{{ range .Pages -}}
+    	<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+    	{{ end -}}
+    	</ul>
+    {{ end }}
+</section>
+{{ end }}