feat: ajouts outil flexs
This commit is contained in:
parent
46f510dab3
commit
30e7fadd7c
4 changed files with 24 additions and 2 deletions
10
CHANGELOG.md
10
CHANGELOG.md
|
@ -5,6 +5,16 @@ 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
|
||||||
|
|
||||||
|
- 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.
|
||||||
|
- Ajout d'une navbar
|
||||||
|
|
||||||
## [2.0.0] - 2019-11-07
|
## [2.0.0] - 2019-11-07
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|
|
@ -17,6 +17,14 @@ 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.
|
||||||
|
|
||||||
|
## Classes utilitaires
|
||||||
|
|
||||||
|
Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentaires utiles, notamment dans le cadre des flexboxes.
|
||||||
|
|
||||||
|
- `.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
|
||||||
|
|
||||||
## Artictecture des titres
|
## Artictecture des titres
|
||||||
|
|
||||||
Les différents types ont différent style, et voici ce que ça donne du h3 au h6 (le h1 est le titre de page, et le h2 celui juste au dessus)
|
Les différents types ont différent style, et voici ce que ça donne du h3 au h6 (le h1 est le titre de page, et le h2 celui juste au dessus)
|
||||||
|
|
|
@ -25,7 +25,7 @@ function parse(inFile, outFile) {
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/">🏠 Accueil</a></li>
|
<li><a href="/">🏠 Accueil</a></li>
|
||||||
<li><a href="/exemples.html">🗒️ Exemples</a></li>
|
<li><a href="/exemples.html">🗒️ Exemples</a></li>
|
||||||
<li><a href="https://git.kobold.cafe/kazhnuz/moineau">Sources</a></li>
|
<li class="toolbar-end"><a href="https://git.kobold.cafe/kazhnuz/moineau">Sources</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -74,9 +74,9 @@ ul,
|
||||||
ol,
|
ol,
|
||||||
hr,
|
hr,
|
||||||
table,
|
table,
|
||||||
.tabs,
|
|
||||||
details
|
details
|
||||||
main,
|
main,
|
||||||
|
.p,
|
||||||
article {
|
article {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
|
@ -195,6 +195,10 @@ summary {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolbar-end {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ------------------ SPECIAL STYLING ------------------- */
|
/* ------------------ SPECIAL STYLING ------------------- */
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue