Rework of the header navigation

src/pug/_device_selector.pug

@@ -1,10 +1,11 @@
 -
   const active = (bool) => bool ? 'active' : 'inactive'
 
-h1.primary
-  a(class=active(SECTION=='alpakka') href='/alpakka') Alpakka
-  a(class=active(SECTION=='kapybara') href='/kapybara') Kapybara
-  a(class=active(SECTION=='marmota') href='/marmota') Marmota
+br
+//- h1.primary
+//-   a(class=active(SECTION=='alpakka') href='/alpakka') Alpakka
+//-   a(class=active(SECTION=='kapybara') href='/kapybara') Kapybara
+//-   a(class=active(SECTION=='marmota') href='/marmota') Marmota
 
 if SECTION == 'alpakka'
   h1.secondary

src/pug/_header.pug

@@ -0,0 +1,64 @@
+mixin nav
+  -
+    const active = (name) => {
+      if (name===SECTION) return 'active'
+      if (name===SECTION_2) return 'active'
+      //- const devices = ['alpakka', 'kapybara', 'marmota']
+      //- if (name=='devices' && devices.includes(SECTION)) return 'active'
+      return ''
+    }
+  div.tab
+    div.title Devices
+    div.link(class=active('alpakka')): +a('/alpakka') Alpakka
+    div.link(class=active('kapybara')): +a('/kapybara') Kapybara
+    div.link(class=active('marmota')): +a('/marmota') Marmota
+    div.link(class=active('')): +a('/')  
+  div.tab
+    div.title Community
+    div.link(class=active('open_source')): +a('/contribute/open_source') Open Source
+    div.link(class=active('db')): +a(redirect.db) Accessibility DB
+    div.link(class=active('discord')): +ax(org.discord) Discord ↗
+    div.link(class=active('youtube')): +ax(org.youtube) Youtube ↗
+  div.tab
+    div.title Company
+    div.link(class=active('')): +a('/') Input Labs
+    div.link(class=active('blog')): +a(redirect.blog) Research / Blog
+    div.link(class=active('about')): +a('/about') About
+    div.link(class=active('shop')): +ax(org.shop) Shop ↗
+
+
+div.logo
+  +a('/')
+    div
+      img(src='/static/img/logo.apng')
+    span Input Labs
+
+//- div.icon
+//-   +ax(org.discord)
+//-     img(src='/static/img/discord.png')
+
+//- div.icon
+//-   +ax(org.youtube)
+//-     img(src='/static/img/youtube.png')
+
+//- div.icon
+//-   +ax(org.repos)
+//-     img(src='/static/img/github.png')
+
+//- div.icon
+//-   +ax(org.patreon)
+//-     img(src='/static/img/patreon.png')
+
+div.nav(class=((PAGE=='nav') ? '' : 'hide'))
+  +nav
+
+//- div.mininav
+//-   img(src='/static/img/burger.svg')
+//-   select(onchange="selectRedirect(event)")
+//-     option(value='') SELECT A PAGE
+//-     option(value='/') Input Labs
+//-     option(value='/alpakka') Devices
+//-     option(value=redirect.contribute) Contribute
+//-     option(value=redirect.db) Accessibility DB
+//-     option(value=redirect.blog) Blog
+//-     option(value=org.shop) Shop

src/pug/_mixins.pug

@@ -41,20 +41,6 @@
     'placeholder'
   ].includes(PAGE)
 
-mixin nav
-  -
-    const active = (name) => {
-      if (name==SECTION) return 'active'
-      const devices = ['alpakka', 'kapybara', 'marmota']
-      if (name=='devices' && devices.includes(SECTION)) return 'active'
-      return ''
-    }
-  div.tab(class=active('devices')):    +a('/alpakka')          Devices
-  div.tab(class=active('contribute')): +a(redirect.contribute) Contribute
-  div.tab(class=active('db')):         +a(redirect.db)         Accessibility DB
-  div.tab(class=active('blog')):       +a(redirect.blog)       Blog
-  div.tab:                             +ax(org.shop)           Shop
-
 mixin wikilink(href, external=false)
   - const active = (href==PAGE)
   - const cls = (active ? 'active' : '')

src/pug/_template.pug

@@ -19,7 +19,7 @@ html
       )
     //- Style.
     meta(name='viewport' content='initial-scale=0.68')
