daveadmin/dobetternorge-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lightweight header/footer — IBM Plex Sans, slimmed nav badge, compact footer

Browse Source 
Drops Roboto + IBM Plex Mono from Google Fonts, replaces with IBM Plex
Sans (matching dobetternorge.no). Nav badge loses bordered pill, becomes
plain uppercase label with slash separator. Footer cut from 3-column
text-wall (~300 words) to compact 2-column layout (~50 words) — logo +
tagline + privacy note on left, 5 links in 2 columns on right.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
davegilligan
2026-05-18 07:10:46 +02:00
parent f0b7d343a3
commit f2fbb69e0a
4 changed files with 109 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/tools.css
+85 -79
View File
@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Roboto:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
:root {
--bg: #f7f8fb;
@@ -4440,7 +4440,7 @@ body {
body.lt-landing {
background: #fff;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ── Sticky nav ─────────────────────────────────────────────────────────── */
@@ -4472,16 +4472,23 @@ body.lt-landing {
display: block;
}
.lt-nav__brand::after {
content: '/';
color: rgba(255,255,255,0.22);
font-size: 1rem;
font-weight: 300;
margin: 0 4px;
line-height: 1;
}
.lt-nav__badge {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.07em;
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(244,197,66,0.85);
border: 1px solid rgba(244,197,66,0.28);
border-radius: 6px;
padding: 3px 9px;
color: rgba(244,197,66,0.55);
padding: 0;
}
.lt-nav__right {
@@ -4555,7 +4562,7 @@ body.lt-landing {
}
.lt-hero__kicker {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.12em;
@@ -4618,7 +4625,7 @@ body.lt-landing {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.80rem;
font-weight: 700;
letter-spacing: 0.06em;
@@ -4640,7 +4647,7 @@ body.lt-landing {
margin: 0 auto 3rem;
}
.lt-tools__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.11em;
@@ -4710,7 +4717,7 @@ body.lt-landing {
flex-direction: column;
}
.lt-card__badge {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.09em;
@@ -4738,7 +4745,7 @@ body.lt-landing {
align-items: center;
gap: 5px;
margin-top: 1rem;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
@@ -4817,7 +4824,7 @@ body.lt-landing {
text-align: center;
}
.lt-access__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.11em;
@@ -4924,88 +4931,87 @@ body.lt-landing {
.lt-footer {
background: var(--lt-navy);
border-top: 1px solid rgba(255,255,255,0.07);
padding: clamp(2.5rem, 5vw, 4rem) clamp(16px, 4vw, 60px) 1.5rem;
color: rgba(255,255,255,0.62);
font-family: 'Roboto', -apple-system, sans-serif;
padding: clamp(2rem, 4vw, 3rem) clamp(16px, 4vw, 60px) 1.5rem;
color: rgba(255,255,255,0.55);
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
}
.lt-footer__grid {
max-width: 1280px;
.lt-footer__inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.4fr 0.8fr;
gap: 3rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 1.5rem;
grid-template-columns: 1fr auto;
gap: 4rem;
align-items: start;
padding-bottom: 1.75rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
margin-bottom: 1.25rem;
}
.lt-footer__logo {
height: 32px;
height: 28px;
width: auto;
opacity: 0.85;
opacity: 0.82;
display: block;
margin-bottom: 1.1rem;
margin-bottom: 1rem;
}
.lt-footer__heading {
font-family: 'Crimson Pro', serif;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.7rem;
.lt-footer__tagline {
font-size: 0.87rem;
line-height: 1.65;
margin: 0 0 0.55rem;
max-width: 42ch;
color: rgba(255,255,255,0.58);
}
.lt-footer__body {
font-size: 0.84rem;
line-height: 1.74;
margin: 0;
}
.lt-footer__body a {
color: rgba(244,197,66,0.75);
text-decoration: none;
}
.lt-footer__body a:hover { color: var(--lt-gold); }
.lt-footer__sub {
.lt-footer__tagline a { color: rgba(244,197,66,0.72); text-decoration: none; }
.lt-footer__tagline a:hover { color: var(--lt-gold); }
.lt-footer__privacy-note {
font-size: 0.78rem;
color: rgba(255,255,255,0.35);
margin: 0.75rem 0 0;
line-height: 1.60;
line-height: 1.6;
color: rgba(255,255,255,0.3);
max-width: 42ch;
margin: 0;
}
.lt-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 2.5rem;
align-items: flex-start;
padding-top: 0.2rem;
}
.lt-footer__link-col {
display: flex;
flex-direction: column;
gap: 9px;
gap: 10px;
}
.lt-footer__links a {
color: rgba(255,255,255,0.56);
.lt-footer__link-col a {
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 0.87rem;
transition: color 140ms;
font-size: 0.84rem;
transition: color 130ms;
white-space: nowrap;
}
.lt-footer__links a:hover { color: var(--lt-gold); }
.lt-footer__link-col a:hover { color: var(--lt-gold); }
.lt-footer__bottom {
max-width: 1280px;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
gap: 10px;
justify-content: space-between;
align-items: flex-start;
}
.lt-footer__copy {
font-size: 0.80rem;
color: rgba(255,255,255,0.32);
font-size: 0.77rem;
color: rgba(255,255,255,0.26);
margin: 0;
}
.lt-footer__disclaimer {
font-size: 0.76rem;
color: rgba(255,255,255,0.24);
line-height: 1.62;
max-width: 62ch;
font-size: 0.74rem;
color: rgba(255,255,255,0.2);
line-height: 1.55;
max-width: 56ch;
margin: 0;
}
@media (max-width: 820px) {
.lt-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
@media (max-width: 620px) {
.lt-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
.lt-footer__links { flex-direction: column; gap: 1.25rem; }
.lt-footer__bottom { flex-direction: column; }
}
@@ -5049,7 +5055,7 @@ body.lt-landing {
}
.lt-preview-back {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.72rem;
color: rgba(255,255,255,0.48);
text-decoration: none;
@@ -5060,7 +5066,7 @@ body.lt-landing {
.lt-preview-back:hover { color: rgba(255,255,255,0.82); }
.lt-preview-badge {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
@@ -5149,7 +5155,7 @@ body.lt-landing {
align-items: start;
}
.lt-preview-sample__label {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
@@ -5190,7 +5196,7 @@ body.lt-landing {
}
.lt-preview-output pre {
margin: 0;
font-family: 'IBM Plex Mono', 'Courier New', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.80rem;
line-height: 1.78;
color: rgba(255,255,255,0.85);
@@ -5219,7 +5225,7 @@ body.lt-landing {
position: relative;
}
.lt-preview-cta__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
letter-spacing: 0.1em;
text-transform: uppercase;
@@ -5245,7 +5251,7 @@ body.lt-landing {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'Roboto', sans-serif;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
font-size: 1.0rem;
letter-spacing: 0.02em;
@@ -5279,7 +5285,7 @@ body.lt-landing {
padding-top: 2rem;
}
.lt-preview-cta__tools-label {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -5293,7 +5299,7 @@ body.lt-landing {
gap: 0.5rem 0.75rem;
}
.lt-preview-cta__tool-link {
font-family: 'Roboto', sans-serif;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: rgba(255,255,255,0.48);
@@ -5331,7 +5337,7 @@ body.lt-landing {
gap: 12px;
}
.lt-auth-nav__email {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
max-width: 200px;
@@ -5371,7 +5377,7 @@ body.lt-landing {
flex-shrink: 0;
}
.lt-hero__auth-label {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.75rem;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
@@ -5444,7 +5450,7 @@ body.lt-landing {
background: linear-gradient(145deg, #00205b 0%, #001540 100%);
}
.lt-gate__card-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;