frog-collective/frog-website
frog-collective
/
frog-website
5
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

feat: use background image instead of color gradient

This commit is contained in:
Corentin 2024-05-22 23:57:43 +02:00
parent 4c44c3df0c
commit 308fdf968b
5 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/css/variables.scss
View File

@ -1,15 +1,17 @@
$mobile-breakpoint: "max-width: 768px"; $mobile-breakpoint: "max-width: 768px";
:root { :root {
--background-dark: url("/img/background-black-red.jpg");
--color-text: #161616; --color-text: #161616;
--color-primary: #DB2937; --color-primary: #DB2937;
--color-on-primary: white; --color-on-primary: white;
--color-accent: #161616; --color-accent: #303030;
--color-on-accent: #f2a6ac; --color-on-accent: #f2a6ac;
--color-dark: #303030; --color-dark: #161616;
--color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%); --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
--color-on-dark: #f2a6ac; --color-on-dark: #f2a6ac;

6
src/lib/nav.scss
View File

@ -25,7 +25,7 @@
display: grid; display: grid;
grid-template-columns: auto minmax(0px, var(--width)) auto; grid-template-columns: auto minmax(0px, var(--width)) auto;
box-shadow: var(--elevation-high); box-shadow: var(--elevation-high);
background: var(--color-dark-gradient); background: var(--background-dark);
&--content { &--content {
grid-area: 1 / 2 / 2 / 3; grid-area: 1 / 2 / 2 / 3;
@ -47,7 +47,7 @@
width: var(--desktop-logo-width); width: var(--desktop-logo-width);
padding: var(--space-small); padding: var(--space-small);
background: var(--color-dark); background: var(--background-dark);
transition: top var(--transitions-duration) ease-out; transition: top var(--transitions-duration) ease-out;
@media($mobile-breakpoint) { @media($mobile-breakpoint) {
@ -68,7 +68,7 @@
// Override the transparent background and box-shadow: none until the // Override the transparent background and box-shadow: none until the
// docking transition ends (see nav.js) // docking transition ends (see nav.js)
&__docking &--logo { &__docking &--logo {
background: var(--color-dark); background: var(--background-dark);
box-shadow: var(--elevation-high); box-shadow: var(--elevation-high);
} }

2
src/pages/index/footer.scss
View File

@ -1,5 +1,5 @@
.footer { .footer {
background-image: url("/img/background-black-red.jpg"); background: var(--background-dark);
color: white; color: white;
font-size: 0.925rem; font-size: 0.925rem;

2
src/pages/index/games.scss
View File

@ -16,7 +16,7 @@
@extend h2; @extend h2;
margin: 0; margin: 0;
padding: var(--space-small); padding: var(--space-small);
background: var(--color-dark-gradient); background: var(--background-dark);
color: var(--color-on-dark); color: var(--color-on-dark);
} }

2
src/pages/index/news.scss
View File

@ -10,7 +10,7 @@
&--header { &--header {
display: flex; display: flex;
color: var(--color-on-dark); color: var(--color-on-dark);
background: var(--color-dark); background: var(--background-dark);
padding: var(--space-small) var(--space-medium); padding: var(--space-small) var(--space-medium);
align-items: center; align-items: center;
gap: var(--space-small); gap: var(--space-small);