-
+
Back to top
diff --git a/src/scss/6-elements/_card.scss b/src/scss/6-elements/_card.scss
index fa74dc18f8..dbe14dcd20 100644
--- a/src/scss/6-elements/_card.scss
+++ b/src/scss/6-elements/_card.scss
@@ -3,12 +3,17 @@
.#{$p}-card {
--p-card-padding: var(--card-padding, #{pxToRem(24)});
--p-card-border-radius: var(--card-border-radius, var(--border-radius-medium));
+
&.is-normal {
--p-card-bg-color: var(--p-card-bg-color-default);
--p-card-bg-color-default: var(--aw-color-card);
--p-card-border-color: var(--p-card-border-color-default);
- --p-card-border-color-default: var(--aw-color-black) / 0.08;
+ --p-card-border-color-default: var(--aw-color-offset);
+
+ --p-card-shadow-color: var(--p-card-shadow-color-default);
+ --p-card-shadow-color-default: var(--aw-color-black) / 0;
+ --p-card-shadow-color-focus-visible: var(--aw-color-black) / 0.06;
--card-padding: #{pxToRem(16)};
@@ -18,12 +23,28 @@
padding: var(--p-card-padding);
border-radius: var(--p-card-border-radius);
+ &:where(a, button) {
+ cursor:pointer;
+ outline: solid pxToRem(1) hsl(var(--transparent));
+ box-shadow: 0 0 0 pxToRem(5) hsl(var(--p-card-shadow-color));
+ transition:var(--transition);
+ &:where(:hover, :focus):not(#{$disabled}) {
+ outline-color: hsl(var(--p-card-border-color));
+ }
+ &:where(:focus-visible) {
+ --p-card-shadow-color: var(--p-card-shadow-color-focus-visible);
+ }
+ &:where(#{$disabled}) { opacity:0.4; }
+ }
+
#{$theme-dark} & {
--p-card-border-color-default: var(--aw-color-white) / 0.10;
+
+ --p-card-shadow-color-focus-visible: var(--aw-color-white) / 0.06;
}
}
&.is-white {
- display:block;
+ display:flex; flex-direction:column;
padding:var(--p-card-padding);
background: linear-gradient(360deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.64) 100%);
-webkit-backdrop-filter:blur(pxToRem(12)); backdrop-filter:blur(pxToRem(12));
@@ -75,6 +96,6 @@
}
@media #{$break1} {
- --p-card-padding: var(--card-padding-mobile, var(--card-padding));
+ --p-card-padding: var(--card-padding-mobile, #{pxToRem(24)});
}
}
\ No newline at end of file
diff --git a/src/scss/6-elements/_hero-banner-button.scss b/src/scss/6-elements/_hero-banner-button.scss
index 9ee8b74327..3aa5454114 100644
--- a/src/scss/6-elements/_hero-banner-button.scss
+++ b/src/scss/6-elements/_hero-banner-button.scss
@@ -34,7 +34,7 @@
--p-hero-button-shadow-out-color-focus: var(--aw-color-pink-500) / 0.24 ;
display:flex; align-items:baseline; gap:pxToRem(4);
- padding-block:pxToRem(4); padding-inline:pxToRem(8);
+ padding-block:pxToRem(4); padding-inline:pxToRem(8); inline-size:fit-content;
background:hsl(var(--p-hero-button-bg-color));
line-height:pxToRem(20);
diff --git a/src/scss/6-elements/_link.scss b/src/scss/6-elements/_link.scss
index 708b93c621..8725e9f39f 100644
--- a/src/scss/6-elements/_link.scss
+++ b/src/scss/6-elements/_link.scss
@@ -7,14 +7,13 @@
--p-link-color-text-active: var(--aw-color-pink-600);
color: hsl(var(--p-link-color-text));
- font-weight: var(--aw-font-weight-bold);
- border-radius: pxToRem(8);
+ border-radius: pxToRem(4);
cursor: pointer;
&:where(:is(:hover):not(#{$disabled})) { --p-link-color-text:var(--p-link-color-text-hover); }
&:where(:is(:active):not(#{$disabled})) { --p-link-color-text:var(--p-link-color-text-active); }
&:where(#{$disabled}) { opacity:0.4; cursor:initial; }
- &:where(:focus-visible) { outline:pxToRem(1) solid hsl(var(--aw-color-pink-500)); }
+ &:where(:focus-visible) { outline:pxToRem(1) solid hsl(var(--aw-color-primary)); box-shadow:none; }
#{$theme-dark} & {
--p-link-color-text-default: var(--aw-color-greyscale-100);
diff --git a/src/scss/6-elements/_lists.scss b/src/scss/6-elements/_lists.scss
index e1b2f55b2f..1071b90072 100644
--- a/src/scss/6-elements/_lists.scss
+++ b/src/scss/6-elements/_lists.scss
@@ -24,6 +24,7 @@
counter-reset: numeric-list;
li::before { color:hsl(var(--aw-color-accent-click)); padding-inline-end:pxToRem(12); }
li {
+ display:flex;
&::before {
counter-increment: numeric-list;
content:counter(numeric-list); align-self:start;
diff --git a/src/scss/6-elements/_media-container.scss b/src/scss/6-elements/_media-container.scss
index 3035b34949..c33da25822 100644
--- a/src/scss/6-elements/_media-container.scss
+++ b/src/scss/6-elements/_media-container.scss
@@ -14,7 +14,7 @@
-webkit-backdrop-filter: blur(pxToRem(25));
backdrop-filter: blur(pxToRem(25));
- > * { border-radius:var(--p-media-border-radius); overflow:hidden; }
+ > * { display:block; border-radius:var(--p-media-border-radius); overflow:hidden; }
@media #{$break2} {
--p-media-container-border-padding:#{pxToRem(5)};
diff --git a/src/scss/7-components/_article.scss b/src/scss/7-components/_article.scss
index f320a84d5c..06607a20e5 100644
--- a/src/scss/7-components/_article.scss
+++ b/src/scss/7-components/_article.scss
@@ -18,7 +18,7 @@
&-spacing-logic .#{$p}{
&-sub-body-400 { margin-block:pxToRem(16); }
&-sub-body-500 { margin-block-end:pxToRem(4); }
- &-main-body-500 { margin-block-start:pxToRem(4); }
+ &-main-body-500 { margin-block-start:pxToRem(4); margin-block-end:pxToRem(4); }
&-label { margin-block-end:pxToRem(16); }
&-paragraph-md { margin-block-end:pxToRem(32); }
&-code-snippet { margin-block-start:pxToRem(16); margin-block-end:pxToRem(32); }
diff --git a/src/scss/7-components/_big-list-info.scss b/src/scss/7-components/_big-list-info.scss
index 6a00322ab7..3615a7204b 100644
--- a/src/scss/7-components/_big-list-info.scss
+++ b/src/scss/7-components/_big-list-info.scss
@@ -2,10 +2,7 @@
.#{$p}-big-list-info {
display:flex; flex-direction:column; gap:pxToRem(64);
- max-inline-size:pxToRem(480);
&-item { padding-block-start:pxToRem(16); border-block-start:solid 1px hsl(var(--aw-color-smooth));}
.text { color:hsl(var(--aw-color-greyscale-300)); }
- @media #{$break2open} { inline-size:pxToRem(480); }
-
-
+ @media #{$break2open} { inline-size:pxToRem(480); max-inline-size:pxToRem(480); }
}
\ No newline at end of file
diff --git a/src/scss/7-components/_footer-nav.scss b/src/scss/7-components/_footer-nav.scss
index c0f4a4ed8f..e0cb66fecc 100644
--- a/src/scss/7-components/_footer-nav.scss
+++ b/src/scss/7-components/_footer-nav.scss
@@ -12,9 +12,7 @@
&-secondary {
&-list { display:flex; flex-direction:column; gap:pxToRem(10); }
- &-item {
- a { color:hsl(var(--aw-color-greyscale-500)); }
- }
+ &-item {}
}
@media #{$break1} {
diff --git a/src/scss/7-components/_info-boxes.scss b/src/scss/7-components/_info-boxes.scss
index 456c4e006a..e06f041e0d 100644
--- a/src/scss/7-components/_info-boxes.scss
+++ b/src/scss/7-components/_info-boxes.scss
@@ -25,4 +25,7 @@
margin-block-start:pxToRem(16); color:hsl(var(--aw-color-primary));
}
&-content { margin-block-start:pxToRem(4); color:hsl(var(--aw-color-secondary)); }
+ @media #{$break1} {
+ grid-template-columns: repeat(auto-fill, minmax(pxToRem(146), 1fr));
+ }
}
\ No newline at end of file
diff --git a/src/scss/7-components/_references-menu.scss b/src/scss/7-components/_references-menu.scss
index 9e877140c7..9858deabb3 100644
--- a/src/scss/7-components/_references-menu.scss
+++ b/src/scss/7-components/_references-menu.scss
@@ -9,11 +9,16 @@
display:flex; flex-direction:column; padding-inline:pxToRem(16);
&-content {
- display:flex; flex-direction:column; gap:pxToRem(28); inline-size:pxToRem(255);
+ display:flex; flex-direction:column; gap:pxToRem(24); inline-size:pxToRem(255);
}
&-title { color:hsl(var(--aw-color-primary)); }
- &-list { display:flex; flex-direction:column; gap:pxToRem(16); overflow-y: scroll; }
- &-item {}
+ &-list {
+ @include scroll(); overflow-y:auto;
+ display:flex; flex-direction:column; gap:pxToRem(16);
+ padding-block:pxToRem(4);
+ padding-inline:pxToRem(4);
+ }
+ &-item { padding-inline:pxToRem(-4); }
&-link {
display:flex; gap:pxToRem(8);
color:hsl(var(--p-references-menu-link-color-text));
diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss
index b533118895..c488ba5346 100644
--- a/src/scss/7-components/_side-nav.scss
+++ b/src/scss/7-components/_side-nav.scss
@@ -29,14 +29,15 @@
background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition);
&-parent {
- display:flex; align-items:baseline;
+ display:flex; align-items:center;
padding-block-end:pxToRem(16); border-block-end:pxToRem(1) solid hsl(var(--aw-color-smooth));
[class*="icon"]:first-child { flex-shrink:0; padding-inline:pxToRem(12); }
- &-title { inline-size:100%; text-align:center; transition:var(--transition); }
+ &-title { @include trim(1); inline-size:100%; margin-inline-end:pxToRem(44); text-align:center; transition:var(--transition); }
}
}
&-scroll {
- flex:1; overflow-y:scroll; overflow-x:hidden;
+ @include scroll(); overflow-y:auto; overflow-x:hidden;
+ flex:1;
display:flex; flex-direction:column; gap:pxToRem(24);
padding-inline:pxToRem(16); margin-inline:pxToRem(-16);
diff --git a/src/scss/7-components/_user-box.scss b/src/scss/7-components/_user-box.scss
index ffaf979f20..b6708c74ab 100644
--- a/src/scss/7-components/_user-box.scss
+++ b/src/scss/7-components/_user-box.scss
@@ -4,7 +4,7 @@
display:grid; column-gap:pxToRem(16); grid-template-columns:auto 1fr;
font-size:pxToRem(18); line-height:pxToRem(24);
- &-image { grid-row:span 2; display:block; inline-size:pxToRem(48); block-size:pxToRem(48); }
+ &-image { grid-row:span 2; display:block; inline-size:pxToRem(48); block-size:pxToRem(48); border-radius:50%; }
&-name { color:hsl(var(--aw-color-greyscale-700)); }
&-username { color:hsl(var(--aw-color-greyscale-600)); }
}
\ No newline at end of file
diff --git a/src/scss/8-sequences/_grid-articles.scss b/src/scss/8-sequences/_grid-articles.scss
index bea3140926..cf21d1dbb4 100644
--- a/src/scss/8-sequences/_grid-articles.scss
+++ b/src/scss/8-sequences/_grid-articles.scss
@@ -17,7 +17,7 @@
.#{$p}-grid-articles-item {}
}
&-item {
- display:flex; flex-direction:column;
+ display:flex; flex-direction:column; min-block-size:100%;
padding:pxToRem(8); padding-block-end:pxToRem(12);
background-color:hsl(var(--p-grid-articles-item-bg-color));
diff --git a/src/scss/9-grids/_grid-15-25-desktop.scss b/src/scss/9-grids/_grid-15-25-desktop.scss
index e4245aa417..acb6315702 100644
--- a/src/scss/9-grids/_grid-15-25-desktop.scss
+++ b/src/scss/9-grids/_grid-15-25-desktop.scss
@@ -1,8 +1,11 @@
@use '../abstract' as *;
.#{$p}-grid-15-25-desktop {
+ display:flex;
+ @media #{$break1} {
+ flex-direction:column;
+ }
@media #{$break2open} {
- display:flex;
>:nth-child(1) {flex:1.5; }
>:nth-child(2) {flex:2.5; }
}
diff --git a/src/scss/9-grids/_multi-columns-1.scss b/src/scss/9-grids/_multi-columns-1.scss
index 09461b0a0a..be295613c7 100644
--- a/src/scss/9-grids/_multi-columns-1.scss
+++ b/src/scss/9-grids/_multi-columns-1.scss
@@ -1,6 +1,6 @@
@use '../abstract' as *;
.#{$p}-multi-columns-1 {
- column-width:pxToRem(350); column-gap:pxToRem(32);
+ column-width:pxToRem(340); column-gap:pxToRem(32);
> * { break-inside:avoid; margin-block-end:pxToRem(32); }
}
\ No newline at end of file
diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss
index f70539560f..df08e21108 100644
--- a/src/scss/_10-utilities.scss
+++ b/src/scss/_10-utilities.scss
@@ -4,6 +4,7 @@
.#{$p}-u-opacity-90 { opacity:0.9!important; }
.#{$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; } }
@@ -33,17 +34,21 @@
.#{$p}-u-margin-inline-32-negative { margin-inline:pxToRem(-32); }
.#{$p}-u-margin-block-start-40 { margin-block-start:pxToRem(40); }
+.#{$p}-u-sep { border:solid pxToRem(1) hsl(var(--aw-color-smooth));}
.#{$p}-u-sep-block { border-block:solid pxToRem(1) hsl(var(--aw-color-smooth));}
.#{$p}-u-sep-block-start { border-block-start:solid pxToRem(1) hsl(var(--aw-color-smooth));}
.#{$p}-u-padding-block-end-136-not-mobile { @media #{$break2open} { padding-block-end:pxToRem(136)!important;} }
+.#{$p}-u-border-radius-8 { border-radius:pxToRem(8); }
+
.#{$p}-u-max-width-168 { max-inline-size:pxToRem(168); }
.#{$p}-u-max-width-350 { max-inline-size:pxToRem(350); }
.#{$p}-u-max-width-380 { max-inline-size:pxToRem(380); }
.#{$p}-u-max-width-480 { max-inline-size:pxToRem(480); }
.#{$p}-u-max-width-580 { max-inline-size:pxToRem(580); }
-.#{$p}-u-max-width-600 { max-inline-size:pxToRem(700); }
+.#{$p}-u-max-width-600 { max-inline-size:pxToRem(600); }
+.#{$p}-u-max-width-610 { max-inline-size:pxToRem(610); }
.#{$p}-u-max-width-700 { max-inline-size:pxToRem(700); }
.#{$p}-u-max-width-800 { max-inline-size:pxToRem(800); }
.#{$p}-u-max-width-993 { max-inline-size:pxToRem(993); }
@@ -97,6 +102,8 @@
.#{$p}-u-min-block-size-320 { min-block-size:#{pxToRem(320)}!important; }
.#{$p}-u-flex-direction-column-mobile { @media #{$break1} { flex-direction:column; } }
+.#{$p}-u-flex-basis-200 { flex-basis:pxToRem(200); }
+.#{$p}-u-flex-basis-300 { flex-basis:pxToRem(300); }
.#{$p}-u-flex-basis-400 { flex-basis:pxToRem(400); }
.#{$p}-u-translate-x-negative { transform:translateX(-100%); }
@@ -112,10 +119,13 @@
.#{$p}-u-row-gap-80 { row-gap:pxToRem(80)!important; }
.#{$p}-u-row-gap-96 { row-gap:pxToRem(96)!important; }
+.#{$p}-u-column-gap-96 { column-gap:pxToRem(96)!important; }
+
.#{$p}-u-text-align-start { text-align:start!important; }
.#{$p}-u-text-align-center { text-align:center!important; }
.#{$p}-u-mobile-align-text-center { @media #{$break1} { text-align:center!important;} }
.#{$p}-u-padding-inline-0 {padding-inline:0!important;}
+.#{$p}-u-padding-inline-64 {padding-inline:pxToRem(64)!important;}
.#{$p}-u-cross-child-start { align-self:start!important; }
@@ -218,4 +228,12 @@
.#{$p}-u-inline-block {
display:inline-block;
+}
+
+.#{$p}-u-uppercase{
+ text-transform:uppercase;
+}
+
+.#{$p}-u-capitalize {
+ text-transform:capitalize;
}
\ No newline at end of file
diff --git a/src/scss/abstract/mixins/_scroll.scss b/src/scss/abstract/mixins/_scroll.scss
index 5abe086321..7db2b61521 100644
--- a/src/scss/abstract/mixins/_scroll.scss
+++ b/src/scss/abstract/mixins/_scroll.scss
@@ -14,11 +14,11 @@
&::-webkit-scrollbar-thumb {
border-radius: pxToRem(4);
- background: hsl(var(--scroll-color));
+ background: hsl(var(--aw-color-tertiary));
}
&::-webkit-scrollbar-corner {
- background: hsl(var(--scroll-color));
+ background: hsl(var(--aw-color-tertiary));
border-radius: pxToRem(6);
}
}
diff --git a/src/scss/index.scss b/src/scss/index.scss
index cfc0492846..9bfc2759d2 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,6 +1,6 @@
@use 'sass:meta';
-@layer pink, css-variables, resets, fonts, icons, animations, elements, components, grids, pages, utilities;
+@layer pink, css-variables, resets, fonts, icons, animations, elements, components, sequences, grids, pages, utilities;
@layer pink {
@import '@appwrite.io/pink';
diff --git a/static/images/bgs/diagonal-lines.png b/static/images/bgs/diagonal-lines.png
index 98a8986163..0e1ce6dc64 100644
Binary files a/static/images/bgs/diagonal-lines.png and b/static/images/bgs/diagonal-lines.png differ
diff --git a/static/images/brand/new-brand-grid-desktop.png b/static/images/brand/new-brand-grid-desktop.png
new file mode 100644
index 0000000000..42a7f23d4f
Binary files /dev/null and b/static/images/brand/new-brand-grid-desktop.png differ
diff --git a/static/images/brand/new-brand-grid-mobile.png b/static/images/brand/new-brand-grid-mobile.png
new file mode 100644
index 0000000000..6a44978062
Binary files /dev/null and b/static/images/brand/new-brand-grid-mobile.png differ
diff --git a/static/images/temp/bg-side-2.png b/static/images/temp/bg-side-2.png
new file mode 100644
index 0000000000..1e945dc159
Binary files /dev/null and b/static/images/temp/bg-side-2.png differ
+ 
+ 
@@ -130,7 +143,12 @@
+ 
+ 
+ 
+ 
+ 
+ class="u-width-full-line aw-u-block-size-160 aw-u-media-cover aw-u-border-radius-8" alt="">