Merge pull request #5 from si/codex/add-si-ligature-logo-and-favicon

Author: si

_includes/layouts/base.njk

@@ -12,11 +12,7 @@
     Update me: Remove comment if you want a CSP.
     <meta http-equiv="Content-Security-Policy" content="{{ csp.regular | safe }}">
     -->
-    {% if isdevelopment %}
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-    {% else %}
-    <link rel="icon" href="{{ '/img/favicon/favicon-192x192.png' | addHash }}" type="image/png">
-    {% endif %}
+    <link rel="icon" href="{{ '/img/si-ligature.svg' | addHash }}" type="image/svg+xml">
     <meta name="theme-color" content="#f9c412">
     <meta name="robots" content="max-snippet:-1, max-image-preview: large, max-video-preview: -1">
     <title>{{ renderData.title or title or metadata.title | escape }}</title>
@@ -68,7 +64,12 @@
     <header>
       <nav>
         <div id="nav">
-          <h1><a href="{{ '/' | url }}" title="Homepage">{{ metadata.title }}</a></h1>
+          <h1>
+            <a href="{{ '/' | url }}" class="site-logo" title="Homepage">
+              <img src="{{ '/img/si-ligature.svg' | addHash }}" alt="" class="site-logo-mark" width="28" height="28" aria-hidden="true">
+              <span>{{ metadata.title }}</span>
+            </a>
+          </h1>
           {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
           {%- for entry in collections.all | eleventyNavigation %}
             <a href="{{ entry.url | url }}">{{ entry.title }}</a>

css/main.css

@@ -798,17 +798,31 @@ header nav h1 {
   margin: 0;
   text-align: left;
 }
+header nav a.site-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-left: 0;
+}
+header nav a.site-logo span {
+  display: inline-block;
+}
+header nav img.site-logo-mark {
+  width: 1.75em;
+  height: 1.75em;
+  border-radius: 999px;
+}
 header nav a {
   font-weight: 700;
   text-decoration: none;
   font-family: var(--font-family-base);
   color: #181818;
   margin-left: 1.5em;
 }
-header nav a:first-of-type {
+header nav #nav > a:first-of-type {
   margin-left: auto;
 }
-header nav a:last-of-type {
+header nav #nav > a:last-of-type {
   margin-right: 1.5em;
 }
 header nav label {