commit ca8840c8bb21799cc2c2ff0acc74161f57a2f1c5
parent 7e42bdf4c273decc153ae3cf518c2fbda547f823
Author: Joris Hartog <jorishartog@hotmail.com>
Date: Tue, 8 Sep 2026 15:02:53 +0200
Refine landing page flow and spacing
Diffstat:
| M | www/index.html | | | 113 | ++++++++++++++----------------------------------------------------------------- |
1 file changed, 19 insertions(+), 94 deletions(-)
diff --git a/www/index.html b/www/index.html
@@ -71,7 +71,7 @@
--cyan: #8de9cd;
--blue: #8bdcff;
--amber: #ffd070;
- --section-space: clamp(60px, 7vw, 84px);
+ --section-space: clamp(88px, 10vw, 132px);
--radius: 12px;
--radius-large: 16px;
}
@@ -126,33 +126,6 @@
align-items: center;
min-height: 64px;
}
- .scroll-progress {
- position: fixed;
- z-index: 110;
- right: 0;
- bottom: 0;
- left: 0;
- height: 3px;
- overflow: hidden;
- pointer-events: none;
- }
- .scroll-progress::after {
- content: "";
- display: block;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, var(--green), var(--cyan));
- box-shadow: 0 0 14px rgba(213, 245, 95, .45);
- transform: scaleX(0);
- transform-origin: left center;
- }
- @keyframes reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
- @supports (animation-timeline: scroll()) {
- .scroll-progress::after {
- animation: reading-progress linear both;
- animation-timeline: scroll(root block);
- }
- }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 900; }
.mark {
width: 32px;
@@ -168,10 +141,7 @@
.hero {
position: relative;
isolation: isolate;
- min-height: calc(100svh - 64px);
- display: grid;
- align-items: center;
- padding: clamp(84px, 12vh, 140px) 0;
+ padding: clamp(88px, 11vw, 136px) 0 clamp(96px, 12vw, 148px);
overflow: hidden;
}
.hero::before {
@@ -206,34 +176,6 @@
gap: clamp(36px, 5vw, 72px);
align-items: center;
}
- .scroll-cue {
- position: absolute;
- bottom: clamp(48px, 7vh, 76px);
- left: 50%;
- display: inline-flex;
- gap: 10px;
- align-items: center;
- border: 1px solid rgba(213, 245, 95, .2);
- border-radius: 999px;
- padding: 9px 13px;
- background: rgba(13, 15, 16, .62);
- color: var(--muted);
- font-size: 11px;
- font-weight: 850;
- letter-spacing: .08em;
- text-decoration: none;
- text-transform: uppercase;
- transform: translateX(-50%);
- backdrop-filter: blur(10px);
- transition: border-color .18s ease, color .18s ease, background-color .18s ease;
- }
- .scroll-cue:hover { border-color: rgba(213, 245, 95, .55); background: rgba(21, 25, 27, .9); color: var(--text); }
- .scroll-cue span:last-child {
- color: var(--green);
- font-size: 16px;
- animation: scroll-nudge 1.8s ease-in-out infinite;
- }
- @keyframes scroll-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.hero-grid > * { min-width: 0; }
.eyebrow {
display: inline-flex;
@@ -358,16 +300,10 @@
}
.repo-link:hover { color: var(--green); }
section {
- min-height: calc(100svh - 64px);
- display: grid;
- align-items: center;
border-top: 1px solid rgba(39, 48, 54, .82);
- padding: clamp(92px, 12vh, 148px) 0;
- }
- main section { position: relative; isolation: isolate; overflow: hidden; }
- main section:nth-child(even) {
- background: linear-gradient(180deg, rgba(21, 25, 27, .36), rgba(16, 19, 21, .16));
+ padding: var(--section-space) 0;
}
+ main section { position: relative; }
.section-head {
position: relative;
display: grid;
@@ -375,7 +311,7 @@
column-gap: clamp(28px, 5vw, 72px);
row-gap: 10px;
align-items: start;
- margin-bottom: clamp(44px, 6vw, 72px);
+ margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head .section-meta { grid-column: 1; grid-row: 1 / span 2; }
.section-head h2, .section-head p { grid-column: 2; }
@@ -519,9 +455,7 @@
margin: 0 auto;
border: 1px solid rgba(141, 233, 205, .2);
border-radius: var(--radius-large);
- padding: clamp(38px, 5vw, 60px);
- padding-top: clamp(48px, 6vw, 72px);
- padding-bottom: clamp(30px, 3.5vw, 40px);
+ padding: clamp(34px, 5vw, 54px);
background: linear-gradient(135deg, rgba(141, 233, 205, .055), rgba(21, 25, 27, .9) 62%);
text-align: center;
}
@@ -551,15 +485,14 @@
padding: 0 13px;
box-shadow: 0 8px 22px rgba(88, 101, 242, .12), inset 0 1px 0 rgba(255, 255, 255, .07);
}
- #community { padding: 0; }
- .community-content {
- width: 100%;
- min-height: calc(100svh - 64px);
- display: grid;
- grid-template-rows: 1fr auto;
- align-items: center;
+ #roadmap { padding-bottom: clamp(64px, 7vw, 92px); }
+ #community {
+ border-top: 0;
+ padding: 0;
}
+ .community-content { width: 100%; }
.footer {
+ margin-top: var(--section-space);
border-top: 1px solid var(--line);
padding: 26px 0;
background: rgba(9, 11, 12, .48);
@@ -573,12 +506,11 @@
flex-wrap: wrap;
}
@media (max-width: 820px) {
- .hero { min-height: auto; padding: 76px 0 84px; }
- .scroll-cue { display: none; }
- section { min-height: auto; padding: 80px 0; }
- #community { padding-top: 80px; }
- .community-content { min-height: 0; display: block; }
- .footer { margin-top: 48px; }
+ .hero { padding: 76px 0 92px; }
+ section { padding: 82px 0; }
+ #roadmap { padding-bottom: 60px; }
+ #community { padding: 0; }
+ .footer { margin-top: 68px; }
.hero-grid, .grid { grid-template-columns: 1fr; }
.section-head { grid-template-columns: 1fr; row-gap: 8px; }
.section-head .section-meta, .section-head h2, .section-head p { grid-column: 1; grid-row: auto; }
@@ -600,8 +532,6 @@
.community-panel .button { width: 100%; }
}
@media (min-width: 821px) {
- html { scroll-snap-type: y proximity; }
- .hero, main > section { scroll-snap-align: start; scroll-snap-stop: always; }
.section-icon {
position: absolute;
top: -22px;
@@ -615,10 +545,8 @@
.candidate-callout { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
- html { scroll-behavior: auto; scroll-snap-type: none; }
- .scroll-progress { display: none; }
- .scroll-cue span:last-child { animation: none; }
- .button, .scroll-cue { transition: none; }
+ html { scroll-behavior: auto; }
+ .button { transition: none; }
.button:hover { transform: none; }
}
</style>
@@ -644,8 +572,6 @@
</nav>
</div>
</div>
- <div class="scroll-progress" aria-hidden="true"></div>
-
<header class="hero">
<div class="wrap hero-grid">
<div>
@@ -669,7 +595,6 @@
</div>
</aside>
</div>
- <a class="scroll-cue" href="#why"><span>Scroll to explore</span><span aria-hidden="true">↓</span></a>
</header>
<main>