diff options
Diffstat (limited to 'src/css/design.scss')
-rwxr-xr-x | src/css/design.scss | 128 |
1 files changed, 98 insertions, 30 deletions
diff --git a/src/css/design.scss b/src/css/design.scss index c5f1e86..d98db42 100755 --- a/src/css/design.scss +++ b/src/css/design.scss @@ -2,7 +2,7 @@ $gsm: "screen and (max-width: 768px)"; $gt-gsm: "screen and (min-width: 768px)"; $tab: "screen and (max-width: 1024px)"; $laptop: "screen and (min-width: 1024px)"; -$big-laptop: "screen and (min-width: 1400px)"; +$big-laptop: "screen and (min-width: 1520px)"; $big-screen: "screen and (min-width: 1720px)"; @import 'contenu'; @@ -12,37 +12,64 @@ $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 : <https://bugzilla.mozilla.org/show_bug.cgi?id=1712656> - -@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-thickness: 10%; + text-decoration-style: dotted; + + @mixin lightMode { + &:hover, &:focus { + text-shadow: 0 0 2px #999; + text-decoration-color: royalblue; + } + + color: #458; + &:visited { + color: #444; + } + } + @mixin darkMode { + &:hover, &:focus { + text-shadow: 0 0 2px #FFF; + text-decoration-color: goldenrod; + } + + + color: #B7B7A7; + &: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 +77,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); @@ -114,9 +139,9 @@ ache { margin-left: auto; margin-right: auto; } -img { +img, video { display: block; - margin: 0 auto; + margin: 15px 15px; max-width: 100%; } table { @@ -126,22 +151,65 @@ 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; } + +} +p code { + display: inline-block; + white-space: nowrap; +} +code { + border: 0px; + border-radius: 8px; + padding: 0 5px; + font-weight: 500; + font-family: Consolas, Liberation Mono, Monaco, Lucida Console, monospace; + + @mixin lightMode { + color: #c22222; + background: #FFF; } + @mixin darkMode { + color: red; + background: black; + } + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + + &.light { @include lightMode; } + &.dark { @include darkMode; } + + } 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 { |