From c3fdaeffb6d6fe4f42614f4b4b5e6c14d131bd77 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sun, 20 Aug 2023 14:28:07 -0500
Subject: Add avatar

---
 assets/main.scss             |  74 ++++++++++++++++++++++++-------------------
 layouts/_default/list.html   |   5 +--
 layouts/_default/single.html |   1 +
 layouts/blog/single.html     |   1 +
 layouts/index.html           |   1 +
 layouts/partials/nav.html    |   7 +++-
 static/avatar.png            | Bin 0 -> 10233227 bytes
 7 files changed, 53 insertions(+), 36 deletions(-)
 create mode 100644 static/avatar.png

diff --git a/assets/main.scss b/assets/main.scss
index ee7f15a..47df374 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -22,40 +22,39 @@ main {
   }
 }
 
-a {
-  color: #007bff;
-  text-decoration: underline;
-
-  &:hover {
-    color: #0056b3;
-    text-decoration: none;
+nav {
+  max-width: calc(800px + 128px * 2);
+  margin: 1rem auto;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  grid-template-columns: auto auto 1fr;
+  grid-template-areas:
+    "logo header"
+    "logo nav"
+    "logo none";
+
+  a[href="/"] {
+    grid-area: logo;
   }
 
-  @media(prefers-color-scheme: dark) {
-    color: #78bef8;
+  h1 {
+    grid-area: header;
+    margin: 0;
   }
-}
 
-nav {
-  text-align: center;
-  margin-bottom: 4rem;
-}
-
-nav ul {
-  list-style: none;
-  padding-left: 0;
-}
-
-nav ul li {
-  display: inline;
-}
-
-nav ul li:not(:first-child) {
-  display: inline;
-  padding-left: 2rem;
-
-  @media only screen and (max-width: 600px) {
-    padding: 0.2rem;
+  ul {
+    grid-area: nav;
+    margin: 0.5rem 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    li {
+      padding-right: 2rem;
+    }
   }
 }
 
@@ -64,12 +63,21 @@ footer {
   margin: 4rem 0;
 }
 
+a {
+  color: #007bff;
+  text-decoration: underline;
 
-h1 {
-  text-align: center;
+  &:hover {
+    color: #0056b3;
+    text-decoration: none;
+  }
+
+  @media(prefers-color-scheme: dark) {
+    color: #78bef8;
+  }
 }
 
-.post h3 {
+.post h2 {
   margin-bottom: 0;
 }
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 7017822..0171579 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>{{ .Title }}</title>
+    <link rel="icon" type="image/png" href="/avatar.png">
     {{ $style := resources.Get "main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
   </head>
@@ -13,11 +14,11 @@
       <h2>{{ .Title }}</h2>
         {{ range .Pages }}
           <div class="post">
-            <h3>
+            <h2>
               <a href="{{ .Permalink }}">
                  {{ .Title }}
               </a>
-            </h3>
+            </h2>
             <small>
               {{ .Date.Format "January 2, 2006" }}
             </small>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index f792e75..d82ed2c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>{{ .Title }}</title>
+    <link rel="icon" type="image/png" href="/avatar.png">
     {{ $style := resources.Get "main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
   </head>
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 2643ea9..fb007db 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>{{ .Title }}</title>
+    <link rel="icon" type="image/png" href="/avatar.png">
     {{ $style := resources.Get "main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
   </head>
diff --git a/layouts/index.html b/layouts/index.html
index a4bdd0d..c67a9f9 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>{{ .Title }}</title>
+    <link rel="icon" type="image/png" href="/avatar.png">
     {{ $style := resources.Get "main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
   </head>
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 9e04c80..86719bb 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,5 +1,10 @@
-<h1>Michael Hunteman</h1>
 <nav>
+  <a href="/">
+    <img
+      src="/avatar.png"
+      width="128" height="128" />
+  </a>
+  <h1>Michael Hunteman</h1>
   <ul>
     {{ range .Site.Menus.nav }}
       <li><a href="{{ .URL }}">{{ .Name }}</a></li>
diff --git a/static/avatar.png b/static/avatar.png
new file mode 100644
index 0000000..18f9008
Binary files /dev/null and b/static/avatar.png differ
-- 
cgit v1.2.3