From 82a2744d8498a10b14db89fb3e1543abe19b53e7 Mon Sep 17 00:00:00 2001
From: Hactarus <859868+Hactarus@users.noreply.github.com>
Date: Tue, 14 Mar 2023 14:09:29 +0100
Subject: [PATCH] Fix(dark theme): typo

---
 assets/css/{datk_theme.css => dark_theme.css} |  0
 assets/css/style_hactarus.css                 | 72 +++++++++++++------
 index.html                                    |  7 +-
 3 files changed, 54 insertions(+), 25 deletions(-)
 rename assets/css/{datk_theme.css => dark_theme.css} (100%)

diff --git a/assets/css/datk_theme.css b/assets/css/dark_theme.css
similarity index 100%
rename from assets/css/datk_theme.css
rename to assets/css/dark_theme.css
diff --git a/assets/css/style_hactarus.css b/assets/css/style_hactarus.css
index 58876ca..e35e6d8 100644
--- a/assets/css/style_hactarus.css
+++ b/assets/css/style_hactarus.css
@@ -1,16 +1,26 @@
 /* Navigation */
 body {
-    margin-top: 5vh;
-}
-header > nav {
-        position: fixed;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 1030;
 }
 
-nav > ul {
+header  {
+    height: 5vh;
+}
+header > nav {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 5vh;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border: none;
+    cursor: pointer;
+    z-index: 2;
+    background-color: var(--color-bg-head);
+    color: var(--color-link);
+}
+
+nav>ul {
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -18,7 +28,7 @@ nav > ul {
     justify-content: space-around;
 }
 
-nav > ul > li {
+nav>ul>li {
     flex: auto;
 }
 
@@ -27,34 +37,34 @@ section {
 }
 
 h2 {
-  background-color: var(--color-bg);
-  color: var(--color-txt);
+    background-color: var(--color-bg);
+    color: var(--color-txt);
 }
 
 /* Decorations */
 .strip {
     box-sizing: border-box;
-    width: 90%;
+    display: block;
+    width: 100%;
     height: 4em;
     z-index: -1;
-    position: absolute;
-    margin-left: -19px;
+    position: fixed;
     background-color: #FF00C7;
-
+    overflow: hidden;
 }
 
-.strip>.strip--1 {
-    top: 55em;
+.strip--1 {
+    top: 20vh;
     transform: skew(30deg) rotate(30deg);
 }
 
-.strip>.strip--2 {
-    top: 82em;
+.strip--2 {
+    top: 50vh;
     transform: skew(-30deg) rotate(-30deg);
 }
 
-.strip>.strip--3 {
-    top: 109em;
+.strip--3 {
+    top: 90vh;
     transform: skew(30deg) rotate(30deg);
 }
 
@@ -64,4 +74,22 @@ h2 {
     background-size: cover;
     filter: invert(1);
     margin-top: -19em;
+}
+
+.fond {
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding-bottom: 100%;
+    padding-top: 18vh;
+    background-image: url(../images/background.png);
+    background-color: var(--color-bg-head);
+    filter: contrast(130%);
+    text-align: center;
+}
+
+.highlight {
+    background: linear-gradient(120deg, #ff00e329 0%, #74ff0069 100%);
+    background-repeat: no-repeat;
+    background-size: 100% 20%;
+    background-position: 0 60%;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9c3d112..a7f48dd 100644
--- a/index.html
+++ b/index.html
@@ -32,14 +32,15 @@
     <!-- <link rel="stylesheet" href="assets/css/style.css"> -->
     <link rel="stylesheet" href="assets/css/imports.css">
     <link rel="stylesheet" href="assets/css/style_hactarus.css">
-    <link rel="stylesheet" media='prefers-color-scheme: dark' href="assets/css/dark_theme.css" />
-    <link rel="stylesheet" media='prefers-color-scheme: light' href="assets/css/light_theme.css" />
+    <link rel="stylesheet" media='(prefers-color-scheme: dark)' href="assets/css/dark_theme.css" />
+    <link rel="stylesheet" media='(prefers-color-scheme: light)' href="assets/css/light_theme.css" />
     <!-- 
     <link rel="stylesheet" media='screen and (min-width: 750px)' href="assets/css/750_phone.css" />
     <link rel="stylesheet" media='screen and (min-width: 800px)' href="assets/css/800_tablet.css" />
     <link rel="stylesheet" media='screen and (max-width: 1024px)' href="assets/css/1024_pc.css" /> -->
 
     <script src="assets/js/app.js" defer></script>
+    <script src="assets/js/theme.js" defer></script>
 </head>
 
 <body data-theme="light">
@@ -77,7 +78,7 @@
                     <a href="#integration">Intégration</a>
                 </li>
                 <li>
-                    <button class="js-theme-trigger" alt="theme switcher">
+                    <button id="theme-toggle" class="js-theme-trigger" alt="theme switcher">
                         <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
                             clip-rule="evenodd">
                             <path