Update About page, Navbar (closes #74)

source/_data/about.json

@@ -17,7 +17,7 @@
         "info": "admin of this website, creator of nodes.fediverse.party; maintainer of Newsboat; writes programs in C++, reads sci-fi",
         "name": "Alexander Batischev",
         "site": "blog.debiania.in.ua",
-        "gitaccs": [ "github.com/Minoru", "gitlab.com/Minoru-kun", "codeberg.org/Minoru" ]
+        "gitaccs": [  "codeberg.org/Minoru", "github.com/Minoru", "gitlab.com/Minoru-kun" ]
       },
       {
         "nickname": "humanetech",

themes/starter/languages/en.yml

@@ -10,7 +10,7 @@ more: All apps
 portal: Portal
 magic: Magic Ball
 logo: logo hub
-about: ABOUT
+about: about
 
 # Index page
 hello: Hello, traveller!

themes/starter/layout/_partial/navbar.ejs

@@ -22,13 +22,7 @@
     <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><a href="/en/crystalball"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('magic') %></span></a></li>
-    <li class="revealer">
+    <li><a href="https://14th.fediverse.party"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span>fediquiz</span></a></li>
-      <span class="revealer__toggle" tabindex="0"></span>
+    <li><a href="/en/about"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('about') %></span></a></li>
-      <div class="revealer__text"><span><%- __('about') %></span></div>
-      <div class="u-hidden source">
-        <a href="https://codeberg.org/lostinlight/distributopia/src/branch/main/all-logos-in-one-basket"><%- __('logo') %></a>
-        <a href="https://codeberg.org/fediverse/fediparty"><%- __('code') %></a>
-      </div>
-    </li>
   </ul>
 </div>

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

@@ -30,7 +30,7 @@
   text-transform: uppercase;
   font-family: $font-secondary;
   color: $grey;
-  line-height: 2.2;
+  line-height: 2;
   width: 100%;
 }
 
@@ -51,10 +51,27 @@
   background-size: 2.5em 2.5em;
 }
 
-.navbar li:not(:last-child):hover svg {
+.navbar li:hover svg {
   fill: $golden;
 }
 
+.navbar li:last-child {
+  position: absolute;
+  bottom: 1.8em;
+  width: 100%;
+  text-align: center;
+  font-size: .85rem;
+  padding-left: 0;
+}
+
+.navbar li:last-child a {
+  padding-left: 0;
+}
+
+.navbar li:last-child svg {
+  display: none;
+}
+
 .overlay,
 .control,
 .control ~ .slideout {
@@ -149,74 +166,22 @@
   display: block;
 }
 
-.revealer {
+@media screen and (max-width: $mq-medium) {
-  position: absolute;
+  .navbar li:last-child {
-  bottom: 1.8em;
+    position: static;
-  width: 100%;
+    font-size: inherit;
-  text-align: center;
+    text-align: left;
-  font-size: .85rem;
+  }
-}
 
-.revealer__toggle {
+  .navbar li:last-child a {
-  display: block;
+    padding-left: 2.2em;
-  position: absolute;
+  }
-  font-size: 0;
-  z-index: 4;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  height: 34px;
-  width: 100%;
-}
 
-.revealer__toggle:focus {
+  .navbar li:last-child svg {
-  outline: 0;
+    display: initial;
+  }
 }
 
-.revealer__text {
-  position: absolute;
-  font-family: $font-secondary;
-  cursor: pointer;
-  background: none;
-  color: $black;
-  border: 0;
-  width: 100%;
-}
-
-.revealer__toggle,
-.revealer__text {
-  bottom: 0;
-}
-
-.revealer__toggle:hover ~ .revealer__text > span {
-  outline: none;
-  border-bottom: 1px solid $golden;
-}
-
-.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;
@@ -232,12 +197,4 @@
   .hamburger svg:last-of-type {
     margin-left: 30px;
   }
-
-  .navbar li:not(:last-child) {
-    line-height: 2.5;
-  }
-
-  .revealer {
-    display: none;
-  }
 }