CHANGELOG.md

@@ -5,19 +5,14 @@ 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-10-05
+## [3.0.0] - 2024-XX-XX
 
-- Rebrand du projet en moineau.css
+- Rebrand as moineau.css
-- Simplification du code pour le rendre plus léger
+- Simplify code
-- Ajout de la customisation de couleurs
+- Make color customisable
-- Support du mode sombre
+- Suppor Dark Theme
-- Support des éléments HTML suivants :
+- Add support for `<details>`
-  - Balise `<details>`
+- Ajout d'une classe .flex simple pour aligner horizontalement deux éléments.
-  - 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,13 +6,11 @@ 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 (<7 ko minifié)
+- Feuille de style simple et légère (TBD ko)
 - Responsive (en tout cas le plus possible)
 - Concentré sur la typographie et n'utilisant pas de classes
 - Gestion des couleurs
@@ -29,18 +27,16 @@ 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 quatre variables :
+La couleur d'accents se customise en modifiant deux 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). Les deux suivantes sont les mêmes, mais avec cette fois en variante pour le survol de la souris.
+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).
 
 Toute la palette peut également être customisé avec les variables css, de la manière suivante :
 
@@ -68,5 +64,4 @@ 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,74 +17,6 @@ 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.
@@ -92,7 +24,6 @@ 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
 
@@ -112,66 +43,4 @@ 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": "cp data/cat.jpg dist/cat.jpg & node generate.js"
+    "site": "node generate.js"
   },
   "repository": {
     "type": "git",

scss/moineau.scss

@@ -3,12 +3,10 @@
   --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.15);
+  --border-color: rgba(0,0,0,0.1);
   --hover-color: rgba(0,0,0,0.05);
 
   --background-color: #f8f9fa;
@@ -16,9 +14,6 @@
 
   --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) {
@@ -28,7 +23,6 @@
     --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);
@@ -83,10 +77,6 @@ table,
 details
 main,
 .p,
-input,
-textarea,
-select,
-hgroup,
 article {
     padding: 0;
     margin: 0 0 1rem 0;
@@ -144,22 +134,8 @@ 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;
@@ -212,10 +188,6 @@ pre code {
   padding: 0;
 }
 
-pre {
-  overflow: scroll;
-}
-
 summary {
   font-weight: 700;
   font-size: 0.9em;
@@ -228,139 +200,6 @@ 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 ------------------- */