Fix links on hover, make About CSS-only

themes/starter/layout/_partial/buttons.ejs

@@ -1,7 +1,7 @@
 
 <input name="popup" id="overlay2" class="overlay" type="radio">
   <div class="share-wrapper">
-    <div class="u-extra">
+    <div class="u-hidden">
       <div class="share">
         <label class="dex-btn rounded diaspora" title="Share this page on Diaspora" for="diaspora-share">
           <svg role="img" class="dex-icon">

themes/starter/layout/_partial/navbar.ejs

@@ -22,14 +22,13 @@
     <li><a href="/en/knowledge"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('knowledge') %></span></a></li>
     <li><a href="/en/miscellaneous"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('more') %></span></a></li>
     <li><a href="/en/portal/servers"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('portal') %></span></a></li>
-    <li class="source">
+    <li class="revealer">
-      <div class="u-extra">
+      <span class="revealer__toggle" tabindex="0"></span>
+      <div class="revealer__text"><span><%- __('about') %></span></div>
+      <div class="u-hidden source">
         <a href="https://gitlab.com/distributopia/all-logos-in-one-basket"><%- __('logo') %></a>
         <a href="https://git.feneas.org/feneas/fediverse"><%- __('code') %></a>
       </div>
-      <div id="pulse" class="source__toggle">
-        <button type="button"><%- __('about') %></button>
-      </div>
     </li>
   </ul>
 </div>

themes/starter/source/assets/scripts/main.js

@@ -30,17 +30,6 @@
     overlay.checked = true;
   }
 
-  /**** Reveal about info ****/
-
-  const about = document.getElementById('pulse');
-
-  about.addEventListener('click', toggleInfo);
-
-  function toggleInfo(e) { // to separate func-helpers file
-    const content = e.currentTarget.previousElementSibling;
-    content.classList.toggle('open');
-  }
-
   /**** Close share button input on click outside input ****/
 
   const serverForm = document.getElementsByClassName('hidden');

themes/starter/source/assets/scss/modules/_navbar.scss

@@ -42,7 +42,7 @@
 .navbar a {
   border-bottom: none;
   display: block;
-  padding: 0 0 .1em 1em;
+  padding: 0 0 .1em 2.2em;
 }
 
 .navbar a:hover,
@@ -67,7 +67,7 @@
   right: 0;
   width: 200px;
   height: 100vh;
-  padding: 8em 0 1em 20px;
+  padding: 8em 0 1em 0;
   background-color: $white;
   display: inline-block;
   transform: matrix(1, 0, 0, 1, 220, 0);
@@ -149,34 +149,88 @@
   display: block;
 }
 
-.source {
+.revealer {
   position: absolute;
   bottom: 1.8em;
   width: 100%;
-  margin: 0 -20px;
   text-align: center;
   font-size: .85rem;
 }
 
-.source a {
+.revealer__toggle {
   display: block;
+  position: absolute;
+  font-size: 0;
+  z-index: 4;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  height: 34px;
+  width: 100%;
 }
 
-.source__toggle button {
+.revealer__toggle:focus {
+  outline: 0;
+}
+
+.revealer__text {
+  position: absolute;
   font-family: $font-secondary;
   cursor: pointer;
   background: none;
-  color: $golden;
+  color: $black;
   border: 0;
-  border-bottom: 1px solid transparent;
+  width: 100%;
-    &:hover,
+}
-    &:focus,
+
-    &:active {
+.revealer__toggle,
+.revealer__text {
+  bottom: 0;
+}
+
+.revealer__toggle:hover ~ .revealer__text > span {
   outline: none;
   border-bottom: 1px solid $golden;
 }
+
+// .u-hidden {
+//   visibility: hidden;
+//   opacity: 0;
+//   transform: matrix(1, 0, 0, 1, 0, 0);
+//   transition: .25s ease;
+//   margin-bottom: .5em;
+// }
+
+// .u-hidden.open {
+//   visibility: visible;
+//   opacity: 1;
+//   transform: matrix(1, 0, 0, 1, 0, -3);
+// }
+
+.u-hidden.source {
+  transform: matrix(1, 0, 0, 1, 0, -30);
 }
 
+.u-hidden.source > a {
+  padding: 0;
+}
+
+.revealer__toggle:focus ~ .revealer__text {
+  z-index: 5;
+}
+
+.revealer__toggle:focus ~ .revealer__text > span {
+  outline: none;
+  border-bottom: 1px solid $golden;
+}
+
+.revealer__toggle:focus ~ .u-hidden {
+  opacity: 1;
+  visibility:visible;
+  transform: matrix(1, 0, 0, 1, 0, -35);
+}
+
+
 @media screen and (max-width: $mq-small) {
   .hamburger {
     width: 170px;
@@ -196,4 +250,8 @@
   .navbar li:not(:last-child) {
     line-height: 2.5;
   }
+
+  .revealer {
+    display: none;
+  }
 }

themes/starter/source/assets/scss/partials/_colors.scss

@@ -22,4 +22,4 @@ $peertube: #f1680d;
 $misskey: #fb4e4e;
 $osada: #008000;
 $pixelfed: #6736dd;
-$funkwhale: #009FE3;
+$funkwhale: #009fe3;

themes/starter/source/assets/scss/partials/_utils.scss

@@ -1,19 +1,19 @@
 
-.u-extra {
+.u-hidden {
   visibility: hidden;
   opacity: 0;
   transform: matrix(1, 0, 0, 1, 0, 0);
-  transition: .2s ease-in;
+  transition: .25s ease;
   margin-bottom: .5em;
 }
 
-.u-extra.open {
+.u-hidden.open {
   visibility: visible;
   opacity: 1;
   transform: matrix(1, 0, 0, 1, 0, -3);
 }
 
-.contents .u-extra {
+.contents .u-hidden {
   visibility: visible;
   opacity: 1;
   margin-bottom: 2em;