ericwbailey · ericwbailey · Jun 24, 2024 · Jun 24, 2024 · Jun 24, 2024 · Jun 24, 2024
diff --git a/.github/ACCESSIBILITY_STATEMENT.md b/.github/ACCESSIBILITY_STATEMENT.md
@@ -36,7 +36,7 @@ The [webring's issue tracker](https://github.com/ericwbailey/a11y-webring.club/i
 
 ## Reporting issues
 
-I ([Eric Bailey](https://ericwbailey.website/)) ask that you please let me know if discover an accessibility-related issue. I take these issues extremely seriously and will fix them as fast as possible. i will also include you in the process, if desired.
+I ([Eric Bailey](https://ericwbailey.website/)) ask that you please let me know if discover an accessibility-related issue. I take these issues extremely seriously and will fix them as fast as possible. I will also include you in the process, if desired.
 
 You can submit an accessibility issue by [filing a bug report using the issue tracker's bug issue template](https://github.com/ericwbailey/a11y-webring.club/issues/new?assignees=ericwbailey&labels=bug&projects=&template=bug-report.yml&title=%5BBug%5D+).
 

diff --git a/data/members/Eric Bailey.json b/data/members/Eric Bailey.json
@@ -4,6 +4,7 @@
   "url": "https://ericwbailey.website/colophon/",
   "github": "https://github.com/ericwbailey",
   "linkedin": "https://www.linkedin.com/in/ericwbailey/",
+  "bluesky": "https://bsky.app/profile/ericwbailey.website",
   "mastodon": "https://social.ericwbailey.website/@eric",
   "rss": "https://ericwbailey.website/feed/feed.xml"
 }
diff --git a/includes/widget.njk → includes/embed.njk b/includes/widget.njk → includes/embed.njk
@@ -1,3 +1,4 @@
+<div class="c-embed">
 <h2
   id="list-the-webring-on-your-website"
   tabindex="-1">
@@ -26,3 +27,4 @@
 <p>
   You can style the presentation of this code to your heart’s content, so long as it is done in an accessible way.
 </p>
+</div>
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>,&nbsp;and&nbsp;love.
+  <p class="[ c-made-with ]">
+    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&nbsp;love.
   </p>
   <div class="[ c-theme-switcher ]">
     <p>

diff --git a/includes/head.njk b/includes/head.njk
@@ -1,7 +1,7 @@
 <meta charset="utf-8">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <meta http-equiv="cleartype" content="on">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover">
 <meta name="generator" content="{{ eleventy.generator }}">
 <meta name="color-scheme" content="light dark">
 
@@ -14,8 +14,8 @@
 <link rel="manifest" href="{{ metadata.url }}/manifest.webmanifest">
 
 <meta name="application-name" content="{{ metadata.title }}">
-<meta name="theme-color" content="{{ metadata.theme.light }}">
-<meta name="theme-color" content="{{ metadata.theme.dark }}" media="(prefers-color-scheme: dark)">
+{# <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">
 

diff --git a/includes/intro.njk b/includes/intro.njk
@@ -5,5 +5,5 @@
   {{ metadata.title }}
 </h1>
 <p class="[ u-align-text-center ] [ c-tagline ]">
-  {{ metadata.description }}
+  A webring for digital accessibility&nbsp;practitioners
 </p>
diff --git a/includes/members.njk b/includes/members.njk
@@ -62,6 +62,14 @@
         </a>
       </li>
       {% endif %}
+      {# {% if member.bluesky %}
+      <li>
+        <a class="[ c-member-link ]" href="{{ member.mastodon }}">
+          <svg class="[ u-scale-on-hover ] [ c-icon ]"><path d="M13.873 3.80516C21.21 9.33216 29.103 20.5372 32 26.5502V42.4322C32 42.0942 31.87 42.4762 31.59 43.2992C30.078 47.7552 24.172 65.1462 10.667 51.2432C3.556 43.9232 6.848 36.6032 19.792 34.3932C12.387 35.6572 4.062 33.5682 1.778 25.3782C1.12 23.0222 0 8.51016 0 6.55016C0 -3.26784 8.579 -0.181838 13.873 3.80516ZM50.127 3.80516C42.79 9.33216 34.897 20.5372 32 26.5502V42.4322C32 42.0942 32.13 42.4762 32.41 43.2992C33.922 47.7552 39.828 65.1462 53.333 51.2432C60.444 43.9232 57.152 36.6032 44.208 34.3932C51.613 35.6572 59.938 33.5682 62.222 25.3782C62.88 23.0222 64 8.51016 64 6.55016C64 -3.26784 55.422 -0.181838 50.127 3.80516Z" fill="currentColor"/></svg>
+          <span class="[ u-hide-visually ]">Bluesky account: {{ member.name }}</span>
+        </a>
+      </li>
+      {% endif %} #}
       {% if member.mastodon %}
       <li>
         <a class="[ c-member-link ]" href="{{ member.mastodon }}">

diff --git a/index.njk b/index.njk
@@ -36,7 +36,7 @@
   </div>
 
   <div class="[ grid-embed ] [ u-content-inset u-color-background-primary u-color-text-secondary ]">
-    {% include "includes/widget.njk" %}
+    {% include "includes/embed.njk" %}
   </div>
 
   <div class="[ grid-faq ] [ u-content-inset u-content-max-width u-flow ]">

diff --git a/site.css b/site.css
@@ -26,18 +26,6 @@
     padding: 0;
   }
 
-  @keyframes target-fade {
-    0% {
-      background-color: var(--color-primary);
-      color: var(--color-secondary);
-      outline: var(--border-thickness-2) solid var(--color-primary);
-    }
-    100% {
-      background-color: unset;
-      color: unset;
-      outline: none;
-    }
-  }
 
   /* MARK: Root */
   :root {
@@ -81,6 +69,20 @@
     }
   }
 
+
+  @keyframes target-fade {
+    0% {
+      outline: var(--border-thickness-2) solid currentColor;
+    }
+    99% {
+      outline: var(--border-thickness-0) solid currentColor;
+    }
+    100% {
+      outline: none;
+    }
+  }
+
+
   /* MARK: Basics */
   html {
     margin: 0;
@@ -129,10 +131,6 @@
     color: inherit;
     outline: inherit;
     text-wrap: balance;
-    /* transition:
-      background-color var(--transition-medium),
-      color var(--transition-medium),
-      outline var(--transition-medium); */
   }
 
   a {
@@ -159,7 +157,7 @@
   }
 
   :target {
-    outline: var(--border-thickness-1) solid currentColor;
+    animation: target-fade 1s linear;
     outline-offset: 0.3rem;
   }
 
@@ -366,6 +364,11 @@
 
   .c-title {
     font-size: var(--step-5);
+    line-height: 0.9;
+  }
+
+  .c-tagline {
+    margin-block-start: var(--step-0);
   }
 
   .c-webring-links {
@@ -634,8 +637,6 @@
   }
 
   .c-codeblock {
-    --_codeblock-outer-columns: calc(var(--step-0) * 3);
-
     background-color: var(--color-secondary);
     color: var(--color-primary);
     grid-area: 1 / 1;
@@ -647,7 +648,6 @@
     tab-size: 4;
     text-align: left;
     white-space: pre;
-    /* width: calc(100vw - var(--_codeblock-outer-columns)); */
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
@@ -723,16 +723,33 @@
 }
 
 /* MARK: Media Queries */
+@supports (-webkit-tap-highlight-color: transparent) {
+  @media (orientation: landscape) and (min-resolution: 2x) {
+    @layer layout {
+      :where(
+        .grid-prev-rand-next,
+        .grid-toc,
+        .grid-members,
+        .grid-join,
+        .c-embed,
+        .grid-faq,
+        .c-made-with,
+        .c-theme-switcher,
+        .c-footer-additional
+      ) {
+        margin-inline-start: env(safe-area-inset-left);
+        margin-inline-end: env(safe-area-inset-right);
+      }
+    }
+  }
+}
+
 @media (min-width: 38rem) {
   @layer components {
     .view-as-grid {
       grid-template-columns: 1fr 1fr;
     }
 
-    .c-codeblock {
-      --_codeblock-outer-columns: calc(var(--step-1) * 2.75);
-    }
-
     .c-footer {
       padding-inline-start: var(--step-1);
     }