Usability and footer tweaks based on feedback

_config.yml

@@ -31,6 +31,8 @@ slack_invite_url: "https://join.slack.com/t/bitcoindesign/shared_invite/zt-1rxp5
 discord_invite_url: "https://discord.gg/K7aQ5PErht"
 youtube_url: "https://www.youtube.com/c/BitcoinDesign"
 twitter_url: "https://twitter.com/bitcoin_design"
+nostr_url: "https://nosta.me/[email protected]"
+bitcoin_tv_url: "https://bitcointv.com/c/bitcoindesign/videos"
 
 # Build settings
 theme: minima

_includes/footer.html

@@ -1,18 +1,18 @@
 <footer class="site-footer">
   <div class="wrapper">
 
-    <a class="-logo" href="{{ "/" | relative_url }}" aria-label="Bitcoin design community logo">
+    <a class="-logo" href="{{ "/" | relative_url }}" aria-label="Bitcoin design community logo" title="Bitcoin design community logo">
       {% include bitcoin-design-community-medium.svg %}
     </a>
 
+    {%- include social.html -%}  
+
     <div class="edit-license">
       <a class="-edit" target="_blank" rel="noopener" href="{{site.github_repository_url}}blob/master/{{page.path}}">Edit this page</a>
 
       <a class="-license" href="{{ "/LICENSE" }}">License</a>
     </div>
 
-    {%- include social.html -%}  
-
     <nav class="footer-nav" aria-label="Footer navigation">
       {%- for path in page_paths -%}
         {%- assign my_page = site.pages | where: "path", path | first -%}

_includes/header.html

@@ -28,7 +28,7 @@
           {%- endfor -%}
         </nav>
       {%- endif -%}
-      <button class="nav-search" aria-expanded="false" aria-controls="toggled-search" aria-label="Toggle search" id="search-trigger" onclick="toggleSearch()">
+      <button class="nav-search" aria-expanded="false" aria-controls="toggled-search" aria-label="Toggle search" title="Toggle search" id="search-trigger" onclick="toggleSearch()">
         <svg viewBox="0 0 44 44" class="search-icon"><use xlink:href="#svg-search"></use></svg>
       </button>
 

_includes/social.html

@@ -1,30 +1,44 @@
 <nav class="social-media-list">
-  <a 
-    rel="me" 
-    href="{{ site.discord_invite_url }}" 
+  <a
+    rel="me"
+    href="{{ site.discord_invite_url }}"
     title="Bitcoin Design Discord"
   >
     {% include discord.svg %}
   </a>
-  <a 
-    rel="me" 
-    href="https://github.com/BitcoinDesign" 
+  <a
+    rel="me"
+    href="https://github.com/BitcoinDesign"
     title="Bitcoin Design on Github"
   >
     {% include github.svg %}
   </a>
-  <a 
-    rel="me" 
-    href="{{ site.twitter_url }}" 
+  <a
+    rel="me"
+    href="{{ site.nostr_url }}"
+    title="Bitcoin Design on Nostr"
+  >
+    {% include nostr.svg %}
+  </a>
+  <a
+    rel="me"
+    href="{{ site.twitter_url }}"
     title="Bitcoin Design on Twitter"
   >
     {% include twitter.svg %}
   </a>
-  <a 
-    rel="me" 
-    href="{{ site.youtube_url }}" 
+  <a
+    rel="me"
+    href="{{ site.youtube_url }}"
     title="Bitcoin Design on YouTube"
   >
     {% include youtube.svg %}
   </a>
+  <a
+    rel="me"
+    href="{{ site.bitcoin_tv_url }}"
+    title="Bitcoin Design on BitcoinTV"
+  >
+    {% include bitcoin-tv.svg %}
+  </a>
 </nav>

_sass/minima/_base.scss

