Show visually hidden "website" portion of link

ericwbailey · Oct 22, 2023 · b5a4d99 · b5a4d99
1 parent 4f4b4cd
commit b5a4d99
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/includes/intro.njk b/includes/intro.njk
@@ -1,6 +1,6 @@
-<h1 id="title">
+<h1 id="title" class="title">
   {{ metadata.title }}
 </h1>
-<p>
+<p class="tagline">
   {{ metadata.description }}
 </p>
diff --git a/includes/nav.njk b/includes/nav.njk
@@ -3,18 +3,18 @@
     <li>
       <a class="contact-link" rel="external"  referrerpolicy="strict-origin" href="https://a11y-webring.club/prev">
         <svg class="logo" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M11.707 18.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l4.293 4.293a1 1 0 0 1 0 1.414Z"/></svg>
-        <span>Previous<span class="hide-visually"> website</span></span>
+        <span>Previous website</span></span>
       </a>
     </li>
     <li>
       <a class="contact-link" rel="external"  referrerpolicy="strict-origin" href="https://a11y-webring.club/random">
         <svg class="logo" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M21.924 6.617a.997.997 0 0 0-.217-.324l-3-3a1 1 0 1 0-1.414 1.414L18.586 6h-3.321a5 5 0 0 0-4.288 2.428l-3.67 6.115A3 3 0 0 1 4.736 16H3a1 1 0 1 0 0 2h1.735a5 5 0 0 0 4.288-2.428l3.67-6.115A3 3 0 0 1 15.264 8h3.32l-1.292 1.293a1 1 0 0 0 1.414 1.414l3-3A.997.997 0 0 0 22 7M21.924 6.617a.996.996 0 0 1 .076.38l-.076-.38Z"/><path fill="#0D0D0D" d="m21.706 17.708-2.999 3a1 1 0 0 1-1.414-1.415L18.586 18h-3.321a5 5 0 0 1-4.288-2.428l-3.67-6.115A3 3 0 0 0 4.736 8H3a1 1 0 0 1 0-2h1.735a5 5 0 0 1 4.288 2.428l3.67 6.115A3 3 0 0 0 15.264 16h3.32l-1.292-1.293a1 1 0 0 1 1.414-1.414l3 3c.195.194.292.45.293.704V17a.997.997 0 0 1-.294.708Z"/></svg>
-        <span>Random<span class="hide-visually"> website</span></span>
+        <span>Random website</span></span>
       </a>
     </li>
     <li>
       <a class="contact-link" rel="external"  referrerpolicy="strict-origin" href="https://a11y-webring.club/next">
-        <span>Next<span class="hide-visually"> website</span></span>
+        <span>Next website</span></span>
         <svg class="logo" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path xmlns="http://www.w3.org/2000/svg" d="M12.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.586 13H5a1 1 0 1 1 0-2h11.586l-4.293-4.293a1 1 0 0 1 0-1.414Z"/></svg>
       </a>
     </li>

diff --git a/site.css b/site.css
@@ -180,16 +180,23 @@ li { margin-top: var(--size-1); }
   margin-top: var(--size-6);
 }
 
+.title,
+.tagline {
+  text-align: center;
+}
+
 .webring {
+  align-items: center;
   display: flex;
+  flex-direction: column;
   gap: var(--size-2);
   list-style-type: none;
   margin-left: 0;
 }
 
 .webring a {
   align-items: center;
-  display: flex;
+  display: inline-flex;
   gap: 0.25rem;
   justify-content: center;
 }
@@ -213,7 +220,6 @@ li { margin-top: var(--size-1); }
   border-top: 1px dotted currentColor;
   display: flex;
   flex-direction: column;
-  font-size: var(--size-2);
   justify-content: space-between;
   padding-top: var(--size-1);
   padding-right: 0.5ch;
@@ -222,6 +228,8 @@ li { margin-top: var(--size-1); }
 
 .name-lockup {
   display: flex;
+  font-size: var(--size-2);
+  font-weight: 500;
   gap: 0.75rem;
   align-items: center;
 }
@@ -337,7 +345,13 @@ button:active {
     margin-left: 0;
   }
 
+  .title,
+  .tagline {
+    text-align: left;
+  }
+
   .webring {
+    flex-direction: row;
     gap: var(--size-3);
   }