Amélioration du style, avec l'ajout de bordures, d'ombres, d'espaces.
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
+52
-18
@@ -1,5 +1,4 @@
|
|||||||
// Gruvbox colorscheme
|
// Variable des couleurs. Basé sur Gruvbox (https://github.com/morhetz/gruvbox)
|
||||||
// https://github.com/morhetz/gruvbox
|
|
||||||
$bg0: #282828;
|
$bg0: #282828;
|
||||||
$bg0_h: #1D2021;
|
$bg0_h: #1D2021;
|
||||||
$bg0_s: #32302F;
|
$bg0_s: #32302F;
|
||||||
@@ -14,7 +13,7 @@ $fg2: #D5C4A1;
|
|||||||
$fg3: #BDAE93;
|
$fg3: #BDAE93;
|
||||||
$fg4: #A89984;
|
$fg4: #A89984;
|
||||||
|
|
||||||
$bg: $bg0_h;
|
$bg: $bg0_h; // Dark hard variation.
|
||||||
$gray: #928374;
|
$gray: #928374;
|
||||||
$red: #CC241D;
|
$red: #CC241D;
|
||||||
$lighred: #FB4934;
|
$lighred: #FB4934;
|
||||||
@@ -33,24 +32,59 @@ $lightorange: #FE8019;
|
|||||||
$lightgray: #A89984;
|
$lightgray: #A89984;
|
||||||
$fg: $fg1;
|
$fg: $fg1;
|
||||||
|
|
||||||
// Default font and colors.
|
|
||||||
// ========================
|
|
||||||
|
|
||||||
// Body.
|
|
||||||
body {
|
|
||||||
font-family: "Iosevka", "monospace";
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: $fg;
|
|
||||||
background-color: $bg;
|
|
||||||
width: 80ch;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Firefox a tendance à proposer sa propre fonte à taille fixe sur <code>, donc
|
// Firefox a tendance à proposer sa propre fonte à taille fixe sur <code>, donc
|
||||||
// on la force ici pour être homogène avec <body>.
|
// on la force ici pour être homogène avec <body>.
|
||||||
code {
|
body, code {
|
||||||
font-family: "Iosevka", "monospace";
|
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.
|
// Links.
|
||||||
|
|||||||
+10
-8
@@ -5,20 +5,22 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<div class="monitor">
|
||||||
|
<header>
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
{{ block "main" . }}
|
{{ block "main" . }}
|
||||||
Ce bloc sera remplacé par le contenu de la directive "define"
|
Ce bloc sera remplacé par le contenu de la directive "define"
|
||||||
correspondante dans le template depuis lequel celui-ci est appliqué.
|
correspondante dans le template depuis lequel celui-ci est appliqué.
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
</footer>
|
</footer>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{/* vim: set tw=80 ts=2 sw=2 sts=2 ft=gohtmltmpl: */}}
|
{{/* vim: set tw=80 ts=2 sw=2 sts=2 ft=gohtmltmpl: */}}
|
||||||
|
|||||||
Reference in New Issue
Block a user