From b8ef42f4da689b2729b53e88f38f96852b8b7bad Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 21 Sep 2023 13:15:29 +0200 Subject: [PATCH 01/15] chore: add error page for testing to kitchensink --- src/routes/kitchensink/error/+page.svelte | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/routes/kitchensink/error/+page.svelte diff --git a/src/routes/kitchensink/error/+page.svelte b/src/routes/kitchensink/error/+page.svelte new file mode 100644 index 0000000000..e69de29bb2 From 60b63a09aba33efe492c1aa3bb49213702a17a6a Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 21 Sep 2023 13:17:02 +0200 Subject: [PATCH 02/15] chore: add nav and sidebar to error page example --- src/routes/kitchensink/error/+page.svelte | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/routes/kitchensink/error/+page.svelte b/src/routes/kitchensink/error/+page.svelte index e69de29bb2..967ce46a7d 100644 --- a/src/routes/kitchensink/error/+page.svelte +++ b/src/routes/kitchensink/error/+page.svelte @@ -0,0 +1,11 @@ + + + + + + + From 4cad5cc2571f962e8d678a5c41103a5b86f30d19 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 06:18:22 -0500 Subject: [PATCH 03/15] Container - update side padding ro be 20px instead of 32px (Caio QA) --- src/scss/6-elements/_container.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/6-elements/_container.scss b/src/scss/6-elements/_container.scss index 316e6423ba..70ad51c9d5 100644 --- a/src/scss/6-elements/_container.scss +++ b/src/scss/6-elements/_container.scss @@ -6,6 +6,7 @@ max-inline-size: var(--p-container-size); padding-inline: pxToRem(32); margin-inline: auto; + @media #{$break1} { padding-inline: pxToRem(20); } } .#{$p}-main-section { From 3c8a6eb76ca06cca98a76bf7a7051fb0fb37f3f1 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 06:43:25 -0500 Subject: [PATCH 04/15] Docs - Add 404 page --- src/routes/kitchensink/error/+page.svelte | 18 +++++++++++++++++- src/scss/6-elements/_button.scss | 1 + src/scss/9-grids/_grid-two-side-navs.scss | 2 +- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/routes/kitchensink/error/+page.svelte b/src/routes/kitchensink/error/+page.svelte index 967ce46a7d..f7f54e87f2 100644 --- a/src/routes/kitchensink/error/+page.svelte +++ b/src/routes/kitchensink/error/+page.svelte @@ -7,5 +7,21 @@ - +
+
+
+ 404_ +

+ Page not found +

+

+ Sorry, it seems that the page you are looking for does not exist. Feel free to use our navigation menu or the button below to explore more of Appwrite’s documentation. +

