2025-02-21

src/styles/base/base.css

@@ -0,0 +1,119 @@
+/*
+ * 1. Utilise un meilleur modèle de boîte.
+ * 2. Fait que seul font-size puisse influencer la taille du texte.
+ * 3. Applique les schémas de couleurs.
+ * 4. Utilise une indentation plus étroite.
+ * 5. Permet l'usage de propriétés intrinsèques comme auto ou fit-content dans les animations.
+ */
+html {
+  box-sizing: border-box; /* 1 */
+  tab-size: 2; /* 4 */
+  color-scheme: dark light; /* 3 */
+  interpolate-size: allow-keywords; /* 6 */
+  /* stylelint-disable */
+  -moz-text-size-adjust: none; /* 2 */
+  -webkit-text-size-adjust: none; /* 2 */
+  text-size-adjust: none; /* 2 */
+  block-size: 100%;
+  /* stylelint-enable */
+
+  /* scrollbar-gutter: stable; */
+}
+
+body {
+  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-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
+    contextual;
+  line-height: var(--line-height-comfortable);
+  text-decoration-skip-ink: auto;
+  text-rendering: geometricprecision;
+}
+
+/*
+ * 1. Hérite le modèle de boîte de l'élément racine.
+ * 2. Désactive toute marge pour partir de bases saines.
+ * 3. Hérite toute propriété typographique et de couleur pour éviter des redéfinitions.
+ */
+*, *::before, *::after {
+  box-sizing: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+  font: inherit; /* 3 */
+  font-feature-settings: inherit; /* 3 */
+  font-variation-settings: inherit; /* 3 */
+  color: inherit; /* 3 */
+  letter-spacing: inherit; /* 3 */
+  word-spacing: inherit; /* 3 */
+}
+
+/* Utilise une couleur particulière pour l'arrière-plan des éléments sélectionnés avec le curseur. */
+*::selection {
+  color: var(--color-secondary);
+  background: var(--color-primary);
+}
+
+/* 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;
+}
+
+/* Retire les bordures et applique un modèle d'arrière-plan plus sain. */
+*:where(:not(progress, meter)) {
+  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. */
+:where(.visually-hidden:not(:focus, :active, :focus-within)) {
+  position: absolute;
+  overflow: hidden;
+  inline-size: 1px;
+  block-size: 1px;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+/* Cache les éléments cachés. */
+:where([hidden]) {
+  display: none;
+}
+
+/* Affiche un curseur « Désactivé » pour les éléments désactivés. */
+:where([disabled]) {
+  cursor: not-allowed;
+}
+
+/* Applique des contours de focus visibles. */
+:where(:focus-visible) {
+  outline: currentcolor solid 0.2rem;
+  outline-offset: 0.2rem;
+}
+
+:where(:focus-visible, :target) {
+  scroll-margin-block: 8vh;
+}
+
+/* Active une transition de page simple. */
+@view-transition {
+  navigation: auto;
+}
+
+/* Désactive animations et transitions pour les Utilisateurs le demandant explicitement. */
+@media (prefers-reduced-motion) {
+  *, *::before, *::after {
+    scroll-behavior: auto !important;
+    transition: none !important;
+    animation-duration: 0s !important;
+  }
+
+  @view-transition {
+    navigation: none !important;
+  }
+}

src/styles/base/elements.css

@@ -0,0 +1,56 @@
+/* Réinitialise l'apparence d'éléments interactifs. */
+:where(button, fieldset, input, select, textarea) {
+  appearance: none;
+}
+
+/* Hauteur de ligne plus étroite pour les éléments interactifs. */
+:where(button, fieldset, input, label, select, textarea) {
+  line-height: var(--line-height-compact);
+}
+
+:where(textarea) {
+  resize: vertical;
+}
+
+@supports (resize: block) {
+  :where(textarea) {
+    resize: block;
+  }
+}
+
+/* Curseur de main pour les éléments interactifs cliquables. */
+:where(button, label, select) {
+  cursor: pointer;
+}
+
+:where(button) {
+  inline-size: fit-content;
+}
+
+/* Évite le dépassement des textes. */
+:where(p, h1, h2, h3, h4, h5, h6) {
+  overflow-wrap: break-word;
+}
+
+/* Les médias doivent occuper toute la longueur disponible au sein de leur propre bloc. */
+:where(img, picture, video, canvas, svg) {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+:where(ol, ul) {
+  list-style: none;
+}
+
+:where(a) {
+  text-decoration: none;
+}
+
+/*
+ * Empêche les marqueurs de listes de modifier la hauteur de ligne sur Firefox.
+ * https://danburzo.ro/notes/moz-bullet-font
+ */
+::marker {
+  line-height: 0;
+}

src/styles/base/variables.css

@@ -0,0 +1,39 @@
+:root {
+  /* Couleurs */
+
+  /* Réelles */
+  --color-white: #fff;
+  --color-black: #000;
+
+  /* Logiques */
+  --color-primary: black;
+  --color-secondary: salmon;
+  --color-tertiary: dimgrey;
+  --color-quartary: #be2727;
+
+  /* Typographie */
+
+  /* Hauteurs de ligne */
+  --line-height-comfortable: 1.4;
+  --line-height-compact: 1.1;
+
+  /* Échelles */
+  --ratio: 1.4;
+  --s-5: calc(var(--s-4) / var(--ratio));
+  --s-4: calc(var(--s-3) / var(--ratio));
+  --s-3: calc(var(--s-2) / var(--ratio));
+  --s-2: calc(var(--s-1) / var(--ratio));
+  --s-1: calc(var(--s0) / var(--ratio));
+  --s0: 1rem;
+  --s1: calc(var(--s0) * var(--ratio));
+  --s2: calc(var(--s1) * var(--ratio));
+  --s3: calc(var(--s2) * var(--ratio));
+  --s4: calc(var(--s3) * var(--ratio));
+  --s5: calc(var(--s4) * var(--ratio));
+
+  /* Arrière-plans à motifs */
+  --bg25-secondary: repeating-conic-gradient(var(--color-tertiary) 0% 25%, transparent 0% 100%) 1px
+    0.5px / 2px 2px;
+  --bg75-secondary: repeating-conic-gradient(var(--color-secondary) 0% 75%, transparent 0% 100%) 1px
+    0.5px / 2px 2px;
+}

src/styles/components/imposter-box.css

@@ -0,0 +1,55 @@
+.dialog {
+  position: fixed; /* 1 */
+  z-index: 2; /* 1 */
+  inset: 0; /* 1 */
+  display: flex; /* 2 */
+  background: var(--bg25-secondary);
+  margin: 0;
+
+  &[aria-hidden="true"] {
+    display: none; /* 1 */
+  }
+}
+
+.dialog-content {
+  position: relative; /* 2 */
+  max-inline-size: 80ch;
+  margin: auto; /* 1 */
+  padding: initial;
+  border: 1px solid var(--color-primary);
+  background-color: var(--color-secondary);
+  box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary);
+  animation: fade-in 100ms 10ms both;
+
+  header {
+    overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    border-block-end: 1px solid var(--color-primary);
+
+    h2 {
+      padding-inline: var(--s-1);
+      font-size: var(--s1);
+    }
+
+    button {
+      padding: var(--s-1);
+      font-family: Banquise, monospace;
+      font-weight: 500;
+    }
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog-overlay, .dialog-content {
+    animation: none;
+  }
+}

src/styles/components/navigation-menu.css

@@ -0,0 +1,3 @@
+[aria-current] {
+  font-weight: 125;
+}

src/styles/layouts/_layouts.css

@@ -0,0 +1,7 @@
+@import url("./box.css");
+@import url("./center.css");
+@import url("./cover.css");
+@import url("./cluster.css");
+@import url("./sidebar.css");
+@import url("./stack.css");
+@import url("./switcher.css");

src/styles/layouts/box.css

@@ -0,0 +1,17 @@
+/*
+ * 1. Affiche une bordure pour les thèmes à haut contraste sans augmenter la taille de la boîte.
+ */
+.box {
+  padding: var(--s0, 1rem);
+  background-color: var(--color-secondary, #fff);
+  outline: 0.125rem solid transparent; /* 1 */
+  outline-offset: -0.125rem; /* 1 */
+
+  /* border: 1px solid var(--color-primary); */
+}
+
+/* Inverse les couleurs de la boîte. */
+.box.invert {
+  color: var(--color-secondary, #fff);
+  background-color: var(--color-primary, #000);
+}

src/styles/layouts/center.css

@@ -0,0 +1,14 @@
+/*
+ * 1. Utilise un modèle de boîte excluant les marges internes du calcul de la longueur.
+ * 2. Centre l'Élément avec des marges externes automatiques en ligne et une longueur maximale.
+ * 3. Assure que des espaces latéraux sont présents.
+ */
+.center {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  box-sizing: content-box; /* 1 */
+  max-inline-size: var(--longueur-max-texte, 80ch); /* 2 */
+  margin-inline: auto; /* 2 */
+  padding-inline: var(--s0, 1rem) var(--s0, 1rem); /* 3 */
+}

src/styles/layouts/cluster.css

@@ -0,0 +1,8 @@
+.cluster {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--s0, 1rem);
+  align-items: center;
+
+  /* justify-content: center; */
+}

src/styles/layouts/cover.css

@@ -0,0 +1,40 @@
+/*
+ * Cover est une disposition permettant de centrer verticalement en son sein un Élément, avec
+ * potentiellement une en-tête et/ou potentiellement un pied de page à chaque extrémité.
+ *
+ * Un usage typique de Cover est l'affichage d'une partie introductive au sein d'une page.
+ *
+ * 1. Arrange les Éléments en colonne.
+ * 2. Fait que la disposition ait une taille minimale fixe tout en permettant son expansion si le contenu la dépasse.
+ * 3. Empêche l'Élément centrale de la disposition de toucher les bords.
+ */
+.cover {
+  --cover-minimal-height: 100vb;
+  --cover-container-padding: var(--s0, 1rem);
+  --cover-inter-element-spacing: var(--s0, 1rem);
+
+  display: flex; /* 1 */
+  flex-flow: column nowrap; /* 1 */
+  min-block-size: var(--cover-minimal-height); /* 2 */
+  padding: var(--cover-container-padding); /* 3 */
+
+  /* Applique un espacement inter-élément pour tout Élément supplémentaire. */
+  > * {
+    margin-block: var(--cover-inter-element-spacing);
+  }
+
+  /* Pas de marge pour les Éléments aux extrémités de la disposition. */
+  > :first-child:not(.cover-center) {
+    margin-block-start: 0;
+  }
+
+  /* Pas de marge pour les Éléments aux extrémités de la disposition. */
+  > :last-child:not(.cover-center) {
+    margin-block-end: 0;
+  }
+
+  /* Centre verticalement l'Élément central. */
+  > .cover-center {
+    margin-block: auto;
+  }
+}

src/styles/layouts/sidebar.css

@@ -0,0 +1,19 @@
+.with-sidebar {
+  --gutter: var(--s0);
+
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--gutter, var(--s0));
+  align-content: start;
+}
+
+.with-sidebar > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: 65%;
+}
+
+.with-sidebar > :last-child {
+  flex-basis: 15ch;
+  flex-grow: 1;
+}

src/styles/layouts/stack.css

@@ -0,0 +1,19 @@
+.stack {
+  --space: var(--s0, 1rem);
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+}
+
+.stack > * {
+  margin-block: 0;
+}
+
+.stack > * + * {
+  margin-block-start: var(--space);
+}
+
+.stack:only-child {
+  block-size: 100%;
+}

src/styles/layouts/switcher.css

@@ -0,0 +1,16 @@
+.switcher {
+  --threshold: 30rem;
+
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--s0, 1rem);
+}
+
+.switcher > *:not(.column-separator) {
+  flex-basis: calc((var(--threshold) - 100%) * 999);
+  flex-grow: 1;
+}
+
+.switcher > :nth-last-child(n+5), .switcher > :nth-last-child(n+5) ~ * {
+  flex-basis: 100%;
+}

src/styles/main.css

@@ -0,0 +1,9 @@
+@layer base, elements, layouts, components, themes;
+
+@import url("./base/variables.css");
+@import url("./base/base.css") layer(base);
+@import url("./base/elements.css") layer(base);
+
+@import url("./layouts/_layouts.css") layer(layouts);
+
+@import url("./themes/default.css") layer(themes);

src/styles/pages/main-layout.css

@@ -0,0 +1 @@
+

src/styles/themes/default.css

@@ -0,0 +1,60 @@
+@import url("./default/buttons.css");
+@import url("./default/headings.css");
+
+body {
+  font-family: BRKLY, sans-serif;
+  font-weight: 100;
+  background: var(--color-secondary);
+}
+
+*:focus-visible {
+  animation: flicker 50ms 2;
+}
+
+.invert {
+  font-weight: 120;
+  color: var(--color-secondary);
+  background-color: var(--color-primary);
+}
+
+h1 {
+  font-family: Banquise, monospace;
+}
+
+.container {
+  --longueur-max-texte: 100ch;
+
+  place-content: start;
+  place-items: start;
+
+  /* opacity: 0;
+  animation: flicker 50ms 4 forwards 100ms ease-in; */
+}
+
+.container > :is(main, aside) {
+  margin-block-start: var(--s2);
+}
+
+main > header {
+  margin-block-end: var(--s2);
+}
+
+#last-watched-media {
+  --space: var(--s2);
+}
+
+@keyframes fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes flicker {
+  from, 49% {
+    opacity: 0;
+  }
+
+  50%, to {
+    opacity: 1;
+  }
+}

src/styles/themes/default/buttons.css

@@ -0,0 +1,54 @@
+button {
+  --button-background-color: var(--color-secondary);
+  --button-border-color: var(--color-primary);
+  --button-font-weight: 100;
+  --button-padding: var(--s-1);
+  --button-text-color: var(--color-primary);
+
+  padding: var(--button-padding);
+  border: 1px solid var(--button-border-color);
+  font-weight: var(--button-font-weight);
+  color: var(--button-text-color);
+  background-color: var(--button-background-color);
+  box-shadow: 4px 4px 0 0 var(--color-primary);
+
+  &:hover {
+    --button-background-color: var(--color-primary);
+    --button-border-color: var(--color-secondary);
+    --button-font-weight: 120;
+    --button-text-color: var(--color-secondary);
+  }
+
+  &:active {
+    transform: translateX(2px) translateY(2px);
+    box-shadow: 1px 1px 0 0 var(--color-primary);
+  }
+
+  &:focus-visible {
+    outline-offset: -0.3rem;
+  }
+
+  /* Inversion des couleurs. */
+  &.invert {
+    --button-background-color: var(--color-primary);
+    --button-border-color: var(--color-secondary);
+    --button-text-color: var(--color-secondary);
+
+    outline-color: var(--color-secondary);
+  }
+
+  /* TODO: Déplacer dans un Composant. */
+  /* Bouton intégré dans un ensemble. */
+  &.integrated {
+    border: initial;
+
+    &:hover {
+      color: var(--color-primary);
+      background: var(--bg75-secondary);
+    }
+
+    &:active {
+      transform: translateX(2px) translateY(2px);
+    }
+  }
+}

src/styles/themes/default/headings.css

@@ -0,0 +1,12 @@
+h1 {
+  font-family: Banquise, monospace;
+  font-size: var(--s3);
+  font-weight: 600;
+  letter-spacing: 1.5px;
+}
+
+h2 {
+  font-family: Banquise, monospace;
+  font-size: var(--s2);
+  letter-spacing: 1px;
+}