granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix gradient on About page for dark mode

Browse source
This commit is contained in:
Justin Edmund 2023-01-31 23:15:19 -08:00
parent 0770d0e3da
commit dc6b12fc7a
3 changed files with 66 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
components/AboutPage/index.scss
View file

@ -16,20 +16,7 @@
right: -18vw; right: -18vw;
top: $unit-4x * -1; top: $unit-4x * -1;
z-index: 1; z-index: 1;
background-image: linear-gradient( background-image: var(--hero-gradient), url('/images/about-hero.jpg');
90deg,
rgba(245, 245, 245, 1) 5%,
rgba(245, 245, 245, 0.2) 50%,
rgba(245, 245, 245, 0.2) 70%,
rgba(245, 245, 245, 1) 95%
),
linear-gradient(
rgba(245, 245, 245, 1) 5%,
rgba(245, 245, 245, 0.4) 40%,
rgba(245, 245, 245, 0.4) 78%,
rgba(245, 245, 245, 1) 95%
),
url('/images/about-hero.jpg');
@include breakpoint(tablet) { @include breakpoint(tablet) {
right: -14vw; right: -14vw;
@ -47,19 +34,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: linear-gradient( background: var(--hero-gradient-overlay);
90deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 50%,
rgba(245, 245, 245, 0) 70%,
rgba(245, 245, 245, 1) 95%
),
linear-gradient(
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 40%,
rgba(245, 245, 245, 0) 78%,
rgba(245, 245, 245, 1) 95%
);
z-index: 3; z-index: 3;
} }
} }

8
styles/themes.scss
View file

@ -135,6 +135,10 @@
--light-hover-bg: #{$light-bg-20}; --light-hover-bg: #{$light-bg-20};
--light-text: #{$light-text-10}; --light-text: #{$light-text-10};
--light-hover-text: #{$light-text-20}; --light-hover-text: #{$light-text-20};
// Gradients
--hero-gradient: #{$hero--gradient--light};
--hero-gradient-overlay: #{$hero--gradient--light--overlay};
} }
[data-theme='dark'] { [data-theme='dark'] {
@ -275,4 +279,8 @@
--light-hover-bg: #{$light-bg-00}; --light-hover-bg: #{$light-bg-00};
--light-text: #{$light-text-10}; --light-text: #{$light-text-10};
--light-hover-text: #{$light-text-00}; --light-hover-text: #{$light-text-00};
// Gradients
--hero-gradient: #{$hero--gradient--dark};
--hero-gradient-overlay: #{$hero--gradient--dark--overlay};
} }

56
styles/variables.scss
View file

@ -338,3 +338,59 @@ $hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
$duration-modal-open: 0.48s; $duration-modal-open: 0.48s;
$duration-color-fade: 0.24s; $duration-color-fade: 0.24s;
$duration-zoom: 0.18s; $duration-zoom: 0.18s;
// Gradients
$hero--gradient--light: linear-gradient(
90deg,
rgba(245, 245, 245, 1) 5%,
rgba(245, 245, 245, 0.2) 50%,
rgba(245, 245, 245, 0.2) 70%,
rgba(245, 245, 245, 1) 95%
),
linear-gradient(
rgba(245, 245, 245, 1) 5%,
rgba(245, 245, 245, 0.4) 40%,
rgba(245, 245, 245, 0.4) 78%,
rgba(245, 245, 245, 1) 95%
);
$hero--gradient--light--overlay: linear-gradient(
90deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 50%,
rgba(245, 245, 245, 0) 70%,
rgba(245, 245, 245, 1) 95%
),
linear-gradient(
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 40%,
rgba(245, 245, 245, 0) 78%,
rgba(245, 245, 245, 1) 95%
);
$hero--gradient--dark: linear-gradient(
90deg,
rgba(25, 25, 25, 1) 5%,
rgba(25, 25, 25, 0.2) 50%,
rgba(25, 25, 25, 0.2) 70%,
rgba(25, 25, 25, 1) 95%
),
linear-gradient(
rgba(25, 25, 25, 1) 5%,
rgba(25, 25, 25, 0.4) 40%,
rgba(25, 25, 25, 0.4) 78%,
rgba(25, 25, 25, 1) 95%
);
$hero--gradient--dark--overlay: linear-gradient(
90deg,
rgba(25, 25, 25, 1) 0%,
rgba(25, 25, 25, 0) 50%,
rgba(25, 25, 25, 0) 70%,
rgba(25, 25, 25, 1) 95%
),
linear-gradient(
rgba(25, 25, 25, 1) 0%,
rgba(25, 25, 25, 0) 40%,
rgba(25, 25, 25, 0) 78%,
rgba(25, 25, 25, 1) 95%
);