style(site): truly centred navbar, smoother logo docking, grain on logos and buttons, slashed title underlines
This commit is contained in:
andre committed
1 parent
f72292fc02
commit
04df7f8997
3 files changed
+53
-17
No files matched your search
+51
-15
@@ -543,7 +543,7 @@ section[id] {
|
||||
.gym-switch-btn--logo::after,
|
||||
.gym-switch-btn--logo:is(:hover, :focus-visible)::after { display: none; }
|
||||
/* Thin dark outline, not a white halo: a white glow washed out the lime FitMe 3070 logo. */
|
||||
.gym-switch-btn--logo .gym-switch-logo { filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
|
||||
.gym-switch-btn--logo .gym-switch-logo { filter: url(#pt-noise) drop-shadow(0 0 .6px rgba(0, 0, 0, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
|
||||
|
||||
/* ── Sticky Navbar ─────────────────────────────────────────────────────────── */
|
||||
.navbar-toggler {
|
||||
@@ -593,24 +593,53 @@ section[id] {
|
||||
to { background-position: 150% 0; }
|
||||
}
|
||||
|
||||
/* Brand logo: 150px in the bar. On the home page (.has-center-logo) it starts
|
||||
bigger on its own centred row (.is-top) and docks back on scroll (navbar.php). */
|
||||
/* Bar layout. Desktop: the links are centred on the full bar width, the logo
|
||||
sits out of flow at the left and the other-gym buttons out of flow at the
|
||||
right, vertically centred on the whole header. On the home page
|
||||
(.has-center-logo) the header starts taller with the logo bigger and centred
|
||||
(.is-top); on scroll everything glides back (navbar.php toggles .is-top). */
|
||||
.header-section .navbar { padding: 0 0 0 1rem; }
|
||||
.navbar-brand img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
transition: width .35s ease;
|
||||
transition: width .5s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.header-section.is-top .navbar { flex-wrap: wrap; }
|
||||
.header-section.is-top .navbar-brand {
|
||||
flex: 0 0 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.header-section .navbar {
|
||||
padding: 0;
|
||||
transition: padding-top .5s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.header-section .navbar-brand {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
margin: 0;
|
||||
padding: 14px 1rem 0 0; /* 1rem offsets the nav's left padding: true centre */
|
||||
transform: translate(0, -50%);
|
||||
transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.header-section .navbar-collapse {
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
}
|
||||
.header-section .gym-switch {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 0 !important;
|
||||
}
|
||||
.header-section.is-top .navbar { padding-top: 96px; } /* room for the 240px logo */
|
||||
.header-section.is-top .navbar-brand {
|
||||
left: 50%;
|
||||
top: 14px;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.header-section.is-top .navbar-brand img { width: 240px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.header-section .navbar, .header-section .navbar-brand, .navbar-brand img { transition: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.header-section::before, .header-section::after { animation: none; }
|
||||
@@ -2542,9 +2571,9 @@ h3.contact-title {
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 64px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
height: 4px;
|
||||
background: var(--fitme-accent);
|
||||
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); /* slashed ends, as .nav-link:after */
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
@@ -3364,7 +3393,7 @@ h3.contact-title {
|
||||
font-size: .92rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
color: var(--fitme-dark);
|
||||
color: var(--fitme-on-accent); /* white on the red gym, dark on lime */
|
||||
background: var(--ev-accent);
|
||||
}
|
||||
.hero-event-go i { transition: transform var(--fitme-transition); }
|
||||
@@ -4777,9 +4806,16 @@ a:where(:not(.site-btn, .gym-switch-btn, .gal-link, .skip-link, .splide__arrow,
|
||||
}
|
||||
.site-btn,
|
||||
.gym-switch-btn,
|
||||
.crossfit-nav-link {
|
||||
.crossfit-nav-link,
|
||||
.hero-event-go,
|
||||
.cta-btn,
|
||||
.btn-primary {
|
||||
background-image: var(--noise) !important;
|
||||
background-size: 155px 155px !important;
|
||||
background-blend-mode: overlay !important;
|
||||
}
|
||||
h1, h2 { filter: url(#pt-noise); }
|
||||
/* Logos get the same grain as the headings (the logo gym buttons add their
|
||||
drop-shadow after it, see .gym-switch-btn--logo). */
|
||||
h1, h2,
|
||||
.navbar-brand img,
|
||||
.gym-switch-logo { filter: url(#pt-noise); }
|
||||
@@ -14,7 +14,7 @@ $logo_dims = svg_img_dims_attr(dirname(__DIR__, 2) . '/' . $logo_rel);
|
||||
$center_logo = !empty($nav_center_logo);
|
||||
?>
|
||||
<header class="header-section lazy<?= $center_logo ? ' has-center-logo is-top' : '' ?>">
|
||||
<nav class="navbar navbar-expand-lg navbar-light" style="padding-left:1rem; padding-top: 0; padding-bottom: 0;padding-right: 0; ">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<a class="navbar-brand" href="<?= htmlspecialchars(gym_url(current_gym())) ?>">
|
||||
<?php if (img_fallback_rel($logo_rel) !== ''): ?>
|
||||
<?= img_tag($logo_rel, ['loading' => 'eager', 'decoding' => 'async', 'alt' => 'Logo ' . (current_gym()['name'] ?? 'FitMe 3070')]) ?>
|
||||
|
||||
Reference in new issue
Block a user