5.4.0
Restructure New Journal entries Colour tabs update with wind
This commit is contained in:
fraxle
+118
-17
@@ -118,6 +118,23 @@ header a.active { color: #c8922a; }
|
||||
}
|
||||
.nav-dropdown-menu a.active { color: #c8922a; }
|
||||
|
||||
/* The Account dropdown sits at the far right of the nav row, so a menu
|
||||
centred under it (like About's) would spill past the viewport edge on
|
||||
most screen widths. Right-align it to the toggle instead, growing left,
|
||||
with its labels right-aligned to match the edge it hangs from. */
|
||||
.nav-dropdown--right .nav-dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.nav-dropdown--right.nav-dropdown:hover .nav-dropdown-menu,
|
||||
.nav-dropdown--right.nav-dropdown:focus-within .nav-dropdown-menu {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.nav-dropdown--right .nav-dropdown-menu a {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ── Burger button ──────────────────────────────────────────────────── */
|
||||
.utci-burger {
|
||||
display: none;
|
||||
@@ -148,10 +165,106 @@ header a.active { color: #c8922a; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Site identity — mirrors .nav-logo in css/base.css so the static pages and
|
||||
the forecast app carry the same wordmark, icon and tagline. The header a
|
||||
rules above dress every nav link, so the uppercase/brass treatment and the
|
||||
hover underline are cancelled here. */
|
||||
.nav-logo {
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
header a.nav-logo:hover { border-bottom-color: transparent; }
|
||||
|
||||
.nav-logo-wordmark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.05em;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: inherit;
|
||||
}
|
||||
.nav-logo-sun,
|
||||
.nav-logo-scope {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 250;
|
||||
font-size: 1.6rem;
|
||||
font-style: normal;
|
||||
color: #1e1208;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.nav-logo-icon {
|
||||
width: 1.26rem; /* same 0.79 ratio to the wordmark as the app's */
|
||||
height: 1.26rem;
|
||||
color: #1e1208;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.nav-logo-tag {
|
||||
display: block;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #7a5c2a;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* ── Mobile nav drawer ──────────────────────────────────────────────── */
|
||||
@media (max-width: 640px) {
|
||||
/* Same pinned 72px bar as the app: wordmark centred, links behind the
|
||||
burger. body pads itself to clear the fixed header. */
|
||||
header {
|
||||
padding: 14px 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 20px;
|
||||
height: 72px;
|
||||
background: #f5edd6;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 72px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
pointer-events: none; /* the full-width block must not swallow burger taps */
|
||||
}
|
||||
|
||||
.nav-logo-wordmark,
|
||||
.nav-logo-tag {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-logo-wordmark {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.nav-logo-sun,
|
||||
.nav-logo-scope {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
.nav-logo-icon {
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
}
|
||||
|
||||
.utci-burger {
|
||||
@@ -207,6 +320,9 @@ header a.active { color: #c8922a; }
|
||||
gap: 18px;
|
||||
}
|
||||
.nav-dropdown-menu a { padding: 0; font-size: 14px; }
|
||||
/* Right-aligned text is a desktop-popup touch - on mobile everything is
|
||||
one left-indented list, so match About's list instead of standing out. */
|
||||
.nav-dropdown--right .nav-dropdown-menu a { text-align: left; }
|
||||
|
||||
/* Burger → X animation */
|
||||
header.nav-open .utci-burger span:nth-child(1) {
|
||||
@@ -238,21 +354,6 @@ header a.active { color: #c8922a; }
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-right: auto;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 250;
|
||||
font-size: 1.6rem;
|
||||
color: #1e1208;
|
||||
letter-spacing: -0.01em;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.05em;
|
||||
}
|
||||
.logo-sun, .logo-scope { color: #1e1208; font-weight: 250; font-style: normal; }
|
||||
.logo-icon { width: 0.82em; height: 0.82em; flex-shrink: 0; }
|
||||
|
||||
main {
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
@@ -434,5 +535,5 @@ footer {
|
||||
@media (max-width: 600px) {
|
||||
h1 { font-size: 1.6rem; }
|
||||
main { padding: 2rem 1rem 4rem; }
|
||||
header { padding: 14px 16px; }
|
||||
header { padding: 10px 16px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user