odoro 1.0.1 → 1.0.3

package/templates/react-ts/_variantes/sans-libs/src/styles.css

@@ -2,8 +2,8 @@
 
    Les bibliotheques Odoro n'ont pas ete retenues a la creation : il n'y a donc
    ni jetons ni classes utilitaires, et cette feuille porte tout. Le dessin est
-   celui de la version complete — meme typographie, memes cartes, meme teinte
-   de marque — en CSS ordinaire.
+   celui de la version complete — meme barre en gelules, meme typographie,
+   memes cartes, meme teinte de marque — en CSS ordinaire.
 
    Une seule variable commande la couleur : `--marque`. La changer repeint le
    signe, les accents et les boutons d'un seul coup.
@@ -12,7 +12,7 @@
    `@odoro-cli/libs/styles.css` dans `main.tsx` avant cette feuille. */
 
 :root {
-  --marque: #f97316;
+  --marque: #3b82f6;
   --fond: #ffffff;
   --encre: #18181b;
   --doux: #71717a;
@@ -21,11 +21,14 @@
   color-scheme: light dark;
 }
 
-/* La preference du systeme, faute d'un selecteur de theme : c'est ce que les
-   jetons apporteraient, et l'absence de bibliotheque ne doit pas se payer d'un
-   fond blanc au milieu de la nuit. */
+/* Les valeurs du theme sombre, ecrites une fois et reprises deux fois.
+
+   La bascule pose `data-theme` sur la racine ; sans attribut, la preference du
+   navigateur decide. Les deux regles sont donc necessaires : la seconde sans la
+   premiere ignorerait le choix du visiteur, la premiere sans la seconde
+   rendrait un fond blanc au milieu de la nuit. */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme='light']) {
     --fond: #09090b;
     --encre: #fafafa;
     --doux: #a1a1aa;
@@ -34,6 +37,25 @@
   }
 }
 
+:root[data-theme='dark'] {
+  --fond: #09090b;
+  --encre: #fafafa;
+  --doux: #a1a1aa;
+  --filet: #27272a;
+  --surface: #18181b;
+}
+
+/* Le choix explicite est dit au navigateur : sans cela, `light-dark()`, les
+   controles natifs et les barres de defilement continuent de suivre un systeme
+   en nuit alors que le visiteur a demande le clair. */
+:root[data-theme='light'] {
+  color-scheme: light;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -57,52 +79,94 @@ pre {
   grid-template-rows: auto 1fr auto;
 }
 
-/* ----- Marque ------------------------------------------------------------- */
+/* ----- Barre en gelules --------------------------------------------------- */
 
-.marque {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
+/* La barre ne peint pas de bandeau : ce sont les gelules qui portent la
+   surface, posees sur ce qu'il y a derriere. Le fond decoratif continue donc
+   de passer dessous, au lieu d'etre coupe par une bande opaque. */
 
-.marque-signe {
-  color: var(--marque);
-  display: inline-flex;
+.barre {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  padding: 0 1.25rem;
 }
 
-.signe {
-  width: 1.15em;
-  height: 1.15em;
+.barre-contenu {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: 5rem;
+  width: 100%;
+  max-width: 64rem;
+  margin: 0 auto;
 }
 
-/* ----- Coquille ----------------------------------------------------------- */
+.gelule {
+  display: inline-flex;
+  align-items: center;
+  height: 3.5rem;
+  flex-shrink: 0;
+  padding: 0 1.25rem;
+  border: 1px solid color-mix(in oklab, var(--encre) 12%, transparent);
+  border-radius: 9999px;
+  background: color-mix(in oklab, var(--fond) 72%, transparent);
+  backdrop-filter: blur(16px);
+  text-decoration: none;
+}
 
-.nav {
-  position: sticky;
-  top: 0;
-  z-index: 20;
+.barre-fin {
+  margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 1.5rem;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--filet);
-  background: color-mix(in oklab, var(--fond) 75%, transparent);
-  backdrop-filter: blur(10px);
+  gap: 0.75rem;
 }
 
-.nav-lien,
-.lien-discret {
-  margin-left: auto;
+.gelule-lien {
   color: var(--doux);
   font-size: 0.875rem;
-  text-decoration: none;
 }
 
-.nav-lien:hover,
-.lien-discret:hover {
+.bascule {
+  width: 3.5rem;
+  justify-content: center;
+  padding: 0;
+  color: var(--doux);
+  cursor: pointer;
+}
+
+.bascule:hover {
+  color: var(--encre);
+}
+
+.gelule-lien:hover {
+  color: var(--encre);
+}
+
+/* ----- Marque ------------------------------------------------------------- */
+
+.marque {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.marque-signe {
   color: var(--marque);
+  display: inline-flex;
+}
+
+.marque-mot {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: 0.025em;
+  color: var(--encre);
+}
+
+/* ----- Coquille ----------------------------------------------------------- */
+
+.app-shell-fond {
+  position: relative;
 }
 
 .principal {
@@ -120,6 +184,11 @@ pre {
   font-size: 0.875rem;
 }
 
+.pied .marque-mot {
+  font-size: 0.875rem;
+  color: inherit;
+}
+
 /* ----- Fond decoratif ----------------------------------------------------- */
 
 .fond {
@@ -175,7 +244,7 @@ pre {
 }
 
 .hero {
-  padding: 6rem 1.5rem 5rem;
+  padding: 4rem 1.5rem 5rem;
 }
 
 .section {
@@ -193,6 +262,7 @@ pre {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
+  white-space: nowrap;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
   border: 1px solid color-mix(in oklab, var(--marque) 30%, transparent);
@@ -373,6 +443,13 @@ pre {
 .lien-discret {
   display: inline-block;
   margin: 1.5rem auto 0;
+  color: var(--doux);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.lien-discret:hover {
+  color: var(--marque);
 }
 
 /* ----- Boutons ------------------------------------------------------------ */