From fcafc83bf4f23ee5d7b39f6f47f0030d8f6a722a Mon Sep 17 00:00:00 2001 From: ache Date: Sun, 9 Apr 2023 05:09:57 +0200 Subject: Make a real Darkmode --- src/css/_contenu.scss | 225 +++++++++++++++++++++++++++++++------------------ src/css/_sommaire.scss | 47 ++++------- src/css/_style.scss | 41 +++++---- src/css/design.scss | 105 +++++++++++++++++------ src/js/theme.js | 43 ++++++++++ 5 files changed, 306 insertions(+), 155 deletions(-) diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss index c261aff..01ecb6d 100755 --- a/src/css/_contenu.scss +++ b/src/css/_contenu.scss @@ -1,45 +1,25 @@ article { -/* - margin-left: #{"max(0px, (100vw - var(--width_panel) - 10px - 950px - 6vw - 2px - 15px)*11/24)"}; - margin-right: #{"max(0px, (100vw - var(--width_panel) - 10px - 950px - 6vw - 2px - 15px)*13/24)"}; -*/ margin: auto 0 0 0; - a { - color: #7C54CB; - text-decoration: none; - &:hover, &:focus { - text-decoration: underline; - text-decoration-style: dashed; - } - } + font-family: Nimbus sans, Cascadia code, Courier New, get a font bro, Arial; + line-height: 1.65rem; + font-size: 1.25rem; - font-family: "noto serif", 'Georgia', serif; position: relative; max-width: 950px; ; - line-height: 1.6rem; .pubdate { text-align: right; font-size: 0.75em; - color: #999; - /* - position: absolute; - top: 0; - right: 0; - margin: 55px 10px; - transform: rotate(20deg); - text-shadow: 1px 1px 0.2px green; - overflow: clip; - color: pink; - text-align: right; - */ + } ul { line-height: 1.6; } - + h1, h2, h3 { + font-family: Palatino Linotype, Bookman Old Style, get a font bro, Times; + } h1 { font-size: 3rem; @@ -52,7 +32,6 @@ article { h3 { font-size: 1.6rem; line-height: 3rem; - color: #660; } .anchor { @@ -75,10 +54,14 @@ article { > img { height: 150px; float: right; + position: relative; + top: -25px; } > picture { height: 150px; float: right; + position: relative; + top: -25px; } @media #{$gt-gsm} { margin-top: 2.5% 0; @@ -113,6 +96,11 @@ article { display: inline; } ol { + line-height: 2.5em; + @media #{$gt-gsm} { + line-height: 1.4em; + } + li { list-style-type: upper-roman; } @@ -121,7 +109,6 @@ article { } } .footnotes { - color: #504d4d; font-size: 0.8em; li { padding-bottom: 15px; @@ -130,9 +117,27 @@ article { ol p { display: inline; } + + @mixin lightMode { + color: #504d4d; + } + @mixin darkMode { + color: #E0DDDD; + } + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + &.light{ @include lightMode; } + &.dark { @include darkMode; } + + } + + blockquote { + padding: 1px 2%; + + border-left: 5px solid #ccc; } - font-size: 1.3rem; h1 h2 h3 { line-height: initial; } @@ -150,15 +155,13 @@ article { } } @mixin lightMode { - h1 { - color: #605; - } - h2 { - color: #551; + .pubDate { + color: #606060; } - h3 { - color: #660; + blockquote { + color: #504d4d; } + h4, h5, h6 { color: black; } @@ -168,7 +171,7 @@ article { color: initial; > p:first-of-type { - color: #944040; + font-weight: 2; > img { filter: none; } @@ -176,15 +179,13 @@ article { } @mixin darkMode { - h1 { - color: #FEF; - } - h2 { - color: #EFE; + .pubDate { + color: #606060; } - h3 { - color: #DED; + blockquote { + color: #E0DDDD; } + h4, h5, h6 { color: #EFEFEF; } @@ -194,27 +195,30 @@ article { color: #EFEFEF; > p:first-of-type { - color: #6bbfbf; + font-weight: 2; > img { filter: invert(0); } } } - @media (prefers-color-scheme: dark) { @include darkMode; } @media (prefers-color-scheme: light) { @include lightMode; } + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } &.light{ @include lightMode; } &.dark { @include darkMode; } } .keybs { - border: 1px solid gray; font-size: 1em; - box-shadow: 1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 2px 3px; padding: 1px 5px; white-space: nowrap; + + // Theme style + border: 1px solid gray; + box-shadow: 1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444; } .marge { @@ -235,10 +239,16 @@ article { @mixin lightMode { color: #333333; + sup { + color: black; + } } @mixin darkMode { color: #eee; + sup { + color: white; + } } @media (prefers-color-scheme: dark) { @include darkMode; } @media (prefers-color-scheme: light) { @include lightMode; } @@ -254,46 +264,54 @@ article { .sidenote { position: absolute; font-style: oblique; - font-size: 1.05rem; + font-size: 1.07rem; } } -code { - color: #a00; - background: #e2e2e2; - border: 0px; - border-radius: 8px; - padding: 0 5px; -} - -.articleList { - list-style-type: none; - font-size: 1.2em; - font-family: palatino, Times, serif; - text-indent: -65px; - position: relative; - top: -3px; - left: -60px; - - .pubYear { - color: #777; - margin: 0 10px; - } -} section.likes { display: flex; justify-content: center; + @mixin lightMode { + .likesBox { + background-color: #CDE3EC; + .likesNotes { + color: #555; + } + .icon { + .nbLikes { + color: #00324D; + } + } + } + } + @mixin darkMode { + .likesBox { + background-color: #3C3C7C; + .likesNotes { + color: #CCC; + } + .icon { + .nbLikes { + color: #F0D5AD; + } + } + } + } + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + &.light{ @include lightMode; } + &.dark { @include darkMode; } + .likesBox { padding: 20px; border-radius: 8px; - background-color: #CDE3EC; display: flex; + .likesTitle { font: monospace; - font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif; font-weight: 800; } .likesText { @@ -301,7 +319,6 @@ section.likes { } .likesNotes { font-size: 0.8em; - color: #777; &.err { color: red; } @@ -344,7 +361,6 @@ section.likes { } .nbLikes { font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif; - color: #00324D; text-align: center; position: relative; top: -10px; @@ -398,20 +414,67 @@ section.likes { font-size: 0.8em; .tag { - background-color: #E0D0C9; - color: #553; padding: 0px 8px; border-radius: 3px; + + // Theme style + + @mixin lightMode { + background-color: #DDD; + color: #333; + } + @mixin darkMode { + background-color: #444; + color: #eee; + } + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + &.light{ @include lightMode; } + &.dark { @include darkMode; } } - } + +/* Used only on tag's pages */ +.articleList { + list-style-type: none; + font-size: 1.2em; + text-indent: -65px; + + font-family: palatino, Times, serif; + + position: relative; + top: -3px; + left: -60px; + + .pubYear { + color: #777; + margin: 0 10px; + } +} + + +/* Used only on tag's pages */ .inline-tag { position: relative; top: -3px; font-size: 0.7em; - background-color: #E0D0C9; - color: #553; + background-color: #DDD; padding: 3px 8px; border-radius: 3px; margin: 0 5px; + + @mixin lightMode { + background-color: #DDD; + color: #333; + } + @mixin darkMode { + background-color: #444; + color: #eee; + } + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + &.light{ @include lightMode; } + &.dark { @include darkMode; } } diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss index 44a3b1e..641dbfe 100755 --- a/src/css/_sommaire.scss +++ b/src/css/_sommaire.scss @@ -1,9 +1,12 @@ .sommaire_blien { line-height: 1.45rem; - color: #121311; font-size: 0.8em; font-weight: bold; font-family: monospace, serif; + + /* Theme style */ + color: #121311; + &:before { content: "/"; } @@ -12,6 +15,7 @@ text-decoration: none; } a:hover, a:focus { + /* Theme style */ color: #BBAABB; } } @@ -50,6 +54,7 @@ @mixin darkMode { background: #101110; color: #FFF; + #logo-ache { filter: invert(1); } @@ -90,6 +95,7 @@ height: 100%; transition: left 0.5s ease-in 0.25s; + /* Theme style */ border-right: 3px solid rgba(51, 51, 51, 0.1); &.hidden { @@ -101,6 +107,8 @@ #desc_intro { padding-left: 10px; padding-right: 10px; + + /* Theme style */ text-shadow: 2px 4px 0 #DDD; } #desc { @@ -109,13 +117,15 @@ padding-left: 15px; padding-right: 15px; font-size: 1.05em; + font-family: monospace, "Helvetica Neue", Arial, sans-serif; } .about { font-size: 0.8em; - font-family: monospace; align-items: center; justify-content: center; + + font-family: monospace; } .about > .type_wrap { display: inline-flex; @@ -135,12 +145,14 @@ display: inline-block; width: 20%; text-align: left; - color: #121311; font-size: 0.8em; font-weight: bold; font-family: monospace, serif; - text-shadow: 0 1px 0 #DDD; margin: auto; + + /* Theme style */ + color: #121311; + text-shadow: 0 1px 0 #DDD; } #ontheweb { visibility: hidden; @@ -164,30 +176,3 @@ } } } - -.lab { - height: 200px; - width: 100%; - - @media #{$gt-gsm} { - position: absolute; - left: 0; - bottom: 0px; - } - @media screen and (max-height: 749px) { - visibility: hidden; - } -} -.lab a svg { - opacity: 0.45; -} -.lab a svg:hover { - opacity: 1; -} -/* - - */ diff --git a/src/css/_style.scss b/src/css/_style.scss index cc060fa..b28ed19 100644 --- a/src/css/_style.scss +++ b/src/css/_style.scss @@ -13,18 +13,16 @@ .qcm_item p {margin: 0; padding: 0; display: inline;} .qcm_check, .qcm_radio {padding-left: 32px;} -blockquote { - color: #504d4d; - padding: 1px 2%; - border-left: 5px solid #ccc; -} + .special-box { - background: #eee7da; margin: 12.5px 12.5px; - padding: 10px 0 10px 95px; - color: #424242; + padding: 10px 0 10px 95px; min-height: 60px; + + /* Theme style */ + background: #eee7da; + color: #424242; } .special-box:before{ content: ""; @@ -35,6 +33,7 @@ blockquote { margin: 0 0 -48px -70px; } @mixin box($name, $bg) { + /* Theme style */ .#{$name} { background: $bg; padding-right: 4%; @@ -47,6 +46,7 @@ blockquote { background-repeat: no-repeat; } } + @include box('information', #daeaee); @include box('comment', #eea); @include box('attention', #eee7da); @@ -55,9 +55,11 @@ blockquote { @include box('bad', #eaa); .secret { - background: #eee; padding: 10px 0 10px 15px; min-height: 20px; + + /* Theme style */ + background: #eee; } .hiden_block_quote { display: none; @@ -66,12 +68,14 @@ blockquote { margin-top: 5px; } kbd { - background-color: #f8f6ea; padding: 2px 6px; border-radius: 3px; - border: 1px solid #e0dab6; border-bottom-width: 3px; + + /* Theme style */ text-shadow: 0 1px 0 #fff; + background-color: #f8f6ea; + border: 1px solid #e0dab6; color: #5e551f; } .view { @@ -89,19 +93,22 @@ kbd { font-family : inherit; font-size : 1em; cursor : pointer; + > div { width : 40px; height : 24px; - background : #c0c0c0 url('image.png') no-repeat center center; line-height : 24px; - border : 1px solid rgba(27, 31, 35, 0.2); border-radius : 3px; font-size: 12px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + /* Theme style */ + border : 1px solid rgba(27, 31, 35, 0.2); + background : #c0c0c0 url('image.png') no-repeat center center; color: #24292e; background-color: #eff3f6; background-image: linear-gradient(to top, #fafbfc 0%, #eff3f6 90%); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + } > div > div { font-weight: bold; @@ -112,12 +119,16 @@ kbd { } @mixin state($border, $border-c) { - border: 2px solid $border; border-radius: 2px; outline: none; border-color: $border-c; + + /* Theme style */ box-shadow: 0 0 5px $border-c; + border: 2px solid $border; } + +/* Theme style */ .valid { @include state(#c0392b, #9F9); } diff --git a/src/css/design.scss b/src/css/design.scss index c5f1e86..ee6a32e 100755 --- a/src/css/design.scss +++ b/src/css/design.scss @@ -12,37 +12,63 @@ $big-screen: "screen and (min-width: 1720px)"; html { - @mixin lightMode { background: #f1f1f1; } @mixin darkMode { background: #222; } - @media (prefers-color-scheme: dark) { @include darkMode; } + + @media (prefers-color-scheme: dark) { @include darkMode; } @media (prefers-color-scheme: light) { @include lightMode; } + &.light { @include lightMode; } &.dark { @include darkMode; } } -/* - Disabled because of firefx bugs : - -@media (prefers-color-scheme: dark) { - html{background:#282328;filter:invert(0.98);} - img,svg,.cp_embed_wrapper,pre{filter:invert(0.8);} - #logo-ache {filter:invert(0);} -} -*/ - body { margin: 0; line-height: 1.35; - color: #333333; word-wrap: break-word; font-size: 16px; + a { + text-decoration: underline; + text-decoration-style: dotted; + + @mixin lightMode { + &:hover, &:focus { + text-shadow: 0 0 2px #999; + } + + color: #458; + text-decoration-color: #37373780; + &:visited { + color: #444; + } + } + @mixin darkMode { + &:hover, &:focus { + text-shadow: 0 0 2px #FFF; + } + + + color: #B7B7A7; + text-decoration-color: #C9C9C980; + &:visited { + color: #C7C7C7; + } + } + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + + &.light { @include lightMode; } + &.dark { @include darkMode; } + } + --width_panel: 100%; + --width_panel_bis: 0px; @media #{$gt-gsm} { --width_panel: 290px; --width_panel_bis: 290px; @@ -50,10 +76,8 @@ body { #side-bar { box-sizing: border-box; - padding-top: 10px; - text-rendering: optimizelegibility; width: var(--width_panel); left: calc(var(--width_panel_bis) - var(--width_panel); @@ -116,7 +140,7 @@ ache { } img { display: block; - margin: 0 auto; + margin: 15px 15px; max-width: 100%; } table { @@ -126,22 +150,47 @@ table { p { display: inline; } - th { - background-color: lightblue; + + @mixin lightMode { + th { + background-color: lightblue; + } + tr:nth-child(even) { + background-color: #DEDEFF99; + } + } + @mixin darkMode { + th { + background-color: darkslategrey; + } + + tr:nth-child(even) { + background-color: darkslateblue; + } } + + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + + &.light { @include lightMode; } + &.dark { @include darkMode; } + +} +code { + display: inline-block; + white-space: nowrap; + border: 0px; + border-radius: 8px; + padding: 0 5px; + + color: #c22222; + background: #FFF; } table, th, td { - border: 1px solid #dfe2e5; padding: 7px 13px; -} -.suite { - color: #686868; - outline: none; - text-decoration: none; - font-size: 0.6em; - font-weight: bold; - font-family: monospace, serif; - text-shadow: 0 1px 0 #DDD; + + border: 1px solid #dfe2e5; } .decal_panel { diff --git a/src/js/theme.js b/src/js/theme.js index fd0b755..4ac40ea 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -8,7 +8,11 @@ window.addEventListener('DOMContentLoaded', () => { const html = document.querySelector('html'); const aside = document.querySelector('#side-bar'); const sidenotes = document.querySelector('.sidenotes'); + const footnotes = document.querySelector('.footnotes'); const harr = document.querySelector('#harr'); + const links = document.querySelectorAll('a'); + const likes = document.querySelectorAll('.likes'); + const tables = document.querySelectorAll('table'); if (storageTheme === 'dark' || storageTheme === 'light') { const theme = storageTheme; @@ -19,6 +23,24 @@ window.addEventListener('DOMContentLoaded', () => { sidenotes.classList.add(theme); harr.classList.add(theme); + if(footnotes) { + footnotes.classList.add(theme); + } + + for (let link of links) { + link.classList.add(theme); + } + for (let likeBox of likes) { + likeBox.classList.add(theme); + } + for (let table of tables) { + table.classList.add(theme); + } + + for (const article of document.querySelectorAll('article')) { + article.classList.add(theme); + } + for (const article of document.querySelectorAll('article')) { article.classList.add(theme); } @@ -43,11 +65,32 @@ window.addEventListener('DOMContentLoaded', () => { if (!sidenotes.classList.replace(...arg)) { sidenotes.classList.add(theme); } + if (footnotes && !footnotes.classList.replace(...arg)) { + footnotes.classList.add(theme); + } + + if (!harr.classList.replace(...arg)) { harr.classList.add(theme); } + for (let link of links) { + if (!link.classList.replace(...arg)) { + link.classList.add(theme); + } + } + for (let table of tables) { + if (!table.classList.replace(...arg)) { + table.classList.add(theme); + } + } + for (let like of likes) { + if (!like.classList.replace(...arg)) { + like.classList.add(theme); + } + } + for (const article of document.querySelectorAll('article')) { if (!article.classList.replace(...arg)) { article.classList.add(theme); -- cgit v1.2.3