diff options
Diffstat (limited to 'src/css/_sommaire.scss')
-rwxr-xr-x | src/css/_sommaire.scss | 166 |
1 files changed, 100 insertions, 66 deletions
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss index 15947ef..0eadd0b 100755 --- a/src/css/_sommaire.scss +++ b/src/css/_sommaire.scss @@ -1,42 +1,110 @@ .sommaire_blien { - display: inline-block; - width: 33%; - text-align: left; - color: #121311; + line-height: 1.45rem; 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:hover, a:focus { + /* Theme style */ color: #BBAABB; } } #side-bar { text-align: center; - display: block; - height: auto; - text-rendering: optimizelegibility; - box-sizing: border-box; - background: #F5F6F5; - padding-top: 10px; - - h1 { - font-family: monospace, "Helvetica Neue", Arial, sans-serif; - - /* - font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif; - */ + 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; + } + .sommaire_blien { + text-shadow: 0 1px 0 #444; + color: #F5F5F5; + a { + color: #F5F5F5; + } + } + .about { + color: #BBB; + } + } + @media (prefers-color-scheme: light) { @include lightMode; } + @media (prefers-color-scheme: dark) { @include darkMode; } + + &.light { @include lightMode; } + &.dark { @include darkMode; } + + svg { margin: 0 auto; display: block; @@ -48,12 +116,8 @@ left: 0; height: 100%; transition: left 0.5s ease-in 0.25s; - text-align: center; - /* - background: none repeat scroll 0% 0% #F5F6F5; - */ - background: #FFF; + /* Theme style */ border-right: 3px solid rgba(51, 51, 51, 0.1); &.hidden { @@ -65,6 +129,8 @@ #desc_intro { padding-left: 10px; padding-right: 10px; + + /* Theme style */ text-shadow: 2px 4px 0 #DDD; } #desc { @@ -73,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; } @@ -94,18 +157,19 @@ @keyframes typing { 0% { width: 0; - } + }; } .about_bar { 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; @@ -116,46 +180,16 @@ @media screen and (max-height: 519px) { visibility: hidden; } - padding-left: 0; position: absolute; bottom: 0px; left: 0px; + width: var(--width_panel); + ul { - position: initial; - width: 30vh; padding-left: 0; display: flex; justify-content: space-evenly; - li { - } } } } - -.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> - */ |