Amélioration du style, avec l'ajout de bordures, d'ombres, d'espaces.

2026-03-20 14:54:39 +01:00
parent 09da55e95c
commit 2de05b7954
2 changed files with 62 additions and 26 deletions
@@ -1,5 +1,4 @@
-// Gruvbox colorscheme
-// https://github.com/morhetz/gruvbox
+// Variable des couleurs. Basé sur Gruvbox (https://github.com/morhetz/gruvbox)
 $bg0: #282828;
 $bg0_h: #1D2021;
 $bg0_s: #32302F;
@@ -14,7 +13,7 @@ $fg2: #D5C4A1;
 $fg3: #BDAE93;
 $fg4: #A89984;

-$bg: $bg0_h;
+$bg: $bg0_h; // Dark hard variation.
 $gray: #928374;
 $red: #CC241D;
 $lighred: #FB4934;
@@ -33,24 +32,59 @@ $lightorange: #FE8019;
 $lightgray: #A89984;
 $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
 // on la force ici pour être homogène avec <body>.
-code {
+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.
@@ -5,20 +5,22 @@
  </head>

  <body>
-    <header>
+    <div class="monitor">
+      <header>
 {{ partial "header.html" . }}
-    </header>
+      </header>

-    <main>
+      <main>
 {{ block "main" . }}
-    Ce bloc sera remplacé par le contenu de la directive "define"
-    correspondante dans le template depuis lequel celui-ci est appliqué.
+        Ce bloc sera remplacé par le contenu de la directive "define"
+        correspondante dans le template depuis lequel celui-ci est appliqué.
 {{ end }}
-    </main>
+      </main>

-    <footer>
+      <footer>
 {{ partial "footer.html" . }}
-    </footer>
+      </footer>
+    </div>
  </body>
 </html>
 {{/* vim: set tw=80 ts=2 sw=2 sts=2 ft=gohtmltmpl: */}}