Design tweaks (#180)

ericwbailey · May 9, 2024 · 6f1c6a6 · 6f1c6a6
1 parent af1f81a
commit 6f1c6a6
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/data/metadata.json b/data/metadata.json
@@ -4,8 +4,11 @@
   "url": "https://a11y-webring.club",
   "author": "Eric Bailey",
   "lang": "en",
-  "theme": "#0e00f5",
   "cachebust": "?v=2",
+  "theme": {
+    "light": "#0e00f5",
+    "dark": "#eb5628"
+  },
   "social": {
     "color": "#0e00f5",
     "logo": "avatar.png",

diff --git a/includes/footer.njk b/includes/footer.njk
@@ -1,6 +1,6 @@
 <div>
   <p>
-    Made with <a class="[ c-footer-link ]" href="https://www.11ty.dev/">Eleventy</a>, <a class="[ c-footer-link ]" href="https://netlify.com/">Netlify</a>, <a class="[ c-footer-link ]" href="https://github.com/ericwbailey/a11y-webring.club/">GitHub</a>, and love.
+    Made with <a class="[ c-footer-link ]" href="https://www.11ty.dev/">Eleventy</a>, <a class="[ c-footer-link ]" href="https://netlify.com/">Netlify</a>,&nbsp;<a class="[ c-footer-link ]" href="https://github.com/ericwbailey/a11y-webring.club/">GitHub</a>,&nbsp;and&nbsp;love.
   </p>
   <div class="[ c-theme-switcher ]">
     <p>

diff --git a/includes/head.njk b/includes/head.njk
@@ -14,12 +14,19 @@
 <link rel="manifest" href="{{ metadata.url }}/manifest.webmanifest">
 
 <meta name="application-name" content="{{ metadata.title }}">
-<meta name="theme-color" content="{{ metadata.theme }}">
+<meta name="theme-color" content="{{ metadata.theme.light }}">
+<meta name="theme-color" content="{{ metadata.theme.dark }}" media="(prefers-color-scheme: dark)">
 
 <link rel="stylesheet" href="site.css" as="style">
 
-<meta property="og:url" content="{{ metadata.url }}">
-<meta property="og:type" content="website">
+<link rel="canonical" href="{{ metadata.url }}">
+<meta property="og:site_name" content="{{ metadata.title }}">
 <meta property="og:title" content="{{ metadata.title }}">
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ metadata.url }}">
+<meta name="twitter:card" content="summary_large_image">
+<meta property="og:image" content="{{ metadata.url }}/{{ metadata.social.preview }}">
+<meta name="twitter:image" content="{{ metadata.url }}/{{ metadata.social.preview }}">
+<meta name="description" content="{{ metadata.description }}">
+<meta name="twitter:description" content="{{ metadata.description }}">
 <meta property="og:description" content="{{ metadata.description }}">
-<meta property="og:image" content="{{ metadata.url }}/{{ metadata.social.preview }}{{ metadata.cachebust }}">
diff --git a/includes/intro.njk b/includes/intro.njk
@@ -1,6 +1,6 @@
 <h1
   id="title"
-  class="[ u-tracking-slight ] [ c-title ]"
+  class="[ u-align-text-center u-tracking-slight ] [ c-title ]"
   tabindex="-1">
   {{ metadata.title }}
 </h1>

diff --git a/includes/legal.njk b/includes/legal.njk
@@ -1,7 +1,6 @@
 <div class="[ prn-legal ] [ u-align-text-center ]">
   <p>
     <a class="[ c-prn-legal-link ]" href="#what-is-a-webring">What is a webring?</a>
-    &emsp;
     <a class="[ c-prn-legal-link ]" href="#join-this-webring">Join this webring</a>
   </p>
 </div>
diff --git a/site.css b/site.css
@@ -108,6 +108,10 @@
       "footer";
   }
 
+  :where(h1, h2, h3, h4) {
+    text-wrap: balance;
+  }
+
   a {
     color: var(--color-primary);
 
@@ -389,6 +393,10 @@
       background-color var(--transition-medium),
       color var(--transition-medium);
 
+    &:first-of-type {
+      margin-inline-end: 0.3rem;
+    }
+
     &:focus {
       background-color: var(--color-primary);
       color: var(--color-secondary);