From 47daa141e00a972458e1f974b6a39c253983daa1 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 25 Dec 2023 08:09:51 +0700 Subject: [PATCH 1/5] Style fixes for several visual issues - Blog page - tablet look without padding, wrong structure of containers - Horizontal scroll on iPad iOS - Added tweeks to solve these floating Bg's issues - Logo grid alignment, make it bigger on columns spaces --- src/markdoc/layouts/Category.svelte | 2 +- src/markdoc/layouts/Post.svelte | 2 +- src/routes/blog/+page.svelte | 314 ++++++++++++++------------- src/routes/docs/+page.svelte | 2 +- src/scss/7-components/_hero.scss | 1 + src/scss/9-grids/_grid-3c-4c-6c.scss | 6 +- src/scss/_10-utilities.scss | 6 + 7 files changed, 171 insertions(+), 162 deletions(-) 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/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/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; } } From e03b61940f5a79b439d47c02c97cc0ba438f99d5 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 25 Dec 2023 18:25:55 +0700 Subject: [PATCH 2/5] Changelog - update layout --- src/routes/changelog/[[page]]/+page.svelte | 59 ++++++++++++---------- 1 file changed, 31 insertions(+), 28 deletions(-) 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 @@