diff --git a/src/markdoc/layouts/Category.svelte b/src/markdoc/layouts/Category.svelte index 8ed88a96a7..d169e781d6 100644 --- a/src/markdoc/layouts/Category.svelte +++ b/src/markdoc/layouts/Category.svelte @@ -40,7 +40,7 @@
- + diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte index dab7e2237a..1aa9f9a6d2 100644 --- a/src/markdoc/layouts/Post.svelte +++ b/src/markdoc/layouts/Post.svelte @@ -64,7 +64,7 @@
- + diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index 17a8c1120b..5ac0cc2296 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -31,174 +31,176 @@
-
-
- +
+
- - - - - - - + + - - - - - - - - -
+ + + + + + + + + + + + + +
-
-
-

Blog

- {#if featured} - {@const author = data.authors.find((author) => author.slug === featured.author)} -
- - cover - -
-
-
    -
  • {featured.timeToRead} min
    • -
- -

- {featured.title} -

- -
-

- {featured.description} -

-
-
- -
- +
+

Blog

+ {#if featured} + {@const author = data.authors.find((author) => author.slug === featured.author)} +
-
- {/if} +
+ {/if} +
-
-
-
-
-

Articles

+
+
+
+

Articles

-
-
    - {#each data.posts as post} - {@const author = data.authors.find( - (author) => author.slug === post.author - )} - {#if author} -
    - {/if} - {/each} -
+
+
    + {#each data.posts as post} + {@const author = data.authors.find( + (author) => author.slug === post.author + )} + {#if author} +
    + {/if} + {/each} +
+
-
-
-
- - +
+
+ + +
diff --git a/src/routes/changelog/[[page]]/+page.svelte b/src/routes/changelog/[[page]]/+page.svelte index 4adf46cd0a..6640b8e113 100644 --- a/src/routes/changelog/[[page]]/+page.svelte +++ b/src/routes/changelog/[[page]]/+page.svelte @@ -43,30 +43,36 @@
-
-

Changelog

-
    - {#each data.entries as entry} -
  • -
    - - - -
    • - {/each} -
- - {#if data.nextPage} - - {/if} -
-
-
- - - +
+
+
+
+

Changelog

+
    + {#each data.entries as entry} +
  • +
    + + + +
    • + {/each} +
+ + {#if data.nextPage} + + {/if} +
+
+
+
+
+
+ + + +
+
@@ -74,12 +80,9 @@ diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte index d7622eb300..6c8a6dfe61 100644 --- a/src/routes/docs/+page.svelte +++ b/src/routes/docs/+page.svelte @@ -69,7 +69,7 @@
-
+
diff --git a/src/scss/7-components/_hero.scss b/src/scss/7-components/_hero.scss index 88b50a4088..7a4944f3bd 100644 --- a/src/scss/7-components/_hero.scss +++ b/src/scss/7-components/_hero.scss @@ -29,6 +29,7 @@ >:nth-child(1) { flex:1.3; } >:nth-child(2) { flex:1; } } + @media #{$break1}, #{$break2}, #{$break3} { overflow:hidden; } } &.is-no-max-width { max-inline-size:initial; } diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss index 969de305f9..1dce88d556 100644 --- a/src/scss/7-components/_main-header.scss +++ b/src/scss/7-components/_main-header.scss @@ -63,7 +63,7 @@ --p-main-header-border-color: rgb(0,0,0, 0.1); } - @media #{$break1}{ + @media #{$break1}, #{$break2}{ display:none; } diff --git a/src/scss/7-components/_mobile-header.scss b/src/scss/7-components/_mobile-header.scss index d843377ef2..362a6a570a 100644 --- a/src/scss/7-components/_mobile-header.scss +++ b/src/scss/7-components/_mobile-header.scss @@ -11,7 +11,7 @@ &-start { display:flex; align-items: center; } &-end { display:flex; align-items: center; gap: pxToRem(8) } &.is-transparent { background-color:transparent; -webkit-backdrop-filter:blur(pxToRem(8)); backdrop-filter:blur(pxToRem(8)); } - @media #{$break2open} { display:none; } + @media #{$break3open} { display:none; } #{$theme-dark} &, &#{$theme-dark} { diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss index 55a6155ec3..fd5c1d6f2d 100644 --- a/src/scss/7-components/_side-nav.scss +++ b/src/scss/7-components/_side-nav.scss @@ -19,6 +19,7 @@ position:sticky; z-index:35; inset-block-start:pxToRem(74); inset-block-end:0; block-size:calc(100vh - pxToRem(160)); block-size:calc(100dvh - pxToRem(73)); + background-color:hsl(var(--p-side-nav-bg-color)); .#{$p}-icon-button { transition:var(--transition); margin-block-end:pxToRem(-4); margin-inline-end:pxToRem(6); } @@ -26,7 +27,7 @@ &-wrapper { display:flex; flex-direction:column; block-size:100%; gap:pxToRem(16); padding:pxToRem(16); padding-block-end:pxToRem(32); - background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition); + transition:var(--transition); &-parent { position:sticky; inset-block-start:pxToRem(-16); background-color:hsl(var(--p-body-bg-color)); diff --git a/src/scss/9-grids/_grid-3c-4c-6c.scss b/src/scss/9-grids/_grid-3c-4c-6c.scss index f435996f7b..cf3c45ebf5 100644 --- a/src/scss/9-grids/_grid-3c-4c-6c.scss +++ b/src/scss/9-grids/_grid-3c-4c-6c.scss @@ -2,9 +2,9 @@ .#{$p}-grid-3c-4c-6c { display: grid; - @media #{$break1} { grid-template-columns: repeat(3, 1fr); gap:pxToRem(20); } - @media #{$break2} { grid-template-columns: repeat(4, 1fr); column-gap:pxToRem(20); row-gap:pxToRem(40); } - @media #{$break3open} { grid-template-columns: repeat(6, 1fr); column-gap:pxToRem(20); row-gap:pxToRem(40); } + @media #{$break1} { grid-template-columns: repeat(3, 1fr); gap:pxToRem(40); } + @media #{$break2} { grid-template-columns: repeat(4, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); } + @media #{$break3open} { grid-template-columns: repeat(6, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); } &.is-for-logos { text-align:center; diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss index 5f9b3577fb..0b1795e4b1 100644 --- a/src/scss/_10-utilities.scss +++ b/src/scss/_10-utilities.scss @@ -5,6 +5,12 @@ .#{$p}-u-opacity-64 { opacity:0.64!important; } .#{$p}-u-opacity-90 { opacity:0.9!important; } +.#{$p}-u-overflow-hidden-break1-to-break3 { + @media #{$break1}, #{$break2}, #{$break3} { + overflow:hidden; + } +} + .#{$p}-u-flex-vertical {display:flex!important; flex-direction:column!important; } .#{$p}-u-flex-vertical-mobile { @media #{$break1} { flex-direction:column!important; } } .#{$p}-u-flex-vertical-reverse-mobile { @media #{$break1} { flex-direction:column-reverse!important; } }