2025-02-28

src/styles/base/base.css

@@ -1,42 +1,42 @@
 html {
   box-sizing: border-box;
+  block-size: 100%;
+  text-size-adjust: none;
+  text-size-adjust: none;
+  text-size-adjust: none;
   tab-size: 2;
   color-scheme: dark light;
   interpolate-size: allow-keywords;
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-  block-size: 100%;
 }
 
 body {
-  -webkit-font-smoothing: antialiased;
-  accent-color: var(--color-tertiary);
-  background: var(--color-secondary);
+  block-size: 100%;
   font-family: monospace, system-ui, sans-serif;
-  font-kerning: normal;
   font-optical-sizing: auto;
+  font-kerning: normal;
   font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
     contextual;
+  -webkit-font-smoothing: antialiased;
   line-height: var(--line-height-comfortable);
   text-decoration-skip-ink: auto;
   text-rendering: geometricprecision;
-  block-size: 100%;
+  accent-color: var(--color-tertiary);
+  background: var(--color-secondary);
 }
 
 *, *::before, *::after {
   box-sizing: inherit;
-  border: 0 solid transparent;
-  background-repeat: no-repeat;
-  background-origin: border-box;
   margin: 0;
   padding: 0;
+  border: 0 solid transparent;
   font: inherit;
   font-feature-settings: inherit;
   font-variation-settings: inherit;
   color: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  background-repeat: no-repeat;
+  background-origin: border-box;
 }
 
 :where(.visually-hidden:not(:focus, :active, :focus-within)) {
@@ -48,7 +48,7 @@ body {
   clip-path: inset(50%);
 }
 
-:where([hidden]) {
+:where([hidden]), :where([aria-hidden="true"]) {
   display: none;
 }
 

src/styles/components/imposter-box.css

@@ -1,29 +1,40 @@
+/* Élément conteneur de la fenêtre modale. */
 .dialog {
+  --dialog-overlay-background: var(--bg25-secondary);
+  --dialog-background-color: var(--root-background-color);
+  --dialog-border-color: var(--root-text-color);
+  --dialog-shadow-color: var(--root-text-color);
+  --dialog-heading-font-size: var(--s1);
+
   position: fixed;
   z-index: 2;
   inset: 0;
   display: flex;
   margin: 0;
-  background: var(--bg25-secondary);
+  background: var(--dialog-overlay-background);
 
-  &[aria-hidden="true"] {
+  &[aria-hidden] {
     display: none;
   }
 
+  /* Fenêtre à proprement parler. */
   .dialog-content {
+    --layout-box-padding: 0;
+
     position: relative;
     margin: auto;
-    border: 1px solid var(--color-primary);
-    background-color: var(--color-secondary);
-    box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary);
+    border: 1px solid var(--dialog-border-color);
+    background-color: var(--dialog-background-color);
+    box-shadow: 0.5rem 0.5rem 0 0 var(--dialog-shadow-color);
 
+    /* Barre d'en-tête. */
     header {
       overflow: hidden;
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
       justify-content: space-between;
-      border-block-end: 1px solid var(--color-primary);
+      border-block-end: 1px solid var(--dialog-border-color);
 
       h2 {
         padding-inline: var(--s-1);
@@ -37,11 +48,12 @@
       }
     }
 
+    /* Contenu de la fenêtre. */
     main {
       display: flex;
       flex-flow: column nowrap;
       align-items: start;
-      padding: var(--s0);
+      padding: var(--s1);
     }
   }
 }

src/styles/layouts/box.css

@@ -1,5 +1,5 @@
 .box {
-  padding: var(--s0, 1rem);
-  outline: 0.125rem solid transparent; /* 1 */
-  outline-offset: -0.125rem; /* 1 */
+  padding: var(--layout-box-padding);
+  outline: 0.125rem solid transparent;
+  outline-offset: -0.125rem;
 }

src/styles/themes/default.css

@@ -7,11 +7,10 @@
   --brkly-font-weight-regular: 100;
   --brkly-font-weight-semibold: 120;
   --banquise-font-weight: 400;
-
   --root-background-color: var(--color-secondary);
   --root-text-color: var(--color-primary);
   --root-font-weight: var(--brkly-font-weight-regular);
-
+  --layout-box-padding: var(--s0);
   --layout-center-max-width: 80rem;
   --layout-center-inline-padding: var(--s0);
   --layout-cluster-gap: var(--s0);
@@ -23,8 +22,8 @@
 
 body {
   font-family: BRKLY, sans-serif;
-  color: var(--root-text-color);
   font-weight: var(--root-font-weight);
+  color: var(--root-text-color);
   background-color: var(--root-background-color);
 }
 
@@ -50,8 +49,9 @@ body {
 }
 
 .container {
-  --max-width: 100%;
-  --space: var(--s1);
+  --layout-center-max-width: 100%;
+  --layout-center-inline-padding: var(--s1);
+  --layout-sidebar-last-child-basis: 8rem;
 
   place-content: start;
   place-items: start;
@@ -64,7 +64,7 @@ body {
   margin-block-start: var(--s2);
 }
 
-main {
+.container > main {
   inline-size: 100%;
 
   > header {

src/styles/themes/default/buttons.css

@@ -56,11 +56,12 @@ button {
   /* Bouton sous forme de lien. */
   &.button-link {
     --button-border-color: transparent;
+
     padding-block: var(--s-5);
     padding-inline: var(--s-4);
-    box-shadow: initial;
     line-height: var(--line-height-comfortable);
     outline-offset: initial;
+    box-shadow: initial;
 
     &:hover {
       --button-border-color: var(--root-text-color);

src/styles/themes/default/headings.css

@@ -1,5 +1,5 @@
 :root {
-  --headings-font-family: Banquise, monospace;
+  --headings-font-family: banquise, monospace;
 }
 
 h1 {

src/styles/themes/default/links.css

@@ -1,5 +1,5 @@
 a {
-  &[aria-current] {
+  &[aria-current="true"] {
     font-weight: var(--brkly-font-weight-semibold);
   }
 }