-    link(rel='stylesheet' href='/static/style.css?v=3')
+    link(rel='stylesheet' href='/static/style.css?v=4')
     link(
       rel='icon'
       type='image/png'
@@ -49,41 +49,7 @@ html
 
   body
     header
-      div.logo
-        +a('/')
-          div
-            img(src='/static/img/logo.apng')
-          span Input Labs
-
-      div.icon
-        +ax(org.discord)
-          img(src='/static/img/discord.png')
-
-      div.icon
-        +ax(org.youtube)
-          img(src='/static/img/youtube.png')
-
-      div.icon
-        +ax(org.repos)
-          img(src='/static/img/github.png')
-
-      div.icon
-        +ax(org.patreon)
-          img(src='/static/img/patreon.png')
-
-      div.nav(class=((PAGE=='nav') ? '' : 'hide'))
-        +nav
-
-      div.mininav
-        img(src='/static/img/burger.svg')
-        select(onchange="selectRedirect(event)")
-          option(value='') SELECT A PAGE
-          option(value='/') Input Labs
-          option(value='/alpakka') Devices
-          option(value=redirect.contribute) Contribute
-          option(value=redirect.db) Accessibility DB
-          option(value=redirect.blog) Blog
-          option(value=org.shop) Shop
+      include _header.pug
 
     main
       block page

src/pug/contribute/open_source.pug

@@ -1,14 +1,15 @@
 extends ../_template.pug
 
 block title
-  | Contribute to Input Labs
+  | Open source
 
 block page
-  include _title.pug
+  //- include _title.pug
+  h1 Open source
 
   div.boxes.grid
     div.box
-      h2 Open source
+      h2 Sources and schematics
       p #[em Explore, modify, and re-share!] This is all about our open source projects, so feel free to play with them, propose features, report bugs, and submit pull requests with improvements.
       p Browse our #[+ax(org.repos) GitHub Repositories] for the source code and hardware designs.
 

src/static/style.css

@@ -64,7 +64,7 @@ body {
 
 /* HEADER ================================================================== */
 header {
-  height: 100px;
+  /* height: 130px; */
   width: 964px;
   margin: 0 auto;
   padding: 0;
@@ -86,14 +86,14 @@ header .logo {
 header .logo a {
   font-family: Poppins;
   display: flex;
-  font-size: 24px;
-  margin-right: 10px;
+  font-size: 35px;
+  /* margin-right: 10px; */
   text-decoration: none;
 }
 header .logo img {
   display: block;
-  width: 80px;
-  margin-top: 15px;
+  width: 100px;
+  margin-top: 5px;
   animation: animation-bg var(--cycle) linear infinite;
   animation-delay: var(--seed);
   box-shadow: inset 0 0 0 4px black;
@@ -111,20 +111,33 @@ header .icon img {
   margin-right: 14px;
   opacity: 0.5;
 }
+header .nav .tab {
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-left: 2px solid hsl(0, 0%, 20%);
+}
 header .nav .tab a {
   font-family: Inter;
   font-weight: bold;
   text-decoration: none;
-  font-size: 19px;
-  padding: 8px;
-  margin: 3px;
-  color: hsl(0, 0%, 50%);
+  text-transform: uppercase;
+  font-size: 14px;
+  color: hsl(0, 0%, 70%);
   white-space: nowrap;
 }
-header .nav .tab.active a {
-  color: black;
-  border-radius: 5px;
-  animation: animation-bg var(--cycle) linear infinite;
+header .nav .tab .title {
+  font-family: Inter;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 14px;
+  color: hsl(0, 0%, 30%);
+}
+header .nav .tab .active a {
+  /* color: black; */
+  /* border-radius: 5px; */
+  animation: animation-color var(--cycle) linear infinite;
   animation-delay: var(--seed);
 }
 header .mininav {
@@ -187,7 +200,7 @@ h1.primary {
 }
 h1.secondary {
   margin-top: 0px;
-  margin-bottom: 15px;
+  margin-bottom: 25px;
   font-size: 24px;
 }
 h1 a {
@@ -871,7 +884,9 @@ table, tr, th, td {
   header {
     width: 480px;
     padding-left: 0px;
+    flex-direction: column;
   }
+  /*
   header .icon img {
     height: 36px;
     margin-right: 14px;
@@ -894,7 +909,7 @@ table, tr, th, td {
   header .mininav {
     display: initial;
     padding-bottom: 2px;
-  }
+  } */
   main .boxes {
     width: 480px;
     /* flex-wrap: wrap; */
@@ -925,9 +940,9 @@ table, tr, th, td {
     height: 36px;
     margin-right: 18px;
   }
-  header .nav .tab a {
+  /* header .nav .tab a {
     margin: 5px;
-  }
+  } */
   main .boxes {
     width: 1446px;
   }