feat: slightly reskin website to better fit company visual

src/lib/css/controls.scss

@@ -1,7 +1,7 @@
 %button {
-    --background: var(--color-accent);
-    --background-hover: var(--background);
-    --color: var(--color-on-accent);
+    --background: var(--color-dark);
+    --background-hover: var(--color-primary);
+    --color: var(--color-on-primary);
 
     border-radius: var(--border-radius-small);
     padding: var(--space-small) var(--space-medium);

src/lib/css/variables.scss

@@ -2,20 +2,16 @@ $mobile-breakpoint: "max-width: 768px";
 
 :root {
     --background-dark: url("/img/background-black-red.jpg");
+    --background-red: url("/img/background-red.jpg");
 
     --color-text: #161616;
+    --color-surface: #ffffff;
 
     --color-primary: #DB2937;
-    --color-on-primary: white;
-
-    --color-accent: #303030;
-    --color-on-accent: #EA8189;
+    --color-on-primary: #ffffff;
 
     --color-dark: #161616;
-    --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
-    --color-on-dark: #E35965;
-
-    --color-surface: #fff3f3;
+    --color-on-dark: #ffffff;
 
     --color-link: var(--color-primary);
 

src/lib/nav.scss

@@ -1,7 +1,7 @@
 %nav-button {
     @extend %button;
     --background: transparent;
-    --background-hover: var(--color-accent);
+    --background-hover: var(--color-primary);
 }
 
 .nav-bar {
@@ -116,7 +116,7 @@
         width: 2px;
         margin: 0 var(--space-small);
 
-        background: var(--color-on-accent);
+        background: var(--color-on-primary);
 
         @media($mobile-breakpoint) {
             display: none;
@@ -162,7 +162,7 @@
             margin: 5px 0;
 
             display: block;
-            background-color: var(--color-on-accent);
+            background-color: var(--color-on-primary);
             transition: all 0.3s ease-out;
         }
     }

src/pages/index/games.scss

@@ -3,7 +3,7 @@
 
     display: flex;
     flex-direction: column;
-    background: var(--color-surface);
+    background: transparent;
     padding: 0;
 
     &--picture-wrapper {
@@ -16,8 +16,11 @@
         @extend h2;
         margin: 0;
         padding: var(--space-small);
-        background: var(--background-dark);
+        background: var(--background-red);
         color: var(--color-on-dark);
+        padding: var(--space-small) var(--space-xlarge);
+        font-family: 'Knewave';
+        font-size: 40px;
     }
 
     &--description {

src/pages/index/news.html

@@ -4,7 +4,7 @@
   gettext("News"),
   "news",
   "/img/section-news.png",
-  title_picture_offset="60px",
+  title_picture_offset="0px",
   title_color = "var(--color-primary)"
 ) %}
   {% for news in glob("news/*.md") | map('markdown') %}

src/pages/index/news.scss

@@ -10,10 +10,12 @@
     &--header {
         display: flex;
         color: var(--color-on-dark);
-        background: var(--background-dark);
+        background: var(--background-red);
         padding: var(--space-small) var(--space-medium);
         align-items: center;
         gap: var(--space-small);
+        font-family: 'Knewave';
+        font-size: 24px;
 
         @media($mobile-breakpoint) {
             flex-direction: column;
@@ -37,6 +39,8 @@
     &--title {
         flex-grow: 1;
         margin: 0;
+        font-family: 'Knewave';
+        font-size: 32px;
 
         @media($mobile-breakpoint) {
             text-align: center;