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 @@ <div class="aw-big-padding-section-level-1"> <div class="aw-big-padding-section-level-2"> <div class="aw-container"> - <a class="aw-link aw-u-color-text-secondary" href="/blog"> + <a class="aw-link aw-u-color-text-secondary u-cross-baseline" href="/blog"> <span class="aw-icon-chevron-left" aria-hidden="true" /> <span>Back to blog</span> </a> 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 @@ <div class="aw-container" style="--container-size:42.5rem"> <article class="aw-main-article"> <header class="aw-main-article-header"> - <a class="aw-link aw-u-color-text-secondary" href="/blog"> + <a class="aw-link aw-u-color-text-secondary u-cross-baseline" href="/blog"> <span class="aw-icon-chevron-left" aria-hidden="true" /> <span>Back to blog</span> </a> 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 @@ </svelte:head> <Main> - <div class="aw-big-padding-section-level-1 u-position-relative"> - <div - class="u-position-absolute" - style="pointer-events:none;inset-inline-start:0; inset-block-end:0;" - > - <svg - xmlns="http://www.w3.org/2000/svg" - width="660" - height="497" - viewBox="0 0 660 497" - fill="none" + <div class="aw-big-padding-section"> + <div class="aw-big-padding-section-level-1 u-position-relative"> + <div + class="u-position-absolute" + style="pointer-events:none;inset-inline-start:0; inset-block-end:0;" > - <g opacity="0.4" filter="url(#filter0_f_2092_11792)"> - <ellipse - cx="-2.5" - cy="609.5" - rx="362.5" - ry="309.5" - fill="url(#paint0_radial_2092_11792)" - /> - </g> - <defs> - <filter - id="filter0_f_2092_11792" - x="-665" - y="0" - width="1325" - height="1219" - filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" - > - <feFlood flood-opacity="0" result="BackgroundImageFix" /> - <feBlend - mode="normal" - in="SourceGraphic" - in2="BackgroundImageFix" - result="shape" + <svg + xmlns="http://www.w3.org/2000/svg" + width="660" + height="497" + viewBox="0 0 660 497" + fill="none" + > + <g opacity="0.4" filter="url(#filter0_f_2092_11792)"> + <ellipse + cx="-2.5" + cy="609.5" + rx="362.5" + ry="309.5" + fill="url(#paint0_radial_2092_11792)" /> - <feGaussianBlur - stdDeviation="150" - result="effect1_foregroundBlur_2092_11792" - /> - </filter> - <radialGradient - id="paint0_radial_2092_11792" - cx="0" - cy="0" - r="1" - gradientUnits="userSpaceOnUse" - gradientTransform="translate(-2.5 629.739) rotate(90) scale(289.261 362.5)" - > - <stop offset="0.281696" stop-color="#FE9567" /> - <stop offset="0.59375" stop-color="#FD366E" /> - </radialGradient> - </defs> - </svg> - </div> + </g> + <defs> + <filter + id="filter0_f_2092_11792" + x="-665" + y="0" + width="1325" + height="1219" + filterUnits="userSpaceOnUse" + color-interpolation-filters="sRGB" + > + <feFlood flood-opacity="0" result="BackgroundImageFix" /> + <feBlend + mode="normal" + in="SourceGraphic" + in2="BackgroundImageFix" + result="shape" + /> + <feGaussianBlur + stdDeviation="150" + result="effect1_foregroundBlur_2092_11792" + /> + </filter> + <radialGradient + id="paint0_radial_2092_11792" + cx="0" + cy="0" + r="1" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(-2.5 629.739) rotate(90) scale(289.261 362.5)" + > + <stop offset="0.281696" stop-color="#FE9567" /> + <stop offset="0.59375" stop-color="#FD366E" /> + </radialGradient> + </defs> + </svg> + </div> - <div class="aw-big-padding-section-level-2 u-position-relative"> - <div class="aw-container"> - <h1 class="aw-display aw-u-color-text-primary">Blog</h1> - {#if featured} - {@const author = data.authors.find((author) => author.slug === featured.author)} - <article class="aw-feature-article u-margin-block-start-48"> - <a href={featured.href} class="aw-feature-article-image"> - <img src={featured.cover} class="aw-image-ratio-4/3" alt="cover" /> - </a> - <div class="aw-feature-article-content"> - <header class="aw-feature-article-header"> - <ul class="aw-metadata aw-caption-400 aw-is-only-mobile"> - <li>{featured.timeToRead} min</li> - </ul> - <a href={featured.href}> - <h2 class="aw-title aw-u-color-text-primary"> - {featured.title} - </h2> - </a> - </header> - <p class="aw-sub-body-400"> - {featured.description} - </p> - <div class="aw-author"> - <div class="u-flex u-cross-center u-gap-8"> - <img - class="aw-author-image" - src={author?.avatar} - width="24" - height="24" - alt="" - /> - <div class="aw-author-info"> - <a href={author?.href} class="aw-sub-body-400 aw-link" + <div class="aw-big-padding-section-level-2 u-position-relative"> + <div class="aw-container"> + <h1 class="aw-display aw-u-color-text-primary">Blog</h1> + {#if featured} + {@const author = data.authors.find((author) => author.slug === featured.author)} + <article class="aw-feature-article u-margin-block-start-48"> + <a href={featured.href} class="aw-feature-article-image"> + <img src={featured.cover} class="aw-image-ratio-4/3" alt="cover" /> + </a> + <div class="aw-feature-article-content"> + <header class="aw-feature-article-header"> + <ul class="aw-metadata aw-caption-400 aw-is-only-mobile"> + <li>{featured.timeToRead} min</li> + </ul> + <a href={featured.href}> + <h2 class="aw-title aw-u-color-text-primary"> + {featured.title} + </h2> + </a> + </header> + <p class="aw-sub-body-400"> + {featured.description} + </p> + <div class="aw-author"> + <div class="u-flex u-cross-center u-gap-8"> + <img + class="aw-author-image" + src={author?.avatar} + width="24" + height="24" + alt="" + /> + <div class="aw-author-info"> + <a href={author?.href} class="aw-sub-body-400 aw-link" >{author?.name}</a - > - <p class="aw-caption-400 u-hide">{author?.bio}</p> - <ul class="aw-metadata aw-caption-400 aw-is-not-mobile"> - <li>{featured.timeToRead} min</li> - </ul> + > + <p class="aw-caption-400 u-hide">{author?.bio}</p> + <ul class="aw-metadata aw-caption-400 aw-is-not-mobile"> + <li>{featured.timeToRead} min</li> + </ul> + </div> </div> + <ul class="u-flex u-gap-8 u-margin-inline-start-auto u-hide"> + <li> + <a + href="https://twitter.com/appwrite" + class="aw-icon-button" + aria-label="Author twitter" + target="_blank" + rel="noopener noreferrer" + > + <span class="aw-icon-x" aria-hidden="true" /> + </a> + </li> + <li> + <a + href="https://twitter.com/appwrite" + class="aw-icon-button" + aria-label="Author LinkedIn" + target="_blank" + rel="noopener noreferrer" + > + <span class="aw-icon-linkedin" aria-hidden="true" /> + </a> + </li> + </ul> </div> - <ul class="u-flex u-gap-8 u-margin-inline-start-auto u-hide"> - <li> - <a - href="https://twitter.com/appwrite" - class="aw-icon-button" - aria-label="Author twitter" - target="_blank" - rel="noopener noreferrer" - > - <span class="aw-icon-x" aria-hidden="true" /> - </a> - </li> - <li> - <a - href="https://twitter.com/appwrite" - class="aw-icon-button" - aria-label="Author LinkedIn" - target="_blank" - rel="noopener noreferrer" - > - <span class="aw-icon-linkedin" aria-hidden="true" /> - </a> - </li> - </ul> + <a + href={featured.href} + class="aw-button is-secondary u-margin-block-start-auto" + > + <span>Read article</span> + </a> </div> - <a - href={featured.href} - class="aw-button is-secondary u-margin-block-start-auto" - > - <span>Read article</span> - </a> - </div> - </article> - {/if} + </article> + {/if} + </div> </div> </div> - </div> - <div class="aw-big-padding-section-level-1"> - <div class="aw-big-padding-section-level-2"> - <div class="aw-container"> - <h2 class="aw-title aw-u-color-text-primary">Articles</h2> + <div class="aw-big-padding-section-level-1"> + <div class="aw-big-padding-section-level-2"> + <div class="aw-container"> + <h2 class="aw-title aw-u-color-text-primary">Articles</h2> - <div class="u-margin-block-start-48"> - <ul class="aw-grid-articles"> - {#each data.posts as post} - {@const author = data.authors.find( - (author) => author.slug === post.author - )} - {#if author} - <Article - title={post.title} - href={post.href} - cover={post.cover} - date={post.date} - timeToRead={post.timeToRead} - avatar={author.avatar} - author={author.name} - /> - {/if} - {/each} - </ul> + <div class="u-margin-block-start-48"> + <ul class="aw-grid-articles"> + {#each data.posts as post} + {@const author = data.authors.find( + (author) => author.slug === post.author + )} + {#if author} + <Article + title={post.title} + href={post.href} + cover={post.cover} + date={post.date} + timeToRead={post.timeToRead} + avatar={author.avatar} + author={author.name} + /> + {/if} + {/each} + </ul> + </div> </div> </div> - </div> - <div class="aw-big-padding-section-level-2"> - <div class="aw-container"> - <FooterNav /> - <MainFooter /> + <div class="aw-big-padding-section-level-2"> + <div class="aw-container"> + <FooterNav /> + <MainFooter /> + </div> </div> </div> </div> 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 @@ <enhanced:img src="./blur-1.png" alt="" /> </div> - <main class="aw-main-section u-position-relative" id="main"> + <main class="aw-main-section u-position-relative aw-u-overflow-hidden-break1-to-break3" id="main"> <div class="u-position-absolute aw-u-opacity-40-mobile bg-blur"> <img src="/images/bgs/docs-blur-1.svg" alt="" /> </div> 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; } }