Compare commits

...

11 commits

Author SHA1 Message Date
Kazhnuz
155849deb0 meta: v3.0.0 2024-10-05 18:17:08 +02:00
Kazhnuz
8a343855f1 fix(button): ajout de couleurs de hover 2024-10-05 18:14:52 +02:00
Kazhnuz
d11d41f082 fix: corrige la largeur de la textarea 2024-10-05 18:05:23 +02:00
Kazhnuz
3a0801c8fe feat(table): ajoute support des tableaux 2024-10-05 18:02:54 +02:00
Kazhnuz
b6ad130f0f fix: corrige position des checkboxes 2024-10-05 17:42:12 +02:00
Kazhnuz
78b9f5d65b fix: responsive img 2024-10-05 17:41:09 +02:00
Kazhnuz
9548c0dcdb feat: ajoute support hgroup 2024-10-05 17:25:05 +02:00
Kazhnuz
2aa2555b26 meta: maj changelog 2024-10-05 17:16:08 +02:00
Kazhnuz
dd6b841440 feat: support textarea et select 2024-10-05 17:13:50 +02:00
Kazhnuz
950c395a19 feat: ajout des champs de formulaire 2024-10-05 16:57:16 +02:00
Kazhnuz
6874f444b4 feat: ajoute un bouton télécharger 2024-10-05 16:57:06 +02:00
6 changed files with 317 additions and 15 deletions

View file

@ -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/), 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). 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 - Ajout d'une navbar
## [2.0.0] - 2019-11-07 ## [2.0.0] - 2019-11-07

View file

@ -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. 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 ## 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) - Responsive (en tout cas le plus possible)
- Concentré sur la typographie et n'utilisant pas de classes - Concentré sur la typographie et n'utilisant pas de classes
- Gestion des couleurs - 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 ## Customiser
La couleur d'accents se customise en modifiant deux variables : La couleur d'accents se customise en modifiant quatre variables :
```css ```css
:root { :root {
--accent-color-dark: #1971c2; --accent-color-dark: #1971c2;
--accent-color-light: #d0ebff; --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 : 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 ## 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.

BIN
data/cat.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

View file

@ -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. 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 ## Classes utilitaires
Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentaires utiles, notamment dans le cadre des flexboxes. 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 - `.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. - `.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 - `.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 ## Artictecture des titres
@ -43,4 +112,66 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut en
###### Titre H6 ###### 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>

View file

@ -10,7 +10,7 @@
"minify-no-source-map": "sass --watch --no-source-map scss/moineau.scss --style compressed dist/css/moineau.min.css", "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", "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", "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": { "repository": {
"type": "git", "type": "git",

View file

@ -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; --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: #1971c2;
--accent-color-dark-hover: #1864ab;
--accent-color-light: #d0ebff; --accent-color-light: #d0ebff;
--accent-color-light-hover: #e7f5ff;
--text-color: #212529; --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); --hover-color: rgba(0,0,0,0.05);
--background-color: #f8f9fa; --background-color: #f8f9fa;
@ -14,6 +16,9 @@
--accent-color: var(--accent-color-dark); --accent-color: var(--accent-color-dark);
--accent-color-back: var(--accent-color-light); --accent-color-back: var(--accent-color-light);
--accent-color-hover: var(--accent-color-dark-hover);
--border-radius: 6px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -23,6 +28,7 @@
--well-color: #343a40; --well-color: #343a40;
--accent-color: var(--accent-color-light); --accent-color: var(--accent-color-light);
--accent-color-back: var(--accent-color-dark); --accent-color-back: var(--accent-color-dark);
--accent-color-hover: var(--accent-color-light-hover);
--border-color: rgba(255,255,255,0.2); --border-color: rgba(255,255,255,0.2);
--hover-color: rgba(255,255,255,0.1); --hover-color: rgba(255,255,255,0.1);
@ -77,6 +83,10 @@ table,
details details
main, main,
.p, .p,
input,
textarea,
select,
hgroup,
article { article {
padding: 0; padding: 0;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
@ -134,8 +144,22 @@ pre, code {
font-family: var(--font-family-monospace); font-family: var(--font-family-monospace);
} }
p > img:only-child {
display: block;
max-width: 100%;
margin:auto;
}
/* ------------------ TITLES ------------------- */ /* ------------------ TITLES ------------------- */
hgroup > :is(h1, h2, h3, h4, h5, h6) {
margin-bottom: 0;
}
hgroup {
font-weight: 700;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
text-align: left; text-align: left;
line-height: 1; line-height: 1;
@ -188,6 +212,10 @@ pre code {
padding: 0; padding: 0;
} }
pre {
overflow: scroll;
}
summary { summary {
font-weight: 700; font-weight: 700;
font-size: 0.9em; font-size: 0.9em;
@ -200,6 +228,139 @@ summary {
margin-left: auto; 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 ------------------- */ /* ------------------ SPECIAL STYLING ------------------- */