Add color ramp scss variables
MODIFY
website/src/styles/_content.scss
website/src/styles/_content.scss
.header-anchor {
display: none;
text-decoration: none;
- color: $primary-color;
+ color: $color-4;
&:hover {
text-decoration: underline;

MODIFY
website/src/styles/_footer.scss
website/src/styles/_footer.scss
max-width: $container-width;
margin: 0 auto;
padding: $unit;
- border-top: 1px solid $gray-color;
+ border-top: 1px solid $gray-7;
@include pattern-white;
h4 {

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -9,7 +9,7 @@ html {
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
- color: $text-color;
+ color: $gray-4;
line-height: 1.65;
background-color: #ffffff;
}
@@ -18,7 +18,7 @@ body {
font-size: 16px;
margin: 0;
@include desktop-only() {
- border-top: $unit / 3 solid $text-color;
+ border-top: $unit / 3 solid $gray-4;
}
}

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
top: 0;
align-items: center;
padding: 0 $unit;
- border-top: $unit / 3 solid $text-color;
+ border-top: $unit / 3 solid $gray-4;
.stretch {
flex-grow: 1;
@include mobile-only() {
width: 100%;
- border-bottom: 1px solid $gray-color;
+ border-bottom: 1px solid $gray-7;
display: flex;
}
}

MODIFY
website/src/styles/_hero.scss
website/src/styles/_hero.scss
position: relative;
padding: $unit * 2;
color: rgb(68, 73, 80);
- border-bottom: 1px solid rgba(0,0,0,.05);
+ border-bottom: 1px solid $gray-7;
@include pattern-white;
@include mobile-only() {

MODIFY
website/src/styles/_mixins.scss
website/src/styles/_mixins.scss
@mixin top-border{
@include transition-timing;
- border-top: $unit / 3 solid $text-color;
+ border-top: $unit / 3 solid $gray-4;
}
\ No newline at end of file

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
transition-duration: 100ms;
&.active {
- color: $primary-color;
- background-color: $text-color;
+ color: $color-4;
+ background-color: $gray-4;
font-weight: bold;
}
}
.active {
- color: $primary-color;
- background-color: $gray-color;
+ color: $color-4;
+ background-color: $gray-4;
}
}
\ No newline at end of file

MODIFY
website/src/styles/_variables.scss
website/src/styles/_variables.scss
-$text-color: rgb(28, 30, 33);
-$primary-color: rgb(255, 201, 5);
-$gray-color: rgba(0, 0, 0, 0.05);
+$color-1: #E18403;
+$color-2: #ED9F03;
+$color-3: #F7B604;
+$color-4: #FFC905; //logo color
+$color-5: #FFDC1C;
+$color-6: #FFF065;
+$color-7: #FFFCB4;
+
+$gray-1: #030303;
+$gray-2: #040404;
+$gray-3: #101111;
+$gray-4: #27272A; //logo gray
+$gray-5: #565A59;
+$gray-6: #9B9D99;
+$gray-7: #E8E8E8;
+
$sidebar-width: 20%;
$container-width: 100%;

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
position: sticky;
top: 0;
height: 100vh;
- border-right: 1px solid $gray-color;
+ border-right: 1px solid $gray-7;
background-color: #ffffff;
transition-property: transform, border-top-width;
z-index: 2;

Add color ramp scss variables