omgitsalexl/noel-design-atelier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated mobile layout

Browse Source
This commit is contained in:
omgitsalexl
2026-09-23 15:45:04 -07:00
parent b27704a636
commit f2430f36fe
2 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -15,7 +15,7 @@
href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
rel="stylesheet" rel="stylesheet"
> >
<link rel="stylesheet" href="styles.css?version=form-refinement"> <link rel="stylesheet" href="styles.css?version=mobile-layout-repair">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
styles.css
+34 -4
View File
@@ -27,7 +27,7 @@ html {
body { body {
margin: 0; margin: 0;
min-width: 20rem; min-width: 0;
overflow-x: hidden; overflow-x: hidden;
background: var(--color-weathered-paper); background: var(--color-weathered-paper);
color: var(--color-noel-black); color: var(--color-noel-black);
@@ -969,7 +969,8 @@ ul {
.heading-display { .heading-display {
margin-top: 3.25rem; margin-top: 3.25rem;
font-size: clamp(3.7rem, 16vw, 7.1rem); /* Size complete lines against the space inside the page gutters. */
font-size: min(7.1rem, calc((100vw - 2 * var(--site-horizontal-padding)) * 0.145));
line-height: 0.92; line-height: 0.92;
} }
@@ -1133,10 +1134,12 @@ ul {
.underline-reveal-link { .underline-reveal-link {
font-size: 0.7rem; font-size: 0.7rem;
min-height: 2.75rem;
display: inline-flex;
align-items: center;
} }
.heading-display { .heading-display {
font-size: clamp(3.05rem, 15.25vw, 4.8rem);
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@@ -1144,6 +1147,33 @@ ul {
font-size: 0.83em; font-size: 0.83em;
} }
.grid-overlapping-trailing-image,
.grid-leading-image,
.grid-wide-inset-image,
.grid-tall-trailing-image,
.grid-small-inset-image {
margin-inline: auto;
}
.grid-leading-image {
/* Leave room above the frame throughout its parallax travel. */
margin-top: 3.5rem;
}
.arrow-link,
.link-stack a {
min-height: 2.75rem;
align-items: center;
}
.link-stack a {
display: inline-flex;
}
.target-notice {
overflow-wrap: anywhere;
}
.heading-statement { .heading-statement {
font-size: clamp(2.15rem, 10.5vw, 3.3rem); font-size: clamp(2.15rem, 10.5vw, 3.3rem);
letter-spacing: 0.025em; letter-spacing: 0.025em;
@@ -1166,7 +1196,7 @@ ul {
} }
.heading-large { .heading-large {
font-size: clamp(2.75rem, 13vw, 4.1rem); font-size: min(4.1rem, 13vw);
letter-spacing: 0.025em; letter-spacing: 0.025em;
} }