+ +
+
+
+ diff --git a/src/scss/6-elements/_button.scss b/src/scss/6-elements/_button.scss index 53c2bb75d1..e7e8e713d5 100644 --- a/src/scss/6-elements/_button.scss +++ b/src/scss/6-elements/_button.scss @@ -11,6 +11,7 @@ border-radius:var(--m-border-radius); border:solid var(--m-border-size) transparent; text-align:center; transition:var(--transition); user-select:none; color:hsl(var(--aw-color-white)); font-weight: 500; + [class*="icon"] { line-height:1; } .#{$p}-inline-tag { margin-inline-end:pxToRem(-2); background:rgba(255, 255, 255, 0.24); } &:where(:hover):where(:not(#{$disabled})) { diff --git a/src/scss/9-grids/_grid-two-side-navs.scss b/src/scss/9-grids/_grid-two-side-navs.scss index cf1b7fc257..edd99bd390 100644 --- a/src/scss/9-grids/_grid-two-side-navs.scss +++ b/src/scss/9-grids/_grid-two-side-navs.scss @@ -2,7 +2,7 @@ .#{$p}-grid-two-side-navs { --p-grid-huge-navs-padding-inline: #{pxToRem(28)}; - --p-grid-huge-navs-main-header-height: #{pxToRem(80)}; + --p-grid-huge-navs-main-header-height: #{pxToRem(73)}; --p-grid-huge-navs-secondary-header-height: #{pxToRem(116)}; --p-grid-huge-navs-secondary-sticky-position: #{pxToRem(120)}; --p-grid-huge-navs--margin-top-content-side-b: #{pxToRem(40)}; From 601f7e353600b1a3b1f4354ffbec1fd1a1bbb6df Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 06:59:17 -0500 Subject: [PATCH 05/15] Button - update default size to fit-content, in order when using anchor that it won't stretch --- src/scss/6-elements/_button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/6-elements/_button.scss b/src/scss/6-elements/_button.scss index e7e8e713d5..8a2463d6da 100644 --- a/src/scss/6-elements/_button.scss +++ b/src/scss/6-elements/_button.scss @@ -6,7 +6,7 @@ background: linear-gradient(135deg, hsl(var(--aw-color-pink-500)) 0%, hsl(var(--aw-color-pink-500)) 61%, hsl(var(--aw-color-secondary-100)) 100%); background-origin: border-box; - display:flex; justify-content:center; align-items:center; gap:pxToRem(8); + display:flex; inline-size:fit-content; justify-content:center; align-items:center; gap:pxToRem(8); padding-inline:pxToRem(14); padding-block:pxToRem(7); min-block-size:pxToRem(40); border-radius:var(--m-border-radius); border:solid var(--m-border-size) transparent; text-align:center; transition:var(--transition); user-select:none; color:hsl(var(--aw-color-white)); font-weight: 500; From 5d33dc2e02d245578ae6831cf92b8d66461312ad Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 07:42:23 -0500 Subject: [PATCH 06/15] Community page - fix spacing --- src/routes/community/+page.svelte | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte index 7a1fc115c2..27a03501c7 100644 --- a/src/routes/community/+page.svelte +++ b/src/routes/community/+page.svelte @@ -422,10 +422,7 @@ View all projects - -
-
-
From d2e0d80b7e142bb676a21cc3f9bef2bd9a589ab9 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 07:49:05 -0500 Subject: [PATCH 07/15] Community page - fix spacing --- src/routes/community/+page.svelte | 55 +++++++++++++++---------------- src/scss/_10-utilities.scss | 1 + 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte index 27a03501c7..7cde1c60f4 100644 --- a/src/routes/community/+page.svelte +++ b/src/routes/community/+page.svelte @@ -423,32 +423,8 @@ +
  • + +
    +

    Glitch

    +

    + Appwrite-powered Hackathon Collaboration Tool for streamlined team communication +

    +
    + +     +
    • +
  • + +
    +

    Glitch

    +

    + Appwrite-powered Hackathon Collaboration Tool for streamlined team communication +

    +
    + +     +
    • + diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss index 08b89e274b..f70539560f 100644 --- a/src/scss/_10-utilities.scss +++ b/src/scss/_10-utilities.scss @@ -3,6 +3,7 @@ .#{$p}-u-hide-mobile { @media #{$break1}{ display:none!important; } } .#{$p}-u-opacity-90 { opacity:0.9!important; } +.#{$p}-u-flex-vertical {display:flex!important; flex-direction:column!important; } .#{$p}-u-flex-vertical-reverse-mobile { @media #{$break1} { flex-direction:column-reverse!important; } } From 4d820aa58ebcfa258f4f712eb0768297d4a04980 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 08:02:27 -0500 Subject: [PATCH 08/15] Icon button - update cursor of disabled --- src/scss/6-elements/_icon-button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/6-elements/_icon-button.scss b/src/scss/6-elements/_icon-button.scss index 0f22949e8d..673e91f28b 100644 --- a/src/scss/6-elements/_icon-button.scss +++ b/src/scss/6-elements/_icon-button.scss @@ -50,7 +50,7 @@ --p-icon-button-border-color: var(--p-icon-button-border-color-focus); --p-icon-button-shadow-color: var(--p-icon-button-shadow-color-focus); } - &:disabled { opacity:0.4; } + &:disabled { opacity:0.4; cursor:initial; } #{$theme-dark} & { @include dark-mode(); From 1358dbcede1b5172b13fb8505a179f6e5e886ae0 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 09:13:18 -0500 Subject: [PATCH 09/15] Side Nav (grid-huge) - update behavior of back button --- src/scss/7-components/_side-nav.scss | 3 ++- src/scss/9-grids/_grid-huge-navs.scss | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss index b4fa4df757..8b67702625 100644 --- a/src/scss/7-components/_side-nav.scss +++ b/src/scss/7-components/_side-nav.scss @@ -30,7 +30,8 @@ &-parent { display:flex; align-items:baseline; padding-block-end:pxToRem(16); border-block-end:pxToRem(1) solid hsl(var(--aw-color-smooth)); - &-title { inline-size:100%; text-align:center; } + [class*="icon"]:first-child { flex-shrink:0; padding-inline:pxToRem(12); } + &-title { inline-size:100%; text-align:center; transition:var(--transition); } } } &-scroll { diff --git a/src/scss/9-grids/_grid-huge-navs.scss b/src/scss/9-grids/_grid-huge-navs.scss index f1c6c3b583..94fdd77387 100644 --- a/src/scss/9-grids/_grid-huge-navs.scss +++ b/src/scss/9-grids/_grid-huge-navs.scss @@ -106,7 +106,12 @@ @media #{$break3}, #{$break4}, #{$break5} { .#{$p}-side-nav { max-inline-size:var(--p-grid-huge-navs-side-nav-width-closed); - &-wrapper { inline-size:var(--p-grid-huge-navs-side-nav-width-closed); max-inline-size:var(--p-grid-huge-navs-side-nav-width-closed); } + &-wrapper { + inline-size:var(--p-grid-huge-navs-side-nav-width-closed); max-inline-size:var(--p-grid-huge-navs-side-nav-width-closed); + &-parent { + &-title { opacity:0; } + } + } &-header { opacity:0; transition:var(--transition); } &-button { > *:not(:first-child) { opacity:0; transition:var(--transition); } @@ -114,7 +119,12 @@ } &.is-open { .#{$p}-side-nav { - &-wrapper { max-inline-size:var(--p-grid-huge-navs-side-nav-width-opened); inline-size:var(--p-grid-huge-navs-side-nav-width-opened); } + &-wrapper { + max-inline-size:var(--p-grid-huge-navs-side-nav-width-opened); inline-size:var(--p-grid-huge-navs-side-nav-width-opened); + &-parent { + &-title { opacity:1; } + } + } &-header { opacity:1; } &-button { > *:not(:first-child) { opacity:1; } From aa1e51fdfe97fb25714766eb03c4b9c8f8332238 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 09:55:33 -0500 Subject: [PATCH 10/15] Inline code - update font-family to monospace --- src/scss/6-elements/_inline-code.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/6-elements/_inline-code.scss b/src/scss/6-elements/_inline-code.scss index bd14710d76..93eaa54b7d 100644 --- a/src/scss/6-elements/_inline-code.scss +++ b/src/scss/6-elements/_inline-code.scss @@ -7,5 +7,5 @@ color: hsl(var(--p-inline-code-text-color)); background-color: hsl(var(--p-inline-code-bg-color)); - display:inline-flex; padding-inline:pxToRem(4); padding-block:pxToRem(1); border-radius:pxToRem(4); font-family:var(--aw-font-family-aeonik-fono); + display:inline-flex; padding-inline:pxToRem(4); padding-block:pxToRem(1); border-radius:pxToRem(4); font-family:monospace; } \ No newline at end of file From c4607eb7f6afb6e5320446dbc6349a9feae197c6 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 10:09:59 -0500 Subject: [PATCH 11/15] Homepage - Add image specific size, to prevent repaint on loading of the page --- src/routes/+page.svelte | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ec762cae75..022530cff5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -94,40 +94,40 @@
    • - Apple + Apple
    • - ORACLE + ORACLE
    • - TikTok + TikTok
    • - intel + intel
    • - IBM + IBM
    • - American Airlines + American Airlines
    • - Deloitte. + Deloitte.
    • - GM + GM
    • - EY + EY
    • - Nestle + Nestle
    • - BOSCH + BOSCH
    • - DECATHLON + DECATHLON
    From 3c8045f0502d2d7cdac58afaf122c8ddf6e14188 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 10:16:04 -0500 Subject: [PATCH 12/15] Homepage - Add image specific size, to prevent repaint on loading of the page - update aspect-ration of screenshot --- src/routes/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 022530cff5..f6c252c551 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -80,7 +80,7 @@ class="u-block" src="/images/pages/homepage/dashboard.svg" alt="console dashboard" - style="aspect-ratio: 16 / 9" + style="aspect-ratio: 1244 / 717" /> From 6e6b48720215d284d2814faf76b3e7f0ec8aa458 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 10:28:14 -0500 Subject: [PATCH 13/15] Homepage - update aspect-ration of screenshot --- src/routes/+page.svelte | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f6c252c551..b9ea65edcd 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -76,12 +76,13 @@
    - console dashboard +
    + console dashboard +
    From 2c12a5ae9e86fe085ca5e7b8e8469e128dec3fdf Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 10:56:12 -0500 Subject: [PATCH 14/15] Docs - remove padding inline of container --- src/lib/layouts/Docs.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte index 8e3ec8f393..52bc8ec4f1 100644 --- a/src/lib/layouts/Docs.svelte +++ b/src/lib/layouts/Docs.svelte @@ -29,7 +29,7 @@ export let variant: DocsLayoutVariant = 'default'; const variantClasses: Record = { - default: 'aw-grid-side-nav aw-container', + default: 'aw-grid-side-nav aw-container u-padding-inline-0', expanded: 'aw-grid-huge-navs', 'two-side-navs': 'aw-grid-two-side-navs' }; From 7c8266b54a0aa60a1f5a7a4c18299e421146ed27 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 21 Sep 2023 11:13:56 -0500 Subject: [PATCH 15/15] Typography - update typography --- src/scss/1-css-variables/_fonts.scss | 3 ++- src/scss/6-elements/text-tokens/_title.scss | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/scss/1-css-variables/_fonts.scss b/src/scss/1-css-variables/_fonts.scss index b6e83d8b69..cfb175fd8d 100644 --- a/src/scss/1-css-variables/_fonts.scss +++ b/src/scss/1-css-variables/_fonts.scss @@ -11,7 +11,8 @@ --aw-font-size-medium: #{pxToRem(18)}; --aw-font-size-large: #{pxToRem(20)}; --aw-font-size-xl: #{pxToRem(24)}; - --aw-font-size-xxl: #{pxToRem(40)}; + --aw-font-size-xxl: #{pxToRem(32)}; + --aw-font-size-xxxl: #{pxToRem(40)}; --aw-font-size-big: #{pxToRem(48)}; --aw-font-size-huge: #{pxToRem(56)}; --aw-font-size-super: #{pxToRem(64)}; diff --git a/src/scss/6-elements/text-tokens/_title.scss b/src/scss/6-elements/text-tokens/_title.scss index 7dc2de499c..17fc8372ba 100644 --- a/src/scss/6-elements/text-tokens/_title.scss +++ b/src/scss/6-elements/text-tokens/_title.scss @@ -1,7 +1,7 @@ @use '../../abstract' as *; .#{$p}-title { --p-font-family: var(--aw-font-family-aeonik-pro); - --p-font-size: var(--aw-font-size-big); + --p-font-size: var(--aw-font-size-xxl); --p-line-height: var(--aw-line-height-lg); --p-letter-spacing: var(--aw-letter-spacing-squeezed); --p-font-weight: var(--aw-font-weight-regular); @@ -14,6 +14,6 @@ @media #{$break3open} { --p-line-height: var(--aw-line-height-big); - --p-font-size: var(--aw-font-size-xxl); + --p-font-size: var(--aw-font-size-xxxl); } } \ No newline at end of file