From f25f3f47f67f81038c5afedc72a28c01556bc071 Mon Sep 17 00:00:00 2001 From: Rocher Date: Mon, 23 Sep 2024 16:58:59 +0200 Subject: [PATCH] =?UTF-8?q?theme=20sombre=20+=20bandeau=20100%=20termin?= =?UTF-8?q?=C3=A9=20(50/50=20avec=20kentin)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/favorite.html | 29 ++++++++++++++++ style/style.css | 80 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 pages/favorite.html create mode 100644 style/style.css diff --git a/pages/favorite.html b/pages/favorite.html new file mode 100644 index 0000000..022219a --- /dev/null +++ b/pages/favorite.html @@ -0,0 +1,29 @@ + + + + + + Favorites + + + + + +
+
+
+ coeur + toggle theme + quizz +
+ +
+ user +
+
+
+

Wiki Fantasy

+ + diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..4168733 --- /dev/null +++ b/style/style.css @@ -0,0 +1,80 @@ +/* Styles généraux */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Header */ +.header { + display: flex; + position: fixed; + background-color: #000000; + right: 0; + top: 0; + width: 100%; + text-align: center; + padding: 20px; +} + +.nav { + display: flex; + align-items: center; + vertical-align: center; + gap: 30px; + width: 40%; +} + +.logo { + display: flex; + align-items: center; + justify-content: center; + width: 20%; +} + +.user { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + vertical-align: center; + gap: 30px; + width: 40%; +} + +/* Mode sombre */ +body.dark-mode { + background-color: #120B1D; + color: #ffffff; +} + +body.dark-mode .header { + background-color: #000; +} + +body.dark-mode img { + filter: invert(0%); +} + +body.dark-mode .nav img:hover { + filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%); +} + + +/* Mode clair */ +body.light-mode { + background-color: #ffffff; + color: #000000; +} + +body.light-mode .header { + background-color: #F7F7EB; +} + +body.light-mode img { + filter: invert(100%); +} + +body.light-mode .nav img:hover { + filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%); +} \ No newline at end of file