feat: use background image instead of color gradient

src/lib/css/variables.scss

@@ -1,15 +1,17 @@
 $mobile-breakpoint: "max-width: 768px";
 
 :root {
+    --background-dark: url("/img/background-black-red.jpg");
+
     --color-text: #161616;
 
     --color-primary: #DB2937;
     --color-on-primary: white;
 
-    --color-accent: #161616;
+    --color-accent: #303030;
     --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-on-dark: #f2a6ac;
 

src/lib/nav.scss

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

src/pages/index/footer.scss

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

src/pages/index/games.scss

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

src/pages/index/news.scss

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