feat: ajouts outil flexs

This commit is contained in:
Kazhnuz 2024-09-29 16:31:01 +02:00
parent 46f510dab3
commit 30e7fadd7c
4 changed files with 24 additions and 2 deletions

View file

@ -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

View file

@ -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)

View file

@ -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>

View file

@ -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 ------------------- */