diff options
Diffstat (limited to 'src/css/_contenu.scss')
| -rwxr-xr-x | src/css/_contenu.scss | 451 |
1 files changed, 396 insertions, 55 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; +} + |