447 lines
7.1 KiB
SCSS
447 lines
7.1 KiB
SCSS
// Variable des couleurs. Basé sur Gruvbox (https://github.com/morhetz/gruvbox)
|
||
$bg0: #282828;
|
||
$bg0_h: #1D2021;
|
||
$bg0_s: #32302F;
|
||
$bg1: #3C3836;
|
||
$bg2: #504945;
|
||
$bg3: #665C54;
|
||
$bg4: #7C6F64;
|
||
|
||
$fg0: #FBF1C7;
|
||
$fg1: #EBDBB2;
|
||
$fg2: #D5C4A1;
|
||
$fg3: #BDAE93;
|
||
$fg4: #A89984;
|
||
|
||
$bg: $bg0_h; // Dark hard variation.
|
||
$gray: #928374;
|
||
$red: #CC241D;
|
||
$lighred: #FB4934;
|
||
$green: #98971A;
|
||
$lightgreen: #B8BB26;
|
||
$yellow: #D79921;
|
||
$lightyellow: #FABD2F;
|
||
$blue: #458488;
|
||
$lightblue: #84A598;
|
||
$purple: #B16286;
|
||
$lightpurple: #D3869B;
|
||
$aqua: #689D6A;
|
||
$lightaqua: #8EC07C;
|
||
$orange: #D65D0E;
|
||
$lightorange: #FE8019;
|
||
$lightgray: #A89984;
|
||
$fg: $fg1;
|
||
|
||
// Firefox a tendance à proposer sa propre fonte à taille fixe sur <code>, donc
|
||
// on la force ici pour être homogène avec <body>.
|
||
body, code {
|
||
font-family: "Iosevka", "monospace";
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
// HTML doit faire la totalité de la hauteur de la page, avec une couleur plus
|
||
// claire que le contenu.
|
||
html {
|
||
// Taille et marges.
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
|
||
// Couleur du fond.
|
||
background-color: $bg0;
|
||
}
|
||
|
||
// Body, permet de définir
|
||
body {
|
||
// Définition de l'espace d'affichage.
|
||
display: grid;
|
||
justify-content: center;
|
||
width: fit-content;
|
||
min-height: 100vh;
|
||
|
||
// Définition des marges.
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.monitor {
|
||
// Couleurs
|
||
color: $fg;
|
||
background-color: $bg;
|
||
|
||
// Taille et marges.
|
||
margin-top: 2rem;
|
||
margin-bottom: 0;
|
||
padding: 1rem;
|
||
// Évidemment, terminal à 80 colones.
|
||
width: 80ch;
|
||
|
||
// Bordure en haut et sur les côtés
|
||
border-width: 1px;
|
||
border-color: $fg;
|
||
border-style: solid solid none;
|
||
|
||
// Arrondi en haut uniquement.
|
||
border-radius: 0.5rem 0.5rem 0 0;
|
||
|
||
// Ombre.
|
||
box-shadow: $fg 0 0 2rem 0.1rem;
|
||
}
|
||
|
||
// Style des liens.
|
||
a {
|
||
outline: none;
|
||
text-decoration: none;
|
||
padding: 0;
|
||
}
|
||
|
||
a:link {
|
||
color: $yellow;
|
||
}
|
||
|
||
a:visited {
|
||
color: $lightyellow
|
||
}
|
||
|
||
a:focus {
|
||
color: $green;
|
||
}
|
||
|
||
a:hover {
|
||
color: $green;
|
||
}
|
||
|
||
a:active {
|
||
color: $lightgreen;
|
||
}
|
||
|
||
/* Couleur différente pour les répertoire dans le menu ls */
|
||
.lsresult li.directory {
|
||
a:link {
|
||
color: $blue;
|
||
}
|
||
|
||
a:visited {
|
||
color: $lightblue
|
||
}
|
||
}
|
||
|
||
// Colorisation du code en ligne.
|
||
code:not([class]) {
|
||
color: $green;
|
||
}
|
||
|
||
// Espace après l'entête.
|
||
header {
|
||
padding-bottom: 1em;
|
||
}
|
||
|
||
// Soulignement des titres
|
||
h1 {
|
||
font-size: 1em;
|
||
color: $red;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
padding-bottom: 1em;
|
||
position: relative;
|
||
|
||
// Permet de n'avoir la ligne que sur la largeur du texte et non du
|
||
// conteneur.
|
||
width: fit-content;
|
||
}
|
||
|
||
h1::after {
|
||
content: "";
|
||
position: absolute;
|
||
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 1em; /* ≈ hauteur d’un caractère */
|
||
|
||
background-image: linear-gradient(
|
||
to bottom,
|
||
transparent 35.71%,
|
||
$red 35.71% 42.85%,
|
||
transparent 42.85% 49.99%,
|
||
$red 49.99% 57.13%,
|
||
transparent 57.13%
|
||
);
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1em;
|
||
text-transform: uppercase;
|
||
color: $orange;
|
||
margin: 0;
|
||
padding-bottom: 1em;
|
||
position: relative;
|
||
|
||
// Permet de n'avoir la ligne que sur la largeur du texte et non du
|
||
// conteneur.
|
||
width: fit-content;
|
||
}
|
||
|
||
h2::after {
|
||
content: "";
|
||
position: absolute;
|
||
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 1em; /* ≈ hauteur d’un caractère */
|
||
|
||
background-image: linear-gradient(
|
||
to bottom,
|
||
transparent 49.99%,
|
||
$orange 49.99% 57.13%,
|
||
transparent 57.13%
|
||
);
|
||
}
|
||
|
||
// Séparation des articles.
|
||
article {
|
||
padding-top: 1em;
|
||
}
|
||
|
||
article:not(:last-of-type) {
|
||
margin: 0;
|
||
padding-bottom: 1em;
|
||
position: relative;
|
||
}
|
||
|
||
article:not(:last-of-type)::after {
|
||
content: "";
|
||
position: absolute;
|
||
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 1em; /* ≈ hauteur d’un caractère */
|
||
|
||
background-image: linear-gradient(
|
||
to bottom,
|
||
transparent 49.99%,
|
||
$fg 49.99% 57.13%,
|
||
transparent 57.13%
|
||
);
|
||
}
|
||
|
||
// Colorisation des éléments moins importants.
|
||
#publication-information {
|
||
padding-left: 4ch;
|
||
color: $aqua;
|
||
}
|
||
|
||
#reading-time {
|
||
padding-left: 4ch;
|
||
color: $blue;
|
||
}
|
||
|
||
// Décalagu du lien "lire plus".
|
||
#read-more {
|
||
padding-left: 4ch;
|
||
}
|
||
|
||
// Séparation du pied de page
|
||
footer {
|
||
margin: 0;
|
||
padding-top: 1em;
|
||
position: relative;
|
||
color: $bg2;
|
||
}
|
||
|
||
footer::before {
|
||
content: "";
|
||
position: absolute;
|
||
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 1em; /* ≈ hauteur d’un caractère */
|
||
|
||
background-image: linear-gradient(
|
||
to bottom,
|
||
transparent 49.99%,
|
||
$fg 49.99% 57.13%,
|
||
transparent 57.13%
|
||
);
|
||
}
|
||
|
||
// Prompt and command line.
|
||
// ========================
|
||
.cmdblock {
|
||
border: 0;
|
||
|
||
p, ol, ul {
|
||
margin: 0;
|
||
}
|
||
|
||
p.prompt:before {
|
||
content: "$ ";
|
||
}
|
||
}
|
||
|
||
// Breadcrumb.
|
||
// ===========
|
||
.breadcrumb {
|
||
//display: inline;
|
||
|
||
ol {
|
||
display: flex;
|
||
padding: 0;
|
||
}
|
||
|
||
li {
|
||
display: flex;
|
||
}
|
||
|
||
li:not(:first-child)::before {
|
||
content: "/";
|
||
}
|
||
|
||
li.file {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
ul.lsresult {
|
||
padding: 0;
|
||
display: table;
|
||
|
||
li {
|
||
display: table-row;
|
||
}
|
||
|
||
li span {
|
||
display: table-cell;
|
||
}
|
||
|
||
li span:not(:first-child) {
|
||
padding-left: 1ch;
|
||
}
|
||
}
|
||
|
||
// Arbres de type ANSI
|
||
main, footer {
|
||
/* base */
|
||
ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
margin-bottom: 1em;
|
||
padding-top: 0;
|
||
padding-left: 0ch;
|
||
}
|
||
|
||
/* branches ASCII */
|
||
ul li {
|
||
position: relative;
|
||
padding-left: 4ch;
|
||
}
|
||
|
||
/* branche intermédiaires*/
|
||
ul li::before {
|
||
content: "├──";
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
/* dernière branche */
|
||
ul li:last-child::before {
|
||
content: "└──";
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
/* ligne verticale devant les sous-arbres. */
|
||
ul li:not(:last-child):has(ul) {
|
||
background-image: linear-gradient($fg);
|
||
background-size: 0.25ch 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: 0.375ch 1em;
|
||
}
|
||
|
||
/* sous-arbres */
|
||
ul ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding-bottom: 0;
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
// Suppression de l'espace entre un paragraphe et la liste qui le suit.
|
||
*:has(+ ul), *:has(+ * ul) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
// Menus.
|
||
// ======
|
||
.menu {
|
||
ul.tree {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
|
||
}
|
||
|
||
/*ul.tree-child {
|
||
border-left: solid 2px;
|
||
}*/
|
||
|
||
//
|
||
ul.tree ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
ul.tree ul {
|
||
margin-left: 0.5ch;
|
||
}
|
||
ul.tree ul ul {
|
||
margin-left: 4ch;
|
||
}
|
||
|
||
ul.tree ul li {
|
||
margin: 0;
|
||
padding: 0 0.3ch;
|
||
//line-height: 20px;
|
||
//color: #369;
|
||
//font-weight: bold;
|
||
border-left:0.1ch solid $fg;
|
||
|
||
}
|
||
ul.tree ul li:last-child {
|
||
border-left:none;
|
||
display: inline;
|
||
}
|
||
ul.tree ul li:before {
|
||
position:relative;
|
||
top:-0.3em;
|
||
height:0.5em;
|
||
width:2ch;
|
||
//color:white;
|
||
border-bottom:0.1em solid $fg;
|
||
content:"";
|
||
display:inline-block;
|
||
left:-0.3ch;
|
||
}//*/
|
||
ul.tree ul li:last-child:before {
|
||
border-left:0.1ch solid $fg;
|
||
}
|
||
|
||
/*li {
|
||
//display: inline-block;
|
||
}*/
|
||
|
||
/*li:not(:last-child)::after {
|
||
content: "|";
|
||
}*/
|
||
|
||
a {
|
||
//display: block;
|
||
//padding: 6px 12px;
|
||
//text-decoration: none;
|
||
}
|
||
}
|
||
|