2025-02-23

2025-02-24

src/styles/base/base.css

@@ -21,12 +21,12 @@ html {
 }
 
 body {
+  -webkit-font-smoothing: antialiased;
   accent-color: var(--color-tertiary);
   background: var(--color-secondary);
-  --webkit-font-smoothing: antialiased;
   font-family: monospace, system-ui, sans-serif;
-  font-optical-sizing: auto;
   font-kerning: normal;
+  font-optical-sizing: auto;
   font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
     contextual;
   line-height: var(--line-height-comfortable);
@@ -55,9 +55,11 @@ body {
 *::selection {
   color: var(--color-secondary);
   background: var(--color-primary);
+  font-weight: 120;
 }
 
 /* TODO: Prendre en compte a11y-dialog */
+
 /* Empêche le défilement de la page quand une modale est ouverte. */
 :where(html:has(dialog:modal[open])) {
   overflow: clip;
@@ -65,9 +67,9 @@ body {
 
 /* Retire les bordures et applique un modèle d'arrière-plan plus sain. */
 *:where(:not(progress, meter)) {
+  border: 0 solid transparent;
   background-repeat: no-repeat;
   background-origin: border-box;
-  border: 0 solid transparent;
 }
 
 /* Classe pour cacher visuellement tout en restant accessible par les lecteurs d'écran. */

src/styles/base/elements.css

@@ -1,8 +1,14 @@
 /* Réinitialise l'apparence d'éléments interactifs. */
-:where(button, fieldset, input, select, textarea) {
+:where(button, fieldset, input, select, legend, textarea) {
   appearance: none;
 }
 
+/* Désactive le comportement étrange des <legend> au sein de <fieldset>. */
+:where(fieldset > legend) {
+  width: 100%;
+  float: left;
+}
+
 /* Hauteur de ligne plus étroite pour les éléments interactifs. */
 :where(button, fieldset, input, label, select, textarea) {
   line-height: var(--line-height-compact);
@@ -19,7 +25,7 @@
 }
 
 /* Curseur de main pour les éléments interactifs cliquables. */
-:where(button, label, select) {
+:where(button, input, label, select) {
   cursor: pointer;
 }
 
@@ -32,6 +38,10 @@
   overflow-wrap: break-word;
 }
 
+:where(h1, h2, h3, h4, h5, h6) {
+  inline-size: fit-content;
+}
+
 /* Les médias doivent occuper toute la longueur disponible au sein de leur propre bloc. */
 :where(img, picture, video, canvas, svg) {
   display: block;
@@ -43,30 +53,34 @@
   list-style: none;
 }
 
+:where(.fields) {
+  padding: var(--s-4);
+}
+
 :where(input[type="text"], input[type="number"]) {
   padding: var(--s-4);
 }
 
 :where(input[type="radio"]) {
+  position: relative;
   aspect-ratio: 1/1;
-  border: 1px solid var(--color-primary);
-  background: var(--color-secondary);
-  border-radius: 50%;
   inline-size: var(--s-1);
   block-size: var(--s-1);
-  position: relative;
+  border: 1px solid var(--color-primary);
+  border-radius: 50%;
+  background: var(--color-secondary);
 
   &::after {
-    background: var(--color-primary);
-    border-radius: inherit;
     content: "";
-    opacity: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     inline-size: var(--s-2);
     block-size: var(--s-2);
+    border-radius: inherit;
+    opacity: 0;
+    background: var(--color-primary);
   }
 
   + label {

src/styles/components/imposter-box.css

@@ -3,8 +3,8 @@
   z-index: 2; /* 1 */
   inset: 0; /* 1 */
   display: flex; /* 2 */
-  background: var(--bg25-secondary);
   margin: 0;
+  background: var(--bg25-secondary);
 
   &[aria-hidden="true"] {
     display: none; /* 1 */

src/styles/layouts/center.css

@@ -8,7 +8,7 @@
   flex-flow: column nowrap;
   align-items: center;
   box-sizing: content-box; /* 1 */
-  max-inline-size: var(--longueur-max-texte, 80ch); /* 2 */
+  max-inline-size: var(--max-width, 80rem); /* 2 */
   margin-inline: auto; /* 2 */
   padding-inline: var(--s0, 1rem) var(--s0, 1rem); /* 3 */
 }

src/styles/themes/default.css

@@ -15,6 +15,11 @@ body {
   font-weight: 120;
   color: var(--color-secondary);
   background-color: var(--color-primary);
+
+  &::selection {
+    color: var(--color-primary);
+    background-color: var(--color-secondary);
+  }
 }
 
 h1 {
@@ -22,7 +27,8 @@ h1 {
 }
 
 .container {
-  --longueur-max-texte: 100ch;
+  --max-width: 60rem;
+  --space: var(--s1);
 
   place-content: start;
   place-items: start;
@@ -35,14 +41,22 @@ h1 {
   margin-block-start: var(--s2);
 }
 
-main > header {
-  margin-block-end: var(--s2);
+main {
+  inline-size: 100%;
+
+  > header {
+    margin-block-end: var(--s2);
+  }
 }
 
 #last-watched-media {
   --space: var(--s2);
 }
 
+:is(input[type="text"], input[type="number"]) {
+  border: 1px solid var(--color-primary);
+}
+
 @keyframes fade-in {
   to {
     opacity: 1;

src/styles/themes/default/buttons.css

@@ -2,7 +2,7 @@ button {
   --button-background-color: var(--color-secondary);
   --button-border-color: var(--color-primary);
   --button-font-weight: 100;
-  --button-padding: var(--s-1);
+  --button-padding: var(--s-2);
   --button-text-color: var(--color-primary);
 
   padding: var(--button-padding);
@@ -38,6 +38,7 @@ button {
   }
 
   /* TODO: Déplacer dans un Composant. */
+
   /* Bouton intégré dans un ensemble. */
   &.integrated {
     border: initial;

src/styles/themes/default/headings.css

@@ -10,3 +10,9 @@ h2 {
   font-size: var(--s2);
   letter-spacing: 1px;
 }
+
+h3 {
+  font-family: Banquise, monospace;
+  font-size: var(--s1);
+  letter-spacing: 1px;
+}