From 07419c6dbacb7386b5958660ffaf35fb6e13ba7a Mon Sep 17 00:00:00 2001
From: salixor <salixor@pm.me>
Date: Fri, 28 Jun 2024 00:28:37 +0200
Subject: [PATCH] =?UTF-8?q?Retrait=20du=20cringe=20qu'est=20jQuery=20(pour?=
=?UTF-8?q?quoi=20avais-je=20utilis=C3=A9=20=C3=A7a=20=3F)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
cours-ensiie.html | 24 +-----------------------
index.html | 26 +-------------------------
lightsoff.js | 2 +-
script.js | 10 ++++++++++
styles.css | 17 ++++++++++-------
5 files changed, 23 insertions(+), 56 deletions(-)
create mode 100644 script.js
diff --git a/cours-ensiie.html b/cours-ensiie.html
index 5abeb2e..baeaa8f 100644
--- a/cours-ensiie.html
+++ b/cours-ensiie.html
@@ -136,30 +136,8 @@
</body>
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="cookies.js"></script>
<script type="text/javascript" src="lightsoff.js"></script>
-<script type="text/javascript">
-$(document).ready(function() {
- let color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
- let col_rd = color[Math.floor(Math.random() * color.length)];
-
- // Changement aléatoire de la couleur
- $("header").css("background-color", col_rd);
- $("section.cours a").css("background-color", col_rd);
-
- $("section.header_links a").hover(
- function() { $(this).css("background-color", col_rd); },
- function() { $(this).removeAttr("style"); }
- );
-
- // Changement de la couleur pour Google Chrome Mobile
- $('meta[name=theme-color]').remove();
- $('head').append('<meta name="theme-color" content="'+ col_rd +'">');
-});
-</script>
-<!--[if IE]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
+<script type="text/javascript" src="script.js"></script>
</html>
diff --git a/index.html b/index.html
index 1084a0d..68192a6 100644
--- a/index.html
+++ b/index.html
@@ -74,32 +74,8 @@
</body>
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="cookies.js"></script>
<script type="text/javascript" src="lightsoff.js"></script>
-<script type="text/javascript">
-$(document).ready(function() {
- let color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
- let col_rd = color[Math.floor(Math.random() * color.length)];
-
- // Changement aléatoire de la couleur
- $("header").css("background-color", col_rd);
- $("section.cours a").css("background-color", col_rd);
- $("section.content").css("border-color", col_rd);
- $("section.content a").css("color", col_rd);
-
- $("section.header_links a").hover(
- function() { $(this).css("background-color", col_rd); },
- function() { $(this).removeAttr("style"); }
- );
-
- // Changement de la couleur pour Google Chrome Mobile
- $('meta[name=theme-color]').remove();
- $('head').append('<meta name="theme-color" content="'+ col_rd +'">');
-});
-</script>
-<!--[if IE]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
+<script type="text/javascript" src="script.js"></script>
</html>
diff --git a/lightsoff.js b/lightsoff.js
index e0edaea..1d3e09d 100644
--- a/lightsoff.js
+++ b/lightsoff.js
@@ -1,4 +1,4 @@
-$(document).ready(function() {
+document.addEventListener("DOMContentLoaded", function() {
let lightsoff = getCookie("lightsoff") === "on";
let switcher = document.getElementsByClassName("theme_toggle")[0];
switcher.style.display = "inline-block";
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e650cf6
--- /dev/null
+++ b/script.js
@@ -0,0 +1,10 @@
+const colors = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
+const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+document.addEventListener("DOMContentLoaded", function () {
+ document.documentElement.style.setProperty("--accent-color", randomColor);
+});
+
+document
+ .querySelector('meta[name="theme-color"]')
+ .setAttribute("content", randomColor);
diff --git a/styles.css b/styles.css
index 8437e00..f0b7ecf 100644
--- a/styles.css
+++ b/styles.css
@@ -7,6 +7,10 @@
list-style: none;
}
+:root {
+ --accent-color: #444;
+}
+
.clear { clear: both; }
html, body {
@@ -98,7 +102,7 @@ section.container a::after {
}
header {
- background: #333333 url("ressources/bg_crop_kumiko.png") 90% bottom / contain no-repeat;
+ background: var(--accent-color) url("ressources/bg_crop_kumiko.png") 90% bottom / contain no-repeat;
width: 100%;
height: 200px;
color: #FFFFFF;
@@ -151,7 +155,7 @@ section.header_links a {
font-size: 12px;
text-transform: uppercase;
}
-section.header_links a:hover { background: rgba(0,0,0,0.5); }
+section.header_links a:hover { background: var(--accent-color); }
section.cours { padding: 15px; overflow: hidden; }
section.content {
@@ -159,17 +163,16 @@ section.content {
padding: 15px 20px;
line-height: 25px;
border-radius: 15px;
- border: 2px dashed #222;
+ border: 2px dashed var(--accent-color);
color: #222;
background-color: #eee;
}
-section.content a:hover {
- opacity: 0.5;
-}
+section.content a { color: var(--accent-color); }
+section.content a:hover { opacity: 0.5; }
section.cours a {
- background-color: #222;
+ background-color: var(--accent-color);
border-radius: 3px;
display: inline-block;
font-size: 14px;
--
GitLab