Merge pull request #461 from appwrite/bunch-style-fixes-eldad

Style fixes for several visual issues
appwrite · Dec 25, 2023 · fd22b85 · fd22b85
2 parents 2512218 + 9cabdd6
commit fd22b85
Show file tree

Hide file tree

Showing 12 changed files with 242 additions and 237 deletions.
diff --git 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
@@ -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
diff --git a/src/routes/changelog/[[page]]/+page.svelte b/src/routes/changelog/[[page]]/+page.svelte
@@ -43,43 +43,46 @@
 </svelte:head>
 
 <Main>
-    <div class="wrapper">
-        <h1 class="aw-display aw-u-color-text-primary">Changelog</h1>
-        <ul>
-            {#each data.entries as entry}
-                <li>
-                    <div class="aw-dot" />
-                    <ChangelogEntry {entry}>
-                        <svelte:component this={entry.component} />
-                    </ChangelogEntry>
-                </li>
-            {/each}
-        </ul>
-
-        {#if data.nextPage}
-            <button class="aw-button is-secondary" on:click={loadMore}>Load more</button>
-        {/if}
-    </div>
-    <div
-        class="aw-big-padding-section-level-2 is-margin-replace-padding u-position-relative u-overflow-hidden"
-    >
-        <div class="aw-container">
-            <PreFooter />
-            <FooterNav />
-            <MainFooter />
+    <div class="aw-big-padding-section">
+        <div class="aw-big-padding-section-level-1">
+            <div class="aw-big-padding-section-level-2">
+                <div class="aw-container wrapper">
+                    <h1 class="aw-display aw-u-color-text-primary">Changelog</h1>
+                    <ul>
+                        {#each data.entries as entry}
+                            <li>
+                                <div class="aw-dot" />
+                                <ChangelogEntry {entry}>
+                                    <svelte:component this={entry.component} />
+                                </ChangelogEntry>
+                            </li>
+                        {/each}
+                    </ul>
+
+                    {#if data.nextPage}
+                        <button class="aw-button is-secondary" on:click={loadMore}>Load more</button>
+                    {/if}
+                </div>
+            </div>
+        </div>
+        <div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden">
+            <div class="aw-big-padding-section-level-2">
+                <div class="aw-container">
+                    <PreFooter />
+                    <FooterNav />
+                    <MainFooter />
+                </div>
+            </div>
         </div>
     </div>
 </Main>
 
 <style lang="scss">
     .wrapper {
         --padding-inline: 1rem;
-
+        box-sizing: border-box;
         max-width: calc(49.375rem + var(--padding-inline) * 2);
-        margin-block-start: 7.5rem;
-        margin-inline: auto;
         padding-inline: var(--padding-inline);
-        padding-block-end: 10rem;
     }
 
     ul {

diff --git a/src/routes/changelog/entry/[entry]/+page.svelte b/src/routes/changelog/entry/[entry]/+page.svelte
@@ -36,52 +36,44 @@
 </svelte:head>
 
 <Main>
-    <div class="aw-container wrapper" 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="/changelog">
-                    <span class="aw-icon-chevron-left" aria-hidden="true" />
-                    <span>Back to Changelog</span>
-                </a>
-                <ul class="aw-metadata aw-caption-400">
-                    <li>
-                        <time datetime={data.date}>{formatDate(data.date)}</time>
-                    </li>
-                </ul>
-                <h1 class="aw-title aw-u-color-text-primary">{data.title}</h1>
-            </header>
-            {#if data.cover}
-                <div class="aw-media-container">
-                    <img class="u-block" src={data.cover} alt="" />
-                </div>
-            {/if}
+    <div class="aw-big-padding-section">
+        <div class="aw-big-padding-section-level-1">
+            <div class="aw-big-padding-section-level-2">
+                <div class="aw-container wrapper" 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="/changelog">
+                                <span class="aw-icon-chevron-left" aria-hidden="true" />
+                                <span>Back to Changelog</span>
+                            </a>
+                            <ul class="aw-metadata aw-caption-400">
+                                <li>
+                                    <time datetime={data.date}>{formatDate(data.date)}</time>
+                                </li>
+                            </ul>
+                            <h1 class="aw-title aw-u-color-text-primary">{data.title}</h1>
+                        </header>
+                        {#if data.cover}
+                            <div class="aw-media-container">
+                                <img class="u-block" src={data.cover} alt="" />
+                            </div>
+                        {/if}
 
-            <div class="aw-article-content u-margin-block-start-32">
-                <svelte:component this={data.component} />
+                        <div class="aw-article-content u-margin-block-start-32">
+                            <svelte:component this={data.component} />
+                        </div>
+                    </article>
+                </div>
+            </div>
+            <div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden">
+                <div class="aw-big-padding-section-level-2">
+                    <div class="aw-container">
+                        <PreFooter />
+                        <FooterNav />
+                        <MainFooter />
+                    </div>
+                </div>
             </div>
-        </article>
-    </div>
-
-    <div
-        class="aw-big-padding-section-level-2 is-margin-replace-padding u-position-relative u-overflow-hidden"
-    >
-        <div class="aw-container">
-            <PreFooter />
-            <FooterNav />
-            <MainFooter />
         </div>
     </div>
 </Main>
-
-<style lang="scss">
-    .wrapper {
-        padding-block-start: 3rem;
-        padding-block-end: 10rem;
-    }
-
-    header a {
-        display: flex;
-        align-items: center;
-        translate: -0.35rem -0.25rem;
-    }
-</style>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -19,14 +19,15 @@
 
   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); }
 
 
 
   &-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
@@ -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
@@ -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; }  }