diff options
Diffstat (limited to 'src/css/_sommaire.scss')
-rwxr-xr-x | src/css/_sommaire.scss | 110 |
1 files changed, 66 insertions, 44 deletions
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss index c920bb3..0eadd0b 100755 --- a/src/css/_sommaire.scss +++ b/src/css/_sommaire.scss @@ -1,44 +1,92 @@ .sommaire_blien { line-height: 1.45rem; - color: #121311; font-size: 0.8em; font-weight: bold; - font-family: monospace, serif; - text-shadow: 0 1px 0 #DDD; - color: #686868; + + /* Theme style */ + color: #121311; + &:before { content: "/"; } a { - color: #686868; outline: none; text-decoration: none; } a:hover, a:focus { + /* Theme style */ color: #BBAABB; } } #side-bar { text-align: center; + font-family: ui-monospace, Menlo, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Cousine", Courier New, monospace, sans-serif; ul { columns: 2; list-style-type: none; padding-left: 0; } + @mixin lightMode { + background: #F5F6F5; + color: inherit; + + #logo-ache { + &:hover { + filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.4)); + } + filter: none; + } + #ache a { + text-decoration: none; + color: inherit; + &:hover { + text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); + text-decoration: underline royalblue 10%; + text-undefline-offset: 5px; + } + text-shadow: 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; color: #FFF; + #logo-ache { + &:hover { + filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.4)) invert(1); + } filter: invert(1); } + #ache a { + text-decoration: none; + color: inherit; + &:hover { + text-shadow: 0px 2px 8px rgba(255, 255, 255, 0.9); + text-decoration: underline goldenrod 10%; + text-underline-offset: 5px; + } + text-shadow: none; + } #desc_intro { text-shadow: 2px 4px 0 #333; } - .about_bar { - } .sommaire_blien { text-shadow: 0 1px 0 #444; color: #F5F5F5; @@ -50,13 +98,13 @@ 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; } - h1 { - font-family: monospace, "Helvetica Neue", Arial, sans-serif; - } svg { margin: 0 auto; display: block; @@ -69,6 +117,7 @@ height: 100%; transition: left 0.5s ease-in 0.25s; + /* Theme style */ border-right: 3px solid rgba(51, 51, 51, 0.1); &.hidden { @@ -80,6 +129,8 @@ #desc_intro { padding-left: 10px; padding-right: 10px; + + /* Theme style */ text-shadow: 2px 4px 0 #DDD; } #desc { @@ -88,12 +139,9 @@ padding-left: 15px; padding-right: 15px; font-size: 1.05em; - font-family: monospace, "Helvetica Neue", Arial, sans-serif; } .about { font-size: 0.8em; - color: #666; - font-family: monospace; align-items: center; justify-content: center; } @@ -115,12 +163,13 @@ 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; @@ -144,30 +193,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; -} -/* -<nav> -<div id="sommaire_blien">Accueil</div> -<div id="sommaire_blien">Blog</div> -<div id="sommaire_blien">Liens</div> -</nav> - */ |