diff --git a/firebase.json b/firebase.json index fa70b22..25c00a4 100644 --- a/firebase.json +++ b/firebase.json @@ -9,6 +9,11 @@ "**/node_modules/**" ], "redirects": [ + { + "source": "/devices", + "destination": "/alpakka", + "type": 301 + }, { "source": "/devices/alpakka/manual", "destination": "/devices/alpakka/manual/mouse", diff --git a/src/pug/_mixins.pug b/src/pug/_mixins.pug index 88b7fde..54d6651 100644 --- a/src/pug/_mixins.pug +++ b/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 diff --git a/src/pug/alpakka/_title.pug b/src/pug/alpakka/_title.pug index efa6fc1..2d933c8 100644 --- a/src/pug/alpakka/_title.pug +++ b/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 diff --git a/src/pug/devices.pug b/src/pug/devices.pug deleted file mode 100644 index d9145ce..0000000 --- a/src/pug/devices.pug +++ /dev/null @@ -1,18 +0,0 @@ -extends _template.pug - -block title - | Reference designs - -block page - h1 Reference designs - - div.boxes.grid.center - div.box.image - a.img(href='/alpakka') - img(src='/static/img/alpakka_black_silver_stand.jpg') - div Alpakka: Nextgen gyro - - div.box.image - a.img(href='/kapybara') - img(src='/static/img/kapybara.png') - div Kapybara: One-hand OP diff --git a/src/pug/index.pug b/src/pug/index.pug index 0a3986c..343f74e 100644 --- a/src/pug/index.pug +++ b/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 diff --git a/src/pug/kapybara.pug b/src/pug/kapybara.pug index 0779e4f..2735089 100644 --- a/src/pug/kapybara.pug +++ b/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 diff --git a/src/pug/kapybara/_title.pug b/src/pug/kapybara/_title.pug new file mode 100644 index 0000000..32aef78 --- /dev/null +++ b/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 diff --git a/src/static/style.css b/src/static/style.css index d032c0c..b924790 100644 --- a/src/static/style.css +++ b/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 {