362 lines
5.7 KiB
SCSS
362 lines
5.7 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;
|
||
}
|
||
|
||
// Links.
|
||
a {
|
||
outline: none;
|
||
text-decoration: none;
|
||
padding: 2px 1px 0;
|
||
}
|
||
|
||
a:link {
|
||
color: $yellow;
|
||
}
|
||
|
||
a:visited {
|
||
color: $lightyellow
|
||
}
|
||
|
||
a:focus {
|
||
color: $green;
|
||
}
|
||
|
||
a:hover {
|
||
color: $green;
|
||
}
|
||
|
||
a:active {
|
||
color: $lightgreen;
|
||
}
|
||
|
||
// Colorisation du code en ligne.
|
||
code:not([class]) {
|
||
color: $green;
|
||
}
|
||
|
||
// Soulignement des titres
|
||
h1 {
|
||
font-size: 1em;
|
||
color: $fg0;
|
||
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%,
|
||
$fg0 35.71% 42.85%,
|
||
transparent 42.85% 49.99%,
|
||
$fg0 49.99% 57.13%,
|
||
transparent 57.13%
|
||
);
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1em;
|
||
text-transform: uppercase;
|
||
color: $fg0;
|
||
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%,
|
||
$fg0 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%
|
||
);
|
||
}
|
||
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
// 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;
|
||
}
|
||
}
|
||
|