diff options
Diffstat (limited to 'src/css')
| -rwxr-xr-x | src/css/_contenu.scss | 451 | ||||
| -rwxr-xr-x | src/css/_sommaire.scss | 110 | ||||
| -rw-r--r-- | src/css/_style.scss | 66 | ||||
| -rwxr-xr-x | src/css/design.scss | 168 |
4 files changed, 640 insertions, 155 deletions
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss index 53c131f..ee809ca 100755 --- a/src/css/_contenu.scss +++ b/src/css/_contenu.scss @@ -1,53 +1,48 @@ 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, Fira Code, Helvetica, get a font bro, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + line-height: 1.5rem; + font-size: 1rem; - font-family: "noto serif", 'Georgia', serif; position: relative; - max-width: 950px; ; - line-height: 1.6rem; + max-width: 950px; .pubdate { - 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; + line-height: 1.65; } ul { line-height: 1.6; } + h1, h2, h3 { + font-family: Palatino Linotype, Bookman Old Style, Fira Code, get a font bro, Times; + } + + h1, h2, h3, h4 { + margin: 2.5rem 0 1rem 0; + } + p { + margin: 0.5rem 0; + } + h1 { - font-size: 3rem; + font-size: 2rem; line-height: 3rem; - color: #605; + margin: 0.5rem 0; } h2 { - font-size: 2rem; + font-size: 1.6rem; line-height: 3rem; - color: #551; } h3 { - font-size: 1.6rem; + font-size: 1.3rem; + line-height: 3rem; + } + h4 { + font-size: 1.1rem; line-height: 3rem; - color: #660; } .anchor { @@ -67,21 +62,31 @@ article { } > p:first-of-type { - color: #944040; > img { height: 150px; + width: 150px; float: right; + position: relative; + top: -25px; + } + > img:not([src$="-inv.svg"]) { + filter: revert; + } + > picture { + height: 150px; + width: 150px; + float: right; + position: relative; + top: -25px; } @media #{$gt-gsm} { margin-top: 2.5% 0; } } - - @media #{$gt-gsm} { ul { - line-height: 1.4; + line-height: 1.5; } float: none; @@ -103,10 +108,22 @@ article { transition: margin-left 0.5s ease-out 0.25s; } } + li.task-list-item { + list-style-type: "- "; + input[type='checkbox'] { + width: 20px; + height: 20px; + } + } li p { display: inline; } - ol { + #sommaire + ol, #table-of-contents + ol { + line-height: 1.6rem; + @media #{$gt-gsm} { + line-height: 1.4em; + } + li { list-style-type: upper-roman; } @@ -115,7 +132,6 @@ article { } } .footnotes { - color: #504d4d; font-size: 0.8em; li { padding-bottom: 15px; @@ -124,14 +140,33 @@ 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; } - - + h1, h2, h3, h4, h5 { + text-indent: -10px; + } @media #{$gsm} { margin: 0; @@ -142,38 +177,88 @@ article { font-size: 0.9rem; } } + @media #{$big-laptop} { + pre code { + width: 110%; + margin: 0 -10%; + } + } + @mixin lightMode { + .pubDate { + color: #606060; + } + blockquote { + color: #504d4d; + } + + h4, h5, h6 { + color: black; + } + img { + filter: none; + } + color: initial; + + > p:first-of-type { + > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] { + filter: none; + } + } + } @mixin darkMode { - h1, h2, h3, h4, h5 { + .pubDate { + color: #606060; + } + blockquote { + color: #E0DDDD; + } + + h4, h5, h6 { color: #EFEFEF; - text-indent: -10px; } - img { + img:not(.no-dark) { filter: invert(1); } color: #EFEFEF; > p:first-of-type { - color: #6bbfbf; - > img { + > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] { filter: invert(0); } } } - @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; } + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + &.light{ @include lightMode; } + &.dark { @include darkMode; } + + iframe, img, div, video, svg, image { + border: none; + margin: 0 auto; + @media #{$big-laptop} { + &.big { + width: 118%; + max-width: 118%; + margin: 0 -10%; + } + } + } } .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 { @@ -185,16 +270,31 @@ article { } } .sidenotes { - margin: 10px 10px 0 0; + margin: 10px 10px 0 10%; text-align: justify; + @media #{$tab} { display: none; } + @mixin lightMode { + color: #333333; + sup { + color: black; + } + } + @mixin darkMode { color: #eee; + sup { + color: white; + } } - @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; } + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + &.light{ @include lightMode; } + &.dark { @include darkMode; } + transition: width 0.25s ease-out 0.25s; position: relative; max-width: 475px; @@ -204,13 +304,254 @@ article { .sidenote { position: absolute; font-style: oblique; - font-size: 1.05rem; + font-size: 0.8rem; } } -code { - color: #a00; - background: #e2e2e2; - border: 0px; - border-radius: 8px; - padding: 0 5px; + +section.likes { + display: flex; + justify-content: center; + margin: 3rem 0 1rem 0; + + @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; + display: flex; + + + .likesTitle { + font: monospace; + font-weight: 800; + } + .likesText { + font-size: 0.8em; + } + .likesNotes { + font-size: 0.8em; + &.err { + color: red; + } + } + + + .layout { + display: flex; + align-items: center; + .icon { + fill: transparent; + stroke: pink; + stroke-width: 20; + cursor: pointer; + position: relative; + svg { + overflow: visible; + width: 10rem; + } + + path { + stroke-dashoffset: 0; + stroke-dasharray: 1550; + transform-origin: center; + } + + .hear-main { + z-index: 2; + } + .heart-background { + position: absolute; + left: 0; + right: 0; + z-index: 1; + stroke: none; + } + .heart-main path.anim { + animation: stroke-animation 1.5s ease-in-out forwards; + } + + .heart-main ~ .heart-background path.anim-click { + animation: fade-animation 0.35s ease-in-out forwards; + } + .nbLikes { + font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif; + text-align: center; + position: relative; + top: -10px; + height: 0; + } + } + } + + @keyframes stroke-animation { + 0% { + fill: transparent; + transform: scale(1); + } + 30% { + fill: pink; + transform: scale(1.25); + } + 50% { + transform: scale(1); + } + 100% { + stroke-dashoffset: 0; + fill: pink; + } + } + + @keyframes fade-animation { + 0% { + fill: transparent; + transform: scale(1); + } + 13% { + fill: lightpink; + transform: scale(1.2); + opacity: 1; + } + 66% { + opacity: 0.8; + } + 100% { + transform: scale(2); + opacity: 0; + } + } + } } +.alt-lang { + a { + padding-right: 20px; + } + font-size: 1.15rem; + text-transform: lowercase; + font-weight: bolder; + position: relative; + top: -3px; + font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif; +} + +.tags { + display: flex; + gap: 10px; + flex-flow: row-reverse; + flex-wrap: wrap; + font-size: 1rem; + line-height: 1.65; + + .tag { + 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: #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; } +} + + +video::cue { + background-position: top; + background-origin: border-box; + position: 90%; +} + +video::cue(.back) { + font-style: oblique; + opacity: 0.85; + font-size: 0.7em; + line-height: 0.9; + padding-bottom: 5em; +} + +hr { + margin: 2.5rem 0; +} + 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> - */ diff --git a/src/css/_style.scss b/src/css/_style.scss index ac47ea6..060fe8f 100644 --- a/src/css/_style.scss +++ b/src/css/_style.scss @@ -13,18 +13,19 @@ .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; -} + +details { + color: #424242; +} .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,28 +36,44 @@ blockquote { margin: 0 0 -48px -70px; } @mixin box($name, $bg) { + /* Theme style */ .#{$name} { background: $bg; padding-right: 4%; padding-top: 2%; font-family: monospace, serif; - font-size: 14px; - &:before { - background-image: url("/s/imgM/ic_" + $name + "_black_48px.svg"); - } + font-size: 1rem; + + background-image: url("/s/imgM/ic_" + $name + "_black_48px.svg"); + background-position: 25px center; + background-repeat: no-repeat; } } + @include box('information', #daeaee); -@include box('comment', #eea); +@include box('note', #bed2ff); @include box('attention', #eee7da); @include box('question', #e2daee); @include box('good', #aea); @include box('bad', #eaa); +details { + background-color: lightyellow; + border-radius: 20px; + margin: 40px; + padding: 25px; + + summary { + cursor: pointer; + } +} + .secret { - background: #eee; padding: 10px 0 10px 15px; min-height: 20px; + + /* Theme style */ + background: #eee; } .hiden_block_quote { display: none; @@ -65,12 +82,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 { @@ -88,19 +107,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; @@ -111,12 +133,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 a83ce34..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,31 +12,64 @@ $big-screen: "screen and (min-width: 1720px)"; html { - background: #f1f1f1; + @mixin lightMode { + background: #f1f1f1; + } @mixin darkMode { background: #222; } - @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; } -} -/* - Disabled because of firefx bugs : <https://bugzilla.mozilla.org/show_bug.cgi?id=1712656> + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } -@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);} + &.light { @include lightMode; } + &.dark { @include darkMode; } } -*/ 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; @@ -44,14 +77,8 @@ body { #side-bar { box-sizing: border-box; - - @mixin lightMode { - background: #F5F6F5; - } - @media (prefers-color-scheme: light) { @include lightMode; } &.dark { @include lightMode; } padding-top: 10px; - text-rendering: optimizelegibility; width: var(--width_panel); left: calc(var(--width_panel_bis) - var(--width_panel); @@ -63,13 +90,13 @@ body { transition: margin-left 0.25s ease-out 0.25s; } } -#harr { - cursor: pointer; -} .hide_arrow { @media (prefers-color-scheme: dark) { filter: invert(1); } + @media (prefers-color-scheme: light) { filter: invert(0); } + &.light{ filter: invert(0); } &.dark { filter: invert(1); } + cursor: pointer; position: fixed; display: none; top: 30%; @@ -112,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 { @@ -124,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 { @@ -149,4 +219,30 @@ table, th, td { } transition: margin-left 0.25s ease-out 0.25s, grid-template-columns 0.25s ease-out 0.25s; } - +#hid { + .moon, .sun { + display: none; + } + &.dark { + .sun { + display: unset; + } + } + &.light { + .moon { + display: unset; + } + } + position: fixed; + top: 10px; + right: 10vw; + .sun, .moon { + position: sticky; + top: 400px; + cursor: pointer; + opacity: 0.5; + &:hover { + opacity: 1; + } + } +} |