summaryrefslogtreecommitdiff
path: root/src/css/_contenu.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/_contenu.scss')
-rwxr-xr-xsrc/css/_contenu.scss581
1 files changed, 479 insertions, 102 deletions
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index f9f81c9..ee809ca 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -1,56 +1,102 @@
article {
- margin-right: 2%;
- margin-left: 3%;
- float: left;
- width: 83%;
- background: #FFF;
- margin-bottom: 2.5%;
- padding-right: 0;
- padding-left: 0;
- padding: 1.6em 1.6em;
- font-family: Merriweather, "Liberation Serif", "Segoe UI";
+ margin: auto 0 0 0;
+
+ 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;
+
position: relative;
- max-width: 950px; ;
+ max-width: 950px;
.pubdate {
- position: absolute;
- top: 0;
- right: 0;
- padding: 55px 10px;
- transform: rotate(20deg);
- text-shadow: 1px 1px 0.2px green;
- color: pink;
text-align: right;
+ line-height: 1.65;
}
ul {
line-height: 1.6;
}
- code {
- color: #a00;
- background: #eee;
- border: 1px solid #ccc;
- padding: 0 5px;
- font-weight: 630;
+
+ 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: 2rem;
+ line-height: 3rem;
+ margin: 0.5rem 0;
+ }
+ h2 {
+ font-size: 1.6rem;
+ line-height: 3rem;
+ }
+ h3 {
+ font-size: 1.3rem;
+ line-height: 3rem;
+ }
+ h4 {
+ font-size: 1.1rem;
+ line-height: 3rem;
+ }
+
+ .anchor {
+ user-select: none;
+ text-decoration: none;
+ color: inherit;
+
+ &:link {
+ color: inherit;
+ }
+ &:visited {
+ color: inherit;
+ }
+ &:hover, &:focus {
+ text-decoration: underline;
+ }
+ }
+
+ > 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;
+ }
}
@media #{$gt-gsm} {
ul {
- line-height: 1.4;
+ line-height: 1.5;
}
float: none;
- margin-right: auto;
- margin-left: auto;
width: auto;
- padding-right: 4vh;
- padding-left: 4vh;
+ padding-right: 1vw;
+ padding-left: 3vw;
- border: 1px solid #eaeaea;
- border: 1px solid rgba(51, 51, 51, 0.1);
- border-color: #eaeaea !important;
- margin-top: 50px;
- margin-bottom: 50px;
+ margin-top: 25px;
+ margin-bottom: 25px;
&.zen-mode {
margin-left: auto;
@@ -62,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;
}
@@ -73,9 +131,7 @@ article {
list-style-type: lower-roman;
}
}
-
.footnotes {
- color: #777;
font-size: 0.8em;
li {
padding-bottom: 15px;
@@ -84,97 +140,418 @@ article {
ol p {
display: inline;
}
- }
- font-size: 1.3em;
- h1 {
- font-size: 2.2em;
- color: #A5B;
+ @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; }
+
}
- h2 {
- font-size: 1.9em;
- color: #BB8;
+
+ blockquote {
+ padding: 1px 2%;
+
+ border-left: 5px solid #ccc;
}
- h3 {
- font-size: 1.6em;
- color: #AC4;
+
+ h1 h2 h3 {
+ line-height: initial;
}
- h2:before {
- content: "# ";
- color: #ABB;
- font: bold 1.3em arial, sans-serif;
+ h1, h2, h3, h4, h5 {
+ text-indent: -10px;
}
- h3:before {
- content: "## ";
- color: #ABB;
- font: bold 1.2em arial, sans-serif;
+
+ @media #{$gsm} {
+ margin: 0;
+ padding: 50px 5px;
+ width: calc(100% - 10px);
+ font-size: 1rem;
+ code {
+ font-size: 0.9rem;
+ }
}
- h4:before {
- content: "### ";
- color: #ABB;
- font: bold 1.1em arial, sans-serif;
+ @media #{$big-laptop} {
+ pre code {
+ width: 110%;
+ margin: 0 -10%;
+ }
}
+ @mixin lightMode {
+ .pubDate {
+ color: #606060;
+ }
+ blockquote {
+ color: #504d4d;
+ }
- @media #{$gt-gsm} {
- font-size: 1.1em;
- h1 {
- font-size: 2em;
- color: #A5B;
+ h4, h5, h6 {
+ color: black;
}
- h2 {
- font-size: 1.5em;
- color: #BB8;
+ img {
+ filter: none;
}
- h3 {
- font-size: 1.25em;
- color: #AC4;
+ color: initial;
+
+ > p:first-of-type {
+ > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] {
+ filter: none;
+ }
}
- h2:before {
- content: "# ";
- color: #ABB;
- font: bold 0.95em arial, sans-serif;
+ }
+
+ @mixin darkMode {
+ .pubDate {
+ color: #606060;
}
- h3:before {
- content: "## ";
- color: #ABB;
- font: bold 0.95em arial, sans-serif;
+ blockquote {
+ color: #E0DDDD;
}
- h4:before {
- content: "### ";
- color: #ABB;
- font: bold 1em arial, sans-serif;
+
+ h4, h5, h6 {
+ color: #EFEFEF;
}
- }
-}
-section {
- > p:nth-of-type(1):after {
- content: " ";
- display: table;
- clear: both;
- }
- > p:nth-of-type(1) > img {
- height: 150px;
- float: right;
- }
+ img:not(.no-dark) {
+ filter: invert(1);
+ }
+ color: #EFEFEF;
- @media #{$gt-gsm} {
> p:first-of-type {
- margin-top: 2.5%;
- margin-bottom: 2.5%;
- padding-left: 6%;
- color: #944040;
+ > 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; }
+ &.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 {
+ display: block;
+}
+.marge {
+ @media #{$tab} {
+ display: none;
+ }
+}
+.sidenotes {
+ 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; }
+ @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;
+ p {
+ margin: 0;
+ }
+ .sidenote {
+ position: absolute;
+ font-style: oblique;
+ 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;
+ }
+ }
+ }
+}
+.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;
}
By 🦊 with love. ❤