diff options
author | ache <ache@ache.one> | 2023-04-09 05:09:57 +0200 |
---|---|---|
committer | ache <ache@ache.one> | 2023-04-09 05:09:57 +0200 |
commit | fcafc83bf4f23ee5d7b39f6f47f0030d8f6a722a (patch) | |
tree | 5a472e29330660d8d69fc2e0de2245f9b067098d /src/css/_contenu.scss | |
parent | Reword Read the rest (diff) |
Make a real Darkmode
Diffstat (limited to 'src/css/_contenu.scss')
-rwxr-xr-x | src/css/_contenu.scss | 225 |
1 files changed, 144 insertions, 81 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; } } |