Fix background pattern
MODIFY
website/src/styles/_footer.scss
website/src/styles/_footer.scss
padding-bottom: $unit * 2;
border-top: 1px solid var(--soft-border-color);
@include pattern-white;
- background: var(--background-color);
- background-image: var(--pattern-img-path),
- linear-gradient(180deg, var(--pattern-color) 20%, rgba(0, 0, 0, 0) 100%);;
.container{
display: block;

MODIFY
website/src/styles/_hero.scss
website/src/styles/_hero.scss
position: relative;
padding: $unit * 2;
border-bottom: 1px solid var(--soft-border-color);
+ border-right: 1px solid var(--soft-border-color);
@include pattern-white;
@include mobile-only() {

MODIFY
website/src/styles/_mixins.scss
website/src/styles/_mixins.scss
}
@mixin pattern-white{
- background: var(--background-color);
+ background-color: var(--background-color);
background-image: var(--pattern-img-path),
- linear-gradient(90deg, var(--pattern-color) 60%, rgba(0, 0, 0, 0) 100%);;
+ linear-gradient(180deg, var(--pattern-color) 20%, var(--pattern-color-2) 100%);
background-repeat: repeat;
background-position: 50%;
- z-index: -1;
- @include transition-timing;
- transition-property: background, background-image;
- transition-property: 200ms, 350ms;
}
@mixin top-border{

MODIFY
website/src/styles/_variables.scss
website/src/styles/_variables.scss
@@ -23,6 +23,7 @@ $gray-8: lighten(#27272A, 80%);
--top-border-color: #{$gray-4};
--soft-border-color: #{$gray-7};
--pattern-color: #{rgba($gray-7, 0.6)};
+ --pattern-color-2: #{rgba(255, 255, 255, 0)};
--pattern-img-path: url("/static/img/pattern-white.png");
--toc-background-active: #{$gray-8};
--toc-link-color-active: #{$gray-4};
@@ -37,6 +38,7 @@ html[data-theme='dark'] {
--top-border-color: #{$color-4};
--soft-border-color: #{$gray-3};
--pattern-color: #{rgba($gray-3, 0.4)};
+ --pattern-color-2: #{rgba(0, 0, 0, 0)};
--pattern-img-path: url("/static/img/pattern-black.png");
--toc-background-active: #{$gray-3};
--toc-link-color-active: #{$gray-8};

Fix background pattern