Unified devices title widget

firebase.json

@@ -9,6 +9,11 @@
       "**/node_modules/**"
     ],
     "redirects": [
+      {
+        "source": "/devices",
+        "destination": "/alpakka",
+        "type": 301
+      },
       {
         "source": "/devices/alpakka/manual",
         "destination": "/devices/alpakka/manual/mouse",

src/pug/_mixins.pug

@@ -32,6 +32,7 @@
     db:            '/db/stats',
     contribute:    '/contribute/open_source',
     blog:          '/blog/report_24',
+    devices:       '/alpakka',
     alpakkaManual: '/alpakka/manual/mouse',
   }
 
@@ -48,7 +49,7 @@ mixin nav
       if (name=='devices' && devices.includes(SECTION)) return 'active'
       return ''
     }
-  div.tab(class=active('devices')):    +a('/devices')          Devices
+  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

src/pug/alpakka/_title.pug

@@ -1,8 +1,12 @@
 -
   const active = (bool) => bool ? 'active' : 'inactive'
 
-h1.dynamic
-  a(class=active(PAGE=='alpakka') href='/alpakka') Alpakka
+h1.primary
+  a(class=active(SECTION=='alpakka') href='/alpakka') Alpakka
+  a(class=active(SECTION=='kapybara') href='/kapybara') Kapybara
+
+h1.secondary
+  a.sub(class=active(PAGE=='alpakka') href='/alpakka') Overview
   a.sub(class=active(SECTION_2=='manual') href=redirect.alpakkaManual) Manual
   a.sub(class=active(PAGE=='gallery') href='/alpakka/gallery') Gallery
   a.sub(class=active(PAGE=='components') href='/alpakka/components') Components

src/pug/index.pug

@@ -10,10 +10,10 @@ block page
     div.box
       h2 Open source
       p Input Labs does public research on videogame controllers, and make open source (software) and Creative Commons (hardware) designs available for everyone.
-      p Use the #[+a('/devices') Reference Designs] to build your own controller, or modify them for your special needs, preferences, or competitive requirements.
+      p Use the #[+a('/alpakka') Reference Designs] to build your own controller, or modify them for your special needs, preferences, or competitive requirements.
 
     div.box.image.colored.blend
-      a.img(href='/devices')
+      a.img(href='/alpakka')
         img(src='/static/img/index.jpg' width='100%' style='filter:grayscale(1)')
 
     div.box

src/pug/kapybara.pug

@@ -4,7 +4,7 @@ block title
   | Kapybara controller
 
 block page
-  h1 Kapybara
+  include kapybara/_title.pug
 
   div.boxes.grid
     div.box

src/pug/kapybara/_title.pug

@@ -0,0 +1,12 @@
+-
+  const active = (bool) => bool ? 'active' : 'inactive'
+
+h1.primary
+  a(class=active(SECTION=='alpakka') href='/alpakka') Alpakka
+  a(class=active(SECTION=='kapybara') href='/kapybara') Kapybara
+
+h1.secondary
+  a(class=active(PAGE=='kapybara') href='/kapybara') Overview
+  a.notfound Manual
+  a.notfound Gallery
+  a.notfound Components

src/static/style.css

@@ -164,17 +164,26 @@ h1 {
   margin: 30px 20px;
 }
 h1.dynamic {
+  margin-top: 20px;
   margin-bottom: 25px;
+  font-size: 24px;
+}
+h1.primary {
+  margin-top: 15px;
+  margin-bottom: 10px;
+  font-size: 28px;
+}
+h1.secondary {
+  margin-top: 0px;
+  margin-bottom: 15px;
+  font-size: 24px;
 }
 h1 a {
   color: white;
   text-decoration: none;
   border-radius: 5px;
-  margin: 0 10px;
+  margin: 0 5px;
   padding: 5px;
-}
-h1 a.sub {
-  font-size: 24px;
   margin-top: 8px;
 }
 h1 a.active {
@@ -183,6 +192,12 @@ h1 a.active {
   animation-delay: var(--seed);
   box-shadow: 2px 2px 8px 0px hsla(0, 0%, 0%, 0.1);
 }
+h1 a.notfound {
+  color: hsl(  0, 0%, 30%);
+  cursor: not-allowed;
+  text-decoration: line-through;
+  text-decoration-thickness: 4px;
+}
 
 /* MAIN ==================================================================== */
 main {