feat: add container query for navbar
This commit is contained in:
parent
a3b23ded75
commit
28da427b27
3 changed files with 16 additions and 0 deletions
|
@ -49,3 +49,17 @@
|
||||||
--shadow-color: var(--color-primary-faded);
|
--shadow-color: var(--color-primary-faded);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@container (max-width: 32em) {
|
||||||
|
.site-logo .wordmark {
|
||||||
|
/* Visually hide wordmark on smaller screens */
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
backdrop-filter: blur(3px);
|
backdrop-filter: blur(3px);
|
||||||
background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
|
background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
|
||||||
background-image: linear-gradient(var(--color-bg) 20%, transparent);
|
background-image: linear-gradient(var(--color-bg) 20%, transparent);
|
||||||
|
container: navbar / inline-size;
|
||||||
padding-block: 1.5rem;
|
padding-block: 1.5rem;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -17,6 +17,7 @@ body {
|
||||||
font-weight: var(--font-weight-body-regular);
|
font-weight: var(--font-weight-body-regular);
|
||||||
letter-spacing: -0.03rem;
|
letter-spacing: -0.03rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue