Compare commits
11 commits
6de0c5f595
...
155849deb0
| Author | SHA1 | Date | |
|---|---|---|---|
|
155849deb0 | ||
|
|
8a343855f1 | ||
|
|
d11d41f082 | ||
|
|
3a0801c8fe | ||
|
|
b6ad130f0f | ||
|
|
78b9f5d65b | ||
|
|
9548c0dcdb | ||
|
|
2aa2555b26 | ||
|
|
dd6b841440 | ||
|
|
950c395a19 | ||
|
|
6874f444b4 |
6 changed files with 317 additions and 15 deletions
19
CHANGELOG.md
19
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
|
||||
- Simplify code
|
||||
- Make color customisable
|
||||
- Suppor Dark Theme
|
||||
- Add support for `<details>`
|
||||
- Ajout d'une classe .flex simple pour aligner horizontalement deux éléments.
|
||||
- Rebrand du projet en moineau.css
|
||||
- Simplification du code pour le rendre plus léger
|
||||
- Ajout de la customisation de couleurs
|
||||
- Support du mode sombre
|
||||
- Support des éléments HTML suivants :
|
||||
- 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
|
||||
|
|
|
|||
15
README.md
15
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.
|
||||
BIN
data/cat.jpg
Normal file
BIN
data/cat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
# 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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 ------------------- */
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue