meta: v3.0.0

CHANGELOG.md

@@ -5,14 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [3.0.0] - 2024-XX-XX
+## [3.0.0] - 2024-10-05
 
-- Rebrand as moineau.css
+- Rebrand du projet en moineau.css
-- Simplify code
+- Simplification du code pour le rendre plus léger
-- Make color customisable
+- Ajout de la customisation de couleurs
-- Suppor Dark Theme
+- Support du mode sombre
-- Add support for `<details>`
+- Support des éléments HTML suivants :
-- Ajout d'une classe .flex simple pour aligner horizontalement deux éléments.
+  - Balise `<details>`
+  - Support des éléments de formulaires
+  - Support des hgroups
+  - Support des tableaux
+- Ajout de classes utilitaires
+  - `.flex` afin d'aligner simplement horizontalement des éléments
 - Ajout d'une navbar
 
 ## [2.0.0] - 2019-11-07

README.md

@@ -6,11 +6,13 @@ Son but est d'avoir un style agréable à l'oeil et fonctionnel, assez minimalis
 
 Si le projet utilise surtout les balises standard du HTML, quelques utilitaires vont être ajoutés.
 
+<center><a class="button" href="https://git.kobold.cafe/kazhnuz/moineau/releases">Télécharger</a></center>
+
 ## Fonctionnalités
 
-moineau supporte les fonctionnalités suivantes de base :
+Moineau supporte les fonctionnalités suivantes de base :
 
-- Feuille de style simple et légère (TBD ko)
+- Feuille de style simple et légère (<7 ko minifié)
 - Responsive (en tout cas le plus possible)
 - Concentré sur la typographie et n'utilisant pas de classes
 - Gestion des couleurs
@@ -27,16 +29,18 @@ L'idée est de pouvoir générer simplement un blog ou un site simple pour les g
 
 ## Customiser
 
-La couleur d'accents se customise en modifiant deux variables :
+La couleur d'accents se customise en modifiant quatre variables :
 
 ```css
 :root {
   --accent-color-dark: #1971c2;
   --accent-color-light: #d0ebff;
+  --accent-color-dark-hover: #1864ab;
+  --accent-color-light-hover: #e7f5ff;
 }
 ```
 
-La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair).
+La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair). Les deux suivantes sont les mêmes, mais avec cette fois en variante pour le survol de la souris.
 
 Toute la palette peut également être customisé avec les variables css, de la manière suivante :
 
@@ -64,4 +68,5 @@ Toute la palette peut également être customisé avec les variables css, de la
 
 ## Crédits
 
-- Les couleurs proviennent de [open-color](https://yeun.github.io/open-color/)
+- Les couleurs proviennent de [open-color](https://yeun.github.io/open-color/)
+- La photo de chat utilisé dans les exemples a été publiée sur Wikimedia.

exemples/exemples.md

@@ -17,6 +17,74 @@ Contenu du `details`.
 
 La balise `<mark>` permet d'afficher simplement des éléments en <mark>surbrillance</mark>. Cela utilise la couleur d'accent claire (et sombre en mode sombre). Le style est proche de celui de code, mais sans monospace et avec la couleur d'accent.
 
+# Image
+
+Une image dans un paragraphe seul sera automatiquement en bloc, centrée et responsive
+
+![Une photo de chat, bien sûr](/cat.jpg)
+
+# Table
+
+Le style des tableaux
+
+<div class="responsive-table">
+    <table>
+    <caption>
+        Exemple de tableau
+    </caption>
+    <thead>
+        <tr>
+            <th scope="col">Animal</th>
+            <th scope="col">En liberté</th>
+            <th scope="col">Nombre</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th scope="row">Canard</th>
+            <td>Oui</td>
+            <td>3</td>
+        </tr>
+        <tr>
+            <th scope="row">Poules</th>
+            <td>Non</td>
+            <td>4</td>
+        </tr>
+        <tr>
+            <th scope="row">Oies</th>
+            <td>Plus ou moins</td>
+            <td>6</td>
+        </tr>
+        <tr>
+            <th scope="row">Chiens</th>
+            <td>Oui</td>
+            <td>2</td>
+        </tr>
+        <tr>
+            <th scope="row">Chats</th>
+            <td>Oui</td>
+            <td>5</td>
+        </tr>
+        <tr>
+            <th scope="row">Perroquet (gris du gabon et deux verts)</th>
+            <td>Non</td>
+            <td>3</td>
+        </tr>
+        <tr>
+            <th scope="row">Iguane</th>
+            <td>Non</td>
+            <td>1</td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <th scope="row" colspan="2">Nombre total</th>
+            <td>24</td>
+        </tr>
+    </tfoot>
+    </table>
+</div>
+
 ## Classes utilitaires
 
 Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentaires utiles, notamment dans le cadre des flexboxes.
@@ -24,6 +92,7 @@ Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentair
 - `.flex` est utilisé pour afficher deux éléments cotes à cotes
 - `.toolbar-end` est utilsié pour afficher un élément à la fin d'une navbar (cela poussera tout les composants après). Il est utilisé par exemple dans le bouton "Source" de la navbar.
 - `.p` est utlisé pour se faire comporter une balise comme un paragraphe, se combine bien avec .flex dans les articles
+- `.responsive-table` est utilisé dans un dev pour entourer un tableau et le rendre plus ou moins responsive
 
 ## Artictecture des titres
 
@@ -43,4 +112,66 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut en
 
 ###### Titre H6
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat. 
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat. 
+
+## Hgroup
+
+Les hgroup sont supporté. Tout texte dedans sera en gras, et les titres n'auront pas leur margin-bottom habituel :
+
+```html
+<hgroup>
+  <h1>Titre</h1>
+  <p>Sous-titre géré dans le hgroup</p>
+</hgroup>
+```
+
+donne le résultat suivant :
+
+<hgroup>
+    <h1>Titre</h1>
+    <p>Sous-titre géré dans le hgroup</p>
+</hgroup>
+
+## Input
+
+Les différents types d'input ont des styles 
+
+<form>
+    <label for="text">Champ de texte :</label>
+    <input type="text" id="text" name="text" />
+    <div class="p"><label for="checkbox">Champ de checkbox :</label>
+    <input type="checkbox" id="checkbox" name="checkbox" /></div>
+    <label for="color">Champ de couleur :</label>
+    <input type="color" id="color" name="color" />
+    <label for="date">Champ de date :</label>
+    <input type="date" id="date" name="date" />
+    <label for="time">Champ d'heure :</label>
+    <input type="time" id="time" name="time" />
+    <label for="datetime-local">Champ de date et heure :</label>
+    <input type="datetime-local" id="datetime-local" name="datetime-local" />
+    <label for="email">Champ de mail :</label>
+    <input type="email" id="email" name="email" />
+    <label for="tel">Champ de tel :</label>
+    <input type="tel" id="tel" name="tel" />
+    <label for="file">Champ de fichier :</label>
+    <input type="file" id="file" name="file" />
+    <label for="number">Champ de nombre :</label>
+    <input type="number" id="number" name="number" />
+    <div class="p"><label for="radio">Champ radio :</label>
+    <input type="radio" id="radio" name="radio" /></div>
+    <label for="select">Champ select:</label>
+    <select name="select" id="select">
+        <option value="">--Choix d'option--</option>
+        <option value="canard">Canard</option>
+        <option value="oie">Oie</option>
+        <option value="poule">Poule</option>
+        <option value="faisan">Faisant</option>
+        <option value="dindon">Dindon</option>
+    </select>
+    <div>
+        <input type="submit" id="submit" name="submit" />
+        <input type="reset" id="reset" name="reset" />
+    </div>
+
+</form>
+<div><textarea>uwu</textarea></div>

package.json

@@ -10,7 +10,7 @@
     "minify-no-source-map": "sass --watch --no-source-map scss/moineau.scss --style compressed dist/css/moineau.min.css",
     "build": "sass scss/moineau.scss dist/css/moineau.css && sass scss/moineau.scss --style compressed dist/css/moineau.min.css",
     "serve": "http-server ./dist & npm run site & npm run minify",
-    "site": "node generate.js"
+    "site": "cp data/cat.jpg dist/cat.jpg & node generate.js"
   },
   "repository": {
     "type": "git",

scss/moineau.scss

@@ -3,10 +3,12 @@
   --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
 
   --accent-color-dark: #1971c2;
+  --accent-color-dark-hover: #1864ab;
   --accent-color-light: #d0ebff;
+  --accent-color-light-hover: #e7f5ff;
 
   --text-color: #212529;
-  --border-color: rgba(0,0,0,0.1);
+  --border-color: rgba(0,0,0,0.15);
   --hover-color: rgba(0,0,0,0.05);
 
   --background-color: #f8f9fa;
@@ -14,6 +16,9 @@
 
   --accent-color: var(--accent-color-dark);
   --accent-color-back: var(--accent-color-light);
+  --accent-color-hover: var(--accent-color-dark-hover);
+
+  --border-radius: 6px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -23,6 +28,7 @@
     --well-color: #343a40;
     --accent-color: var(--accent-color-light);
     --accent-color-back: var(--accent-color-dark);
+    --accent-color-hover: var(--accent-color-light-hover);
 
     --border-color: rgba(255,255,255,0.2);
     --hover-color: rgba(255,255,255,0.1);
@@ -77,6 +83,10 @@ table,
 details
 main,
 .p,
+input,
+textarea,
+select,
+hgroup,
 article {
     padding: 0;
     margin: 0 0 1rem 0;
@@ -134,8 +144,22 @@ pre, code {
     font-family: var(--font-family-monospace);
 }
 
+p > img:only-child {
+  display: block;
+  max-width: 100%;
+  margin:auto;
+}
+
 /* ------------------ TITLES ------------------- */
 
+hgroup > :is(h1, h2, h3, h4, h5, h6) {
+  margin-bottom: 0;
+}
+
+hgroup {
+  font-weight: 700;
+}
+
 h1, h2, h3, h4, h5, h6 {
   text-align: left;
 	line-height: 1;
@@ -188,6 +212,10 @@ pre code {
   padding: 0;
 }
 
+pre {
+  overflow: scroll;
+}
+
 summary {
   font-weight: 700;
   font-size: 0.9em;
@@ -200,6 +228,139 @@ summary {
   margin-left: auto;
 }
 
+/* ------------------ INPUT ------------------- */
+
+a, button, input {
+  outline-color: var(--accent-color);
+  outline-style: none;
+  outline-width: 2px;
+  &:focus-visible {
+    outline-style: dashed;
+  }
+}
+
+input, textarea, select {
+  display:block;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  outline-offset: 2px;
+  padding: .5rem;
+  color: var(--text-color);
+  &:hover {
+    background-color: var(--hover-color);
+  }
+
+  max-width: 100%;
+  overflow: scroll;
+}
+
+label {
+  font-size: .9rem;
+  font-weight: bolder;
+}
+
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 1rem;
+}
+
+input[type=checkbox], input[type=radio] {
+  display: inline-block;
+  appearance: none;
+  aspect-ratio: 1;
+  font-size: 1rem;
+  height:1em;
+  width:1em;
+  box-sizing: border-box;
+  line-height: 1;
+  padding:0;
+  margin: 0 .25em;
+  border-radius: 3px;
+  border: 1px solid var(--border-color);
+  content: "";
+  position: relative;
+  top: .2rem;
+
+  &:checked {
+    background-color: var(--accent-color);
+    box-shadow:inset 0px 0px 0px 3px var(--background-color);
+
+    &:hover {
+      background-color: var(--accent-color-hover);
+      box-shadow:inset 0px 0px 0px 3px color-mix(in srgb, var(--background-color) 90%, currentColor);
+    }
+  }
+}
+
+input[type=radio] {
+  border-radius: 9999px;
+}
+
+
+button, .button, input[type=submit], input[type=reset], input[type=button] {
+  background-color: var(--accent-color);
+  color: var(--background-color);
+  border: none;
+  padding: .5rem 1rem;
+  border-radius: var(--border-radius);
+  outline-offset: 2px;
+  display: inline-block;
+
+  &:hover {
+    background-color: var(--accent-color-hover);
+  }
+}
+
+/* Tables */
+
+.responsive-table {
+  width:100%;
+  overflow: scroll;
+}
+
+table {
+  border-collapse: separate;
+  width:100%;
+  border:0;
+  border-spacing: 3px;
+}
+
+caption {
+  font-weight: bolder;
+}
+
+table.centered th, table.centered td {
+  text-align: center;
+}
+
+tr, th, td {
+  border:0;
+}
+
+th, td {
+  background-color: var(--well-color);
+  padding:.33rem .66rem;
+}
+
+table:not(:has(thead)) tr:first-child, table > tr:first-child, table thead tr:first-child {
+  td:first-child, th:first-child {
+    border-top-left-radius: var(--border-radius);
+  }
+  td:last-child, th:last-child {
+    border-top-right-radius: var(--border-radius);
+  }
+}
+
+table > tr:last-child, table tbody tr:last-child {
+  td:first-child, th:first-child {
+    border-bottom-left-radius: var(--border-radius);
+  }
+  td:last-child, th:last-child {
+    border-bottom-right-radius: var(--border-radius);
+  }
+}
 
 /* ------------------ SPECIAL STYLING ------------------- */