From 9410b5a0d43aacafdeb361c2d999394dd6c8eaa3 Mon Sep 17 00:00:00 2001 From: Marcos Diaz Date: Thu, 27 Nov 2025 00:22:51 +0200 Subject: [PATCH 1/2] Rework of the header navigation --- src/pug/_device_selector.pug | 9 +++-- src/pug/_header.pug | 64 ++++++++++++++++++++++++++++++ src/pug/_mixins.pug | 14 ------- src/pug/_template.pug | 36 +---------------- src/pug/contribute/open_source.pug | 7 ++-- src/static/style.css | 49 +++++++++++++++-------- 6 files changed, 106 insertions(+), 73 deletions(-) create mode 100644 src/pug/_header.pug diff --git a/src/pug/_device_selector.pug b/src/pug/_device_selector.pug index 83155eb..18c1af4 100644 --- a/src/pug/_device_selector.pug +++ b/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 diff --git a/src/pug/_header.pug b/src/pug/_header.pug new file mode 100644 index 0000000..3bd4010 --- /dev/null +++ b/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 diff --git a/src/pug/_mixins.pug b/src/pug/_mixins.pug index 4731e6d..4672e6c 100644 --- a/src/pug/_mixins.pug +++ b/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' : '') diff --git a/src/pug/_template.pug b/src/pug/_template.pug index cc9e262..f6e5c23 100644 --- a/src/pug/_template.pug +++ b/src/pug/_template.pug @@ -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 diff --git a/src/pug/contribute/open_source.pug b/src/pug/contribute/open_source.pug index 21135f1..b8d025f 100644 --- a/src/pug/contribute/open_source.pug +++ b/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. diff --git a/src/static/style.css b/src/static/style.css index a7a2e92..5f7501a 100644 --- a/src/static/style.css +++ b/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; } From cbf7e52f551d2019a13a4033a6953604f8c1a607 Mon Sep 17 00:00:00 2001 From: Marcos Diaz Date: Thu, 27 Nov 2025 00:29:08 +0200 Subject: [PATCH 2/2] Force css version bump --- src/pug/_template.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pug/_template.pug b/src/pug/_template.pug index f6e5c23..5052c9f 100644 --- a/src/pug/_template.pug +++ b/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'