@@ -607,7 +607,7 @@ a.skip-to-content-link {
   border-bottom-right-radius: 5px;
   transition: transform 150ms $ease;
 
-  &:focus {
+  &:focus-visible {
     transform: translate(-50%, 0%);
   }
 }

_sass/minima/_nav-list.scss

@@ -82,7 +82,7 @@
       }
 
       &:active,
-      &:focus {
+      &:focus-visible {
         border-width: 0;
         background-color: rgba(var(--primary-color-rgb), 0.1);
       }

_sass/minima/_search-page.scss

@@ -23,7 +23,7 @@
       box-sizing: border-box;
 
       &:active,
-      &:focus {
+      &:focus-visible {
         border-color: var(--primary-color);
         outline: none;
       }

_sass/minima/_site-footer.scss

@@ -18,7 +18,6 @@
     a.-logo {
       display: block;
       line-height: 1;
-      order: 1;
 
       svg {
         width: 50px;
@@ -38,7 +37,6 @@
 
     .edit-license {
       border-top: 1px solid black;
-      order: 3;
       flex-basis: 100%;
       display: flex;
       justify-content: space-between;
@@ -50,6 +48,10 @@
         color: black;
         font-size: 16px;
 
+        &:visited {
+          color: #808080;
+        }
+
         &:hover {
           color: var(--primary-color);
         }
@@ -59,7 +61,6 @@
     nav.social-media-list {
       display: flex;
       align-items: center;
-      order: 2;
       margin-left: auto;
 
       a {
@@ -72,14 +73,20 @@
           transition: all 150ms $ease;
         }
 
+        &:visited {
+          svg {
+            fill: #808080 !important;
+          }
+        }
+
         &:hover {
           svg {
             fill: var(--primary-color) !important;
           }
         }
 
         & + a {
-          margin-left: 15px;
+          margin-left: 20px;
         }
       }
     }
@@ -100,7 +107,12 @@
         color: black;
         font-size: 16px;
 
-        &:hover {
+        &:visited {
+          color: #808080;
+        }
+
+        &:hover,
+        &.active {
           color: var(--primary-color);
         }
       }
@@ -126,6 +138,18 @@
       }
     }
   }
+
+  @include media-query(small) {
+    .wrapper {
+      nav.social-media-list {
+        a {
+          & + a {
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+  }
 }
 
 body.sidebar {

_sass/minima/_site-header.scss

@@ -28,13 +28,8 @@
             letter-spacing: -0.5px;
             color: var(--frontHex);
             transition: color 100ms $ease;
-            // outline: none;
             white-space: nowrap;
 
-            &:focus {
-                outline: 2px solid var(--primary-color);
-            }
-
             svg {
                 width: 40px;
                 height: 40px;
@@ -50,7 +45,8 @@
                 color: $site-title-color;
             }
 
-            &:focus {
+            &:focus-visible {
+                outline: 2px solid var(--primary-color);
                 background-color: rgba(var(--primary-color), 0.05);
             }
 
@@ -79,7 +75,7 @@
                     text-decoration: none;
                 }
 
-                &:focus {
+                &:focus-visible {
                     background-color: rgba(var(--primary-color), 0.1);
                 }
 
@@ -109,7 +105,7 @@
                 transition: color 100ms linear;
             }
 
-            &:focus {
+            &:focus-visible {
                 background-color: rgba(var(--primary-color), 0.05);
             }
 
@@ -155,7 +151,7 @@
                     position: relative;
                     background-color: transparent;
 
-                    &:focus {
+                    &:focus-visible {
                         outline: none;
                     }
                 }
@@ -264,7 +260,7 @@
                     height: 44px;
                 }
 
-                &:focus {
+                &:focus-visible {
                     background-color: rgba(var(--primary-color), 0.05);
                 }
 

_sass/minima/_units-and-symbols-page.scss

@@ -39,7 +39,7 @@
                 margin: 0;
             }
 
-            &:focus {
+            &:focus-visible {
                 outline: none;
             }
         }