From 3f92309a9103b8b907c131a884cb9a446f2460a2 Mon Sep 17 00:00:00 2001
From: Alexander Avery <alex.avery@beetbox.io>
Date: Mon, 3 Feb 2025 20:17:11 -0500
Subject: [PATCH] more lighthouse fixes; simplifications to scss

---
 assets/sass/main.scss             | 21 +++++++++++----------
 layouts/authors/list.html         | 10 ++++------
 layouts/partials/image-small.html |  6 +++---
 layouts/partials/image.html       |  8 ++++----
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 88b422d..8cd0507 100644
--- a/assets/sass/main.scss
+++ b/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) {
@@ -22,22 +21,24 @@ header {
 	background-color: $top-bar;
 	box-shadow: 0px 5px 10px black;
 	nav {
-    	@include screen-max(840px){text-align: center;}
+    	@include screen-max(500px){text-align: center;}
+
+    	div {display: inline-block;}
+
 		img { max-width: 300px; }
 
     	a {
         	margin-right: 12px;
         	font-weight: bold;
         	text-decoration: none;
-        	color: $font-color-alternate;
-        	&:visited {color: $font-color-alternate;}
+        	&, &:visited, &:hover {color: $font-color-alternate;}
     	}
 	}
 }
 
-header, main, section, nav {padding: 0 16px;}
+header, main, section {padding: 0 16px;}
 
-main, section, nav {max-width: 920px; margin: auto;}
+nav, main, section {max-width: 1200px; margin: auto;}
 main img {max-width: 100%}
 
 footer {text-align: center;}
@@ -48,13 +49,13 @@ a {
 	&:visited, &:hover { color: $link-color-visited; }
 }
 
-img.featured {
+img.featured{aspect-ratio: 4/3;}
+img.featured, img.author {
     display: block;
     border-radius: 8px;
-    margin: 12px auto;
-    max-height: 888px;
+    margin: 12px 0;
     object-fit: cover;
-    aspect-ratio: 4/3;
+    max-height: 500px;
 }
 
 .left-to-right {
diff --git a/layouts/authors/list.html b/layouts/authors/list.html
index 9edc800..cdb2c19 100644
--- a/layouts/authors/list.html
+++ b/layouts/authors/list.html
@@ -1,15 +1,13 @@
 {{ 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 href={{ .Params.projects }}>Projects</a>
             <span> | </span>
             <a href="mailto:{{ .Params.email }}">{{ .Params.email}}</a>
         </div>
@@ -21,7 +19,7 @@
     </main>
 
 	<section>
-    <h2>Latest Posts:</h2>
+    <h2>Posts:</h2>
     {{ with .Data.Pages }}
         <section class="article-list">
         {{ range . }}
diff --git a/layouts/partials/image-small.html b/layouts/partials/image-small.html
index c5a4cd6..afc4747 100644
--- a/layouts/partials/image-small.html
+++ b/layouts/partials/image-small.html
@@ -1,18 +1,18 @@
 <img class="{{ .class }}"
 	{{- with .image -}}
 
-        {{ $smallest := (.Resize "305x q60") }}
+        {{ $smallest := (.Resize "305x webp q60") }}
 
 		srcset="
     		{{- with $smallest -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}
 
-    		{{- with (.Resize "480x q60") -}}
+    		{{- with (.Resize "480x webp q60") -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}
 
-    		{{- with (.Resize "600x q70") -}}
+    		{{- with (.Resize "600x webp q70") -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}
 		"
diff --git a/layouts/partials/image.html b/layouts/partials/image.html
index e43991b..9c567e9 100644
--- a/layouts/partials/image.html
+++ b/layouts/partials/image.html
@@ -1,22 +1,22 @@
 <img class="{{ .class }}"
 	{{- with .image -}}
 
-        {{ $smallest := (.Resize "320x q60") }}
+        {{ $smallest := (.Resize "320x webp q60") }}
 
 		srcset="
     		{{- with $smallest -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}
 
-    		{{- with (.Resize "480x q60") -}}
+    		{{- with (.Resize "480x webp q60") -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}
 
-    		{{- with (.Resize "600x q70") -}}
+    		{{- with (.Resize "600x webp q70") -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}
 
-    		{{- with (.Resize "800x q90") -}}
+    		{{- with (.Resize "800x webp q90") -}}
         		{{ printf "%s %dw," .RelPermalink .Width }}
     		{{- end -}}