diff options
Diffstat (limited to 'src/css/_contenu.scss')
-rwxr-xr-x | src/css/_contenu.scss | 408 |
1 files changed, 332 insertions, 76 deletions
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss index 3aa56d1..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; + margin: 0.5rem 0; } h2 { - font-size: 2rem; + font-size: 1.6rem; line-height: 3rem; } h3 { - font-size: 1.6rem; + font-size: 1.3rem; + line-height: 3rem; + } + h4 { + font-size: 1.1rem; line-height: 3rem; - color: #660; } .anchor { @@ -69,11 +64,20 @@ article { > p:first-of-type { > 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; @@ -82,7 +86,7 @@ article { @media #{$gt-gsm} { ul { - line-height: 1.4; + line-height: 1.5; } float: none; @@ -104,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; } @@ -116,7 +132,6 @@ article { } } .footnotes { - color: #504d4d; font-size: 0.8em; li { padding-bottom: 15px; @@ -125,9 +140,27 @@ 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; } @@ -144,16 +177,20 @@ article { font-size: 0.9rem; } } - @mixin lightMode { - h1 { - color: #605; + @media #{$big-laptop} { + pre code { + width: 110%; + margin: 0 -10%; } - h2 { - color: #551; + } + @mixin lightMode { + .pubDate { + color: #606060; } - h3 { - color: #660; + blockquote { + color: #504d4d; } + h4, h5, h6 { color: black; } @@ -163,53 +200,65 @@ article { color: initial; > p:first-of-type { - color: #944040; - > img { + > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] { filter: none; } } } @mixin darkMode { - h1 { - color: #FEF; + .pubDate { + color: #606060; } - h2 { - color: #EFE; - } - h3 { - color: #DED; + blockquote { + color: #E0DDDD; } + h4, h5, h6 { color: #EFEFEF; } - 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; } @media (prefers-color-scheme: light) { @include lightMode; } + @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 { @@ -221,7 +270,7 @@ article { } } .sidenotes { - margin: 10px 10px 0 0; + margin: 10px 10px 0 10%; text-align: justify; @media #{$tab} { @@ -230,10 +279,16 @@ article { @mixin lightMode { color: #333333; + sup { + color: black; + } } @mixin darkMode { color: #eee; + sup { + color: white; + } } @media (prefers-color-scheme: dark) { @include darkMode; } @media (prefers-color-scheme: light) { @include lightMode; } @@ -249,23 +304,202 @@ article { .sidenote { position: absolute; font-style: oblique; - font-size: 1.05rem; + font-size: 0.8rem; + } +} + +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; + } + } } } -code { - color: #a00; - background: #e2e2e2; - border: 0px; - border-radius: 8px; - padding: 0 5px; +.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; - font-family: palatino, Times, serif; text-indent: -65px; + font-family: palatino, Times, serif; + position: relative; top: -3px; left: -60px; @@ -276,26 +510,48 @@ code { } } -.tags { - display: flex; - gap: 10px; - flex-flow: row-reverse; - font-size: 0.8em; - .tag { - background-color: #E0D0C9; - color: #553; - padding: 0px 8px; - border-radius: 3px; - } -} +/* Used only on tag's pages */ .inline-tag { position: relative; top: -3px; font-size: 0.7em; - background-color: #E0D0C9; - color: #553; + 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; +} + |