Amélioration du style, avec l'ajout de bordures, d'ombres, d'espaces.
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
2026-03-20 14:54:39 +01:00
parent 09da55e95c
commit 2de05b7954
2 changed files with 62 additions and 26 deletions
+52 -18
View File
@@ -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
View File
@@ -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: */}}