summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorache <ache@ache.one>2022-09-11 00:29:46 +0200
committerache <ache@ache.one>2022-09-11 00:34:17 +0200
commit5c8feeed682a1af36c5d71f78bfba9d83a618255 (patch)
tree2913884cbf13df5539b4e642789d1a5338568905
parentFix zen on first time (diff)
Implemente theme switch
-rwxr-xr-xsrc/css/_contenu.scss65
-rwxr-xr-xsrc/css/_sommaire.scss34
-rwxr-xr-xsrc/css/design.scss44
-rw-r--r--src/img/moon.svg1
-rw-r--r--src/img/sun.svg1
-rw-r--r--src/js/theme.js55
-rw-r--r--src/templates/article.tmpl1
-rw-r--r--src/templates/index.tmpl2
8 files changed, 176 insertions, 27 deletions
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 0dd4889..3ff6b90 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -34,15 +34,15 @@ article {
line-height: 1.6;
}
+
+
h1 {
font-size: 3rem;
line-height: 3rem;
- color: #605;
}
h2 {
font-size: 2rem;
line-height: 3rem;
- color: #551;
}
h3 {
font-size: 1.6rem;
@@ -67,7 +67,6 @@ article {
}
> p:first-of-type {
- color: #944040;
> img {
height: 150px;
float: right;
@@ -77,8 +76,6 @@ article {
}
}
-
-
@media #{$gt-gsm} {
ul {
line-height: 1.4;
@@ -130,8 +127,9 @@ article {
h1 h2 h3 {
line-height: initial;
}
-
-
+ h1, h2, h3, h4, h5 {
+ text-indent: -10px;
+ }
@media #{$gsm} {
margin: 0;
@@ -142,11 +140,44 @@ article {
font-size: 0.9rem;
}
}
+ @mixin lightMode {
+ h1 {
+ color: #605;
+ }
+ h2 {
+ color: #551;
+ }
+ h3 {
+ color: #660;
+ }
+ h4, h5, h6 {
+ color: black;
+ }
+ img {
+ filter: none;
+ }
+ color: initial;
+
+ > p:first-of-type {
+ color: #944040;
+ > img {
+ filter: none;
+ }
+ }
+ }
@mixin darkMode {
- h1, h2, h3, h4, h5 {
+ h1 {
+ color: #FEF;
+ }
+ h2 {
+ color: #EFE;
+ }
+ h3 {
+ color: #DED;
+ }
+ h4, h5, h6 {
color: #EFEFEF;
- text-indent: -10px;
}
img {
filter: invert(1);
@@ -160,8 +191,9 @@ article {
}
}
}
- @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
-
+ @media (prefers-color-scheme: dark) { @include darkMode; } @media (prefers-color-scheme: light) { @include lightMode; }
+ &.light{ @include lightMode; }
+ &.dark { @include darkMode; }
}
.keybs {
@@ -187,14 +219,23 @@ article {
.sidenotes {
margin: 10px 10px 0 0;
text-align: justify;
+
@media #{$tab} {
display: none;
}
+ @mixin lightMode {
+ color: #333333;
+ }
+
@mixin darkMode {
color: #eee;
}
- @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+ @media (prefers-color-scheme: dark) { @include darkMode; }
+ @media (prefers-color-scheme: light) { @include lightMode; }
+ &.light{ @include lightMode; }
+ &.dark { @include darkMode; }
+
transition: width 0.25s ease-out 0.25s;
position: relative;
max-width: 475px;
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index c920bb3..44a3b1e 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -4,13 +4,10 @@
font-size: 0.8em;
font-weight: bold;
font-family: monospace, serif;
- text-shadow: 0 1px 0 #DDD;
- color: #686868;
&:before {
content: "/";
}
a {
- color: #686868;
outline: none;
text-decoration: none;
}
@@ -27,6 +24,28 @@
list-style-type: none;
padding-left: 0;
}
+ @mixin lightMode {
+ background: #F5F6F5;
+ color: inherit;
+
+ #logo-ache {
+ filter: none;
+ }
+ #desc_intro {
+ text-shadow: 0 1px 0 #DDD;
+ }
+ .sommaire_blien {
+ text-shadow: 0 1px 0 #444;
+ color: #686868;
+ a {
+ color: #686868;
+ }
+ }
+ .about {
+ color: #666;
+ }
+ }
+
@mixin darkMode {
background: #101110;
@@ -37,8 +56,6 @@
#desc_intro {
text-shadow: 2px 4px 0 #333;
}
- .about_bar {
- }
.sommaire_blien {
text-shadow: 0 1px 0 #444;
color: #F5F5F5;
@@ -50,7 +67,11 @@
color: #BBB;
}
}
- @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+ @media (prefers-color-scheme: light) { @include lightMode; }
+ @media (prefers-color-scheme: dark) { @include darkMode; }
+
+ &.light { @include lightMode; }
+ &.dark { @include darkMode; }
@@ -92,7 +113,6 @@
}
.about {
font-size: 0.8em;
- color: #666;
font-family: monospace;
align-items: center;
justify-content: center;
diff --git a/src/css/design.scss b/src/css/design.scss
index a83ce34..8bbaa36 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -12,11 +12,17 @@ $big-screen: "screen and (min-width: 1720px)";
html {
- background: #f1f1f1;
+
+ @mixin lightMode {
+ background: #f1f1f1;
+ }
@mixin darkMode {
background: #222;
}
- @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+ @media (prefers-color-scheme: dark) { @include darkMode; }
+ @media (prefers-color-scheme: light) { @include lightMode; }
+ &.light { @include lightMode; }
+ &.dark { @include darkMode; }
}
/*
@@ -45,10 +51,6 @@ body {
#side-bar {
box-sizing: border-box;
- @mixin lightMode {
- background: #F5F6F5;
- }
- @media (prefers-color-scheme: light) { @include lightMode; } &.dark { @include lightMode; }
padding-top: 10px;
@@ -68,6 +70,8 @@ body {
}
.hide_arrow {
@media (prefers-color-scheme: dark) { filter: invert(1); }
+ @media (prefers-color-scheme: light) { filter: invert(0); }
+ &.light{ filter: invert(0); }
&.dark { filter: invert(1); }
position: fixed;
@@ -149,4 +153,30 @@ table, th, td {
}
transition: margin-left 0.25s ease-out 0.25s, grid-template-columns 0.25s ease-out 0.25s;
}
-
+#hid {
+ .moon, .sun {
+ display: none;
+ }
+ &.dark {
+ .sun {
+ display: unset;
+ }
+ }
+ &.light {
+ .moon {
+ display: unset;
+ }
+ }
+ position: fixed;
+ top: 10px;
+ right: 10vw;
+ .sun, .moon {
+ position: sticky;
+ top: 400px;
+ cursor: pointer;
+ opacity: 0.5;
+ &:hover {
+ opacity: 1;
+ }
+ }
+}
diff --git a/src/img/moon.svg b/src/img/moon.svg
new file mode 100644
index 0000000..251b499
--- /dev/null
+++ b/src/img/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg> \ No newline at end of file
diff --git a/src/img/sun.svg b/src/img/sun.svg
new file mode 100644
index 0000000..5d95560
--- /dev/null
+++ b/src/img/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#DDD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> \ No newline at end of file
diff --git a/src/js/theme.js b/src/js/theme.js
new file mode 100644
index 0000000..687574e
--- /dev/null
+++ b/src/js/theme.js
@@ -0,0 +1,55 @@
+window.addEventListener('DOMContentLoaded', () => {
+ const preferesDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ let isDark = preferesDark;
+
+ const hid = document.querySelector('#hid');
+ const html = document.querySelector('html');
+ const aside = document.querySelector('#side-bar');
+ const sidenotes = document.querySelector('.sidenotes');
+ const harr = document.querySelector('#harr');
+
+ function toogleTheme() {
+ const arg = isDark ? ['dark', 'light'] : ['light', 'dark'];
+ const theme = arg[1];
+
+ if (!hid.classList.replace(...arg)) {
+ hid.classList.add(theme);
+ }
+
+ if (!html.classList.replace(...arg)) {
+ html.classList.add(theme);
+ }
+
+ if (!aside.classList.replace(...arg)) {
+ aside.classList.add(theme);
+ }
+
+ if (!sidenotes.classList.replace(...arg)) {
+ sidenotes.classList.add(theme);
+ }
+
+ if (!harr.classList.replace(...arg)) {
+ harr.classList.add(theme);
+ }
+
+ for (const article of document.querySelectorAll('article')) {
+ if (!article.classList.replace(...arg)) {
+ article.classList.add(theme);
+ }
+ }
+
+ isDark = !isDark;
+ }
+
+ const sun = document.querySelector('.sun');
+ const moon = document.querySelector('.moon');
+
+ sun.addEventListener('click', toogleTheme);
+ moon.addEventListener('click', toogleTheme);
+
+ if (isDark) {
+ hid.classList.add('dark');
+ } else {
+ hid.classList.add('light');
+ }
+});
diff --git a/src/templates/article.tmpl b/src/templates/article.tmpl
index 6d6528d..33ce8f4 100644
--- a/src/templates/article.tmpl
+++ b/src/templates/article.tmpl
@@ -11,5 +11,6 @@
<div class="sidenotes"></div>
</div>
{{> leftPanel }}
+ <div id="hid"><div class="sun">{{{svg.sun}}}</div><div class="moon">{{{svg.moon}}}</div></div>
</body>
</html>
diff --git a/src/templates/index.tmpl b/src/templates/index.tmpl
index db117c9..230db27 100644
--- a/src/templates/index.tmpl
+++ b/src/templates/index.tmpl
@@ -1,4 +1,3 @@
-
<!DOCTYPE html>
<html lang="fr">
{{>header }}
@@ -13,5 +12,6 @@
</div>
{{/articles}}
{{> leftPanel }}
+ <div id="hid"><div class="sun">{{{svg.sun}}}</div><div class="moon">{{{svg.moon}}}</div></div>
</body>
</html>