Snap on body (not html) + 100dvh + font -5%
- Move scroll-snap-type to body, html overflow hidden (root-element snap was unreliable across browsers) - 100dvh handles iOS dynamic viewport - scroll-snap-stop: normal (always was too strict, blocked fast scroll) - font-size clamp -5% (17–26.6px) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5c1ab55af0
commit
5770bf29f9
14
index.html
14
index.html
@ -108,12 +108,16 @@
|
|||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
font-size: clamp(18px, 1.6vw, 28px);
|
font-size: clamp(17px, 1.52vw, 26.6px); /* -5% */
|
||||||
scroll-snap-type: y mandatory;
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
body {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
scroll-snap-type: y mandatory;
|
||||||
scroll-padding-top: 0;
|
scroll-padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -122,8 +126,8 @@ html {
|
|||||||
section.section,
|
section.section,
|
||||||
.dark-section {
|
.dark-section {
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
scroll-snap-stop: always;
|
scroll-snap-stop: normal;
|
||||||
min-height: 100vh;
|
min-height: 100dvh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -189,8 +193,6 @@ body {
|
|||||||
font-family: 'Lora', Georgia, serif !important;
|
font-family: 'Lora', Georgia, serif !important;
|
||||||
background: var(--page-bg);
|
background: var(--page-bg);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame { gap: 0; min-height: 100dvh; display: block; }
|
.frame { gap: 0; min-height: 100dvh; display: block; }
|
||||||
|
|||||||
Reference in New Issue
Block a user