bonnebulle/__html_css_js
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

Re order _ressources + maj navbar + aide vsc

Browse Source
This commit is contained in:
bonnebulle
2025-10-20 15:15:11 +00:00
parent 26bcfeec64
commit daef670236
19 changed files with 2186 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -1 +1,5 @@
.idea
.history
*.bash*
*.bash
.vscode

3
public/0_assets/style_basics.css
View File

@@ -1,3 +0,0 @@
p {
color: darkgreen;
}

170
public/0_assets/style_basics_SAVE.css
View File

@@ -1,170 +0,0 @@
p {
color: darkcyan;
}
#italgras :is(i,strong) {
color: orangered;
}
.pas_important {
font-weight: normal;
color: red;
}
.important {
font-weight: bolder;
color: red;
}
.pas_important {
font-weight: normal;
color: #000;
}
#important_wrapper {
margin-left: 10px;
border-left: 3px solid red;
padding-left: 20px;
}
/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
#test_margin_padding {
padding: 30px; /* PADDING */
margin: 30px; /* MARGIN */
border: 1px solid;
background-color: #e3dcff;
border: 3px solid red;
}
/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding */
#test_wrapper {
border: 1px solid gainsboro;
background: #fdffdf; /* jaune */
padding: 10px;
}
/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */
#inner_content {
background-color: #cff0fb;
padding: 0px;
}
#mousehover_movemargin_element {
height: 130px;
width: 130px;
background: red;
color: #FFF;
padding: 20px;
text-align: center;
display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
}
#mousehover_movemargin:hover > #mousehover_movemargin_element {
margin-left: calc(100% - 130px - 50px);
background:yellow;
transition: all 1s;
}
#test_wrapper:before {
content: "margin";
margin: 0px;
font-size: 10px;
position: absolute;
margin-top: -5px;
}
#test_margin_padding:before {
content: "padding";
margin: 0px;
font-size: 10px;
position: absolute;
margin-top: -25px;
margin-left: -20px;
}
/* ID */
#text_principal {
font-family: sans-serif;
line-height: 0.4em;
}
/* CLASSE */
.para {
background-color: yellowgreen;
}
/* CLASSE, autres instructions */
.fond_bleu {
background-color: blue;
color: #FFF;
}
/* CLASSE/ID plusieures cibles en même temps */
.para, #sad {
font-weight: bold;
}
/* PSEUDO CLASSE :last-child */
p:last-child .para {
background-color: orangered;
}
#margin_first,
#margin_seconde,
#margin_last {
display: inline-block;
border: 1px solid;
}
.margin_left {
margin-left: 100px
}
.margin_right {
margin-right: 100px
}
.large {
width:500px;
}
.petite {
width:200px;
}
#top_margin_block {
width: 100%
}
#margin_exemples_wrapper {
background: greenyellow;
border: 1px solid #000;
display: block;
clear: both;
float: left;
width: 100%;
margin-bottom: 4rem;
}
.margin_exemples {
display: inline;
border: 1px solid #000;
background: chartreuse;
padding: 5px 5px 0 5px; /* EXEMPLE Padding */
height: 100px; width: 100px;
float: left;
}
.margin_exemples.margin_autour {
margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
height: auto; width: auto;
min-height: 100px;
background: lavender
}
.border {
border:1px solid #000;
}
.cascade {
margin-left: 10px;
background: #FFF;
text-align: center;
}
.cascade:hover {
background: fuchsia;
}
#enfant p {
text-transform: uppercase;
}

53
public/0_assets/style_columns.css
View File

@@ -1,53 +0,0 @@
#contenant {
background-color: red;
/* display: none; */
display: block;
margin-bottom: 5rem;
* {}
.left, .right {
float:left;
width: 50%;
box-sizing: border-box;
}
.left {
/* width: calc(50% - 30px); */
/* padding-left: 10px; */
width: calc(50% - 0px);
padding-left: 0px;
}
.right {
border-left: 1px solid #000;
padding-left: 30px;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
}
#contenant_cols {
column-count: 2;
float: left;
/* display: none; */
* {}
.text {
text-align: justify;
hyphens: auto;
display: block;
}
}
/* h3 {
text-align: center;
margin-top: 3rem;
} */

4
public/0_index_empty.html
View File

@@ -8,7 +8,7 @@
<title>0_index_empty.html</title>
<!-- Fiche de styles presque vide -->
<link rel="stylesheet" href="./0_assets/style_basics.css">
<link rel="stylesheet" href="./_ressources/0_intro/js/style_basics.css">
<!-- styles de bases du projet d'ateliers -->
<link rel="stylesheet" href="style.css">
@@ -59,7 +59,7 @@
<a href="0_intro.html#">Retour à 0_intro.html</a> (# haut de page)<br>
<a href="0_intro.html#back_from_index_empty">Retour à 0_intro.html</a> (# stylesheet)
</center>
<script src="./0_assets/vide.js"></script>
<script src="./_ressources/0_intro/js/vide.js"></script>
</footer>

527
public/0_intro.html
View File

@@ -1,8 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="fr" id="centred">
<head>
<title>0 intro</title>
<meta charset="utf-8">
@@ -11,30 +10,50 @@
<!-- GENERAL -->
<link rel="stylesheet" href="style.css">
<!-- fonts text ciblage basique -->
<link rel="stylesheet" href="./0_assets/style_basics.css">
<!-- positions margins -->
<link rel="stylesheet" href="./_ressources/0_intro/css/style_basics.css">
<!-- positions margin -->
<!-- <link rel="stylesheet" href="style_positions_margins.css"> -->
<!-- columns -->
<link rel="stylesheet" href="./0_assets/style_columns.css">
<!-- <link rel="stylesheet" href="./_ressources/0_intro/css/style_columns.css"> -->
<link href="/assets/css/prism.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="toc_wrapper">
<label for="toc_checkbox">Table des matières</label>
<input id="toc_checkbox" type="checkbox">
<div id="toc"></div>
</div>
<!-- TOP navbare -->
<div id="navbar">
<a href="https://bonnebulle.gitlab.io/plain-html-redo">URL du projet</a>
(sur gitlab, repo d'origine)
+ <a href="https://gitlab.com/bonnebulle/plain-html-redo">Repo gitlab
!!!</a>
<a href="/"><i class="fa-solid fa-code"></i> Index</a>
<a href="/vs/?folder=/www/" target="_blank" id="code_this"><i class="fa-solid fa-code"></i> vs</a>
<a href="/assets/coucou/"><i class="fa-solid fa-ghost"></i> Messages</a>
<a href="0_intro_vscode"><i class="fa-solid fa-circle-info"></i> Vscode aide</a>
<a href="https://files.bonnebulle.xyz"><i class="fa-solid fa-folder"></i> Fichiers</a>
<a href="https://snip.bonnebulle.xyz/public/snippets"><i class="fa-solid fa-scissors"></i> Snipets</a>
<a href="https://php.bonnebulle.xyz"><i class="fa-solid fa-database"></i> Php</a>
</div>
<!-- Titre -->
<h1>Bonjour le Monde !</h1>
<section>
<section class="centred">
<div id="contenant_basics">
@@ -45,7 +64,7 @@
<p>HyperText Markup Language est une facon de composé l'espace d'une page web, avec des balisages (<i>Markups</i>) dont les hyperliens sont centraux.</p>
<p>Les <a href="https://developer.mozilla.org/fr/docs/Glossary/Tag">balises HTML</a> (<i>tag</i> en anglais) sont nombreuses....<br>
elles vienent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont diférentiés en objets distincts, en <span class="important">éléments</span></p>
elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont diférentiés en objets distincts, en <span class="important">éléments</span></p>
@@ -59,22 +78,47 @@
<a href="https://la-cascade.io" target="_blank">La Cascade</a> (FR), ressources sur le CSS...
</p>
<!-- <p>Commençons par quelque chose de simple....<br> -->
<!-- <p> -->
<!-- Par exemple, si on écrit ce code (HTML) : <br><code><u>text souligné</u></code> le text va être sousligné (un style va lui être appliqué)</code></p> -->
<h3>Afficher le code source</h3>
<h3>Vscode + template</h3>
<p>Index des projets...</br>
<b>Home/Index : <a href="https://code.bonnebulle.xyz/" target="_blank">https://code.bonnebulle.xyz</a></b><br>
Avec un sous-dossier par personne...
</p>
<p>Que vous pouvez ouvrir dans <span class="important">VSCODE</span>, le logiciel de code qu'on va utiliser...<br>
C'est une version de l'application VSCode accessible en ligne...<br>
Ce qui permet de démarrer tout de suite.... dans un environnement de travail pré-configuré<br>
et moi de suivre vos différents projets au même endroit...<br>
Vous travaillerez depuis votre propre dossier de projet !
</p>
<p>
<br>Depuis VSC on peut créer un fichier <i class="file">index.html</i>
<br>l'ouvrir... et tapper "<kdb class="key">!</kdb>", un popup s'ouvre (Intellisens), en faisant <kdb class="key">ENTRER</kdb>, le <i>template</i> (gabari, préformatage) d'une page HTML est chargé...</p>
</p>
<p>Page d'aide, raccourcis :<br>
<a href="0_intro_vscode" target="_blank" class="file">0_intro_vscode</a></p>
<h3>Afficher le code source</h3>
<p>On va déja regarder comment est composée une page HTML basique...</p>
<p>Lien vers <a href="./0_index_empty.html" target="_blank"><i class="file">0_index_empty.html</i></a></p>
<p>Lien vers <a class="file" href="./0_index_empty.html" target="_blank">0_index_empty.html</a></p>
<kdb class="key">CTRL+MAJ+I</kdb> les outils de dev. s'affichent,<br>
<kdb class="key">CTRL+U</kdb>, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur)
<h4>... structure de la page, head, body, footer</h4>
<h4>... structure de la page, head, body, footer</h4>
<br>Par convention (et méthode)
<br>... on met les contenus contextuels (meta) et ressources dans <u>la tête de la page</u> <codescaped class="done">&lt;head&gt;titre, feuilles de style .css, etc&lt;/head&gt;</codescaped> (contenus <b>in</b>visible)
@@ -82,15 +126,23 @@
<br>Les commentaires <kdb class="key">CTRL+MAJ+/</kdb> sont invisibles...
<!-- <br>Les <codescaped class="done">&lt;script&gt;</codescaped> ou encore <codescaped class="done">&lt;link&gt;</div> -->
<p>Footer, on le vera avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...<br>
<p>Footer, on le verra avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...<br>
à la fin de la page... ce qui est en bas étant lu... en dernier</p>
<br>
<br>
<br>
<h3>HTML balises simples, souligner, titres... div</h3>
<h3>HTML balises simples, souligner, titres... div</h3>
<p>On va se concentrer sur le contenu dans <codescaped class="done">&lt;body&gt;</codescaped> en commençant par quelques exemples de balises simples :</p>
@@ -98,13 +150,13 @@
<pre><code class="language-markup"><u>text souligné</u></code></pre>
<pre><code class="language-markup"><a href="#top">lien vers</a></code></pre>
<pre><code class="language-markup">
<h1>titre</h1>
<h2>titre</h1>
<h3>titre</h1>
<h4>titre</h1>
<h5>titre</h1>
<h6>titre</h1>
<pre><code class="language-markup">
<h1>titre</h1>
<h2>titre</h2>
<h3>titre</h3>
<h4>titre</h4>
<h5>titre</h5>
<h6>titre</h6>
</code></pre>
@@ -119,15 +171,15 @@
<pre><code class="language-markup">
<div>
<div>
<p>autres contenus</p>
</div>
</div>
</code></pre>
<pre><code class="language-markup">
<strong>Plus d'informations :</strong>
<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/div">MDN Firefox (DIV)</a><br>
( élément de division du contenu )
<strong>Plus d'informations :</strong>
<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/div">MDN Firefox (DIV)</a><br>
( élément de division du contenu )
</code></pre>
@@ -203,11 +255,11 @@ On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur com
<pre><code class="language-css" id="margin_exemples">
#italgras {
#italgras {
i, u, strong {
color: orange
}
}
}
</code></pre>
<pre><code class="language-markup">
@@ -239,13 +291,13 @@ On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur com
Dans Firefox je trouve les parametres via icon <kdb class="key">"..."</kdb> (à droite) puis <b>Parametres</b> (<kdb class="key">"icon rouage"</kdb>) /OU/ <kdb class="key">F1</kdb></p>
<div>
<img src="./0_assets/0_firefox_parametres_devs.png">
<img src="./_ressources/0_intro/img/0_firefox_parametres_devs.png">
</div>
<p>Je peux ensuite demander d'afficher ces styles par défaut</p>
<div>
<img src="./0_assets/0_afficher_style.png">
<img src="./_ressources/0_intro/img/0_afficher_style.png">
</div>
<p>Firefox montre bien que "strong" a des valeurs par défaut... on peut
voir d'autres propriétés et feulles de style</p>
@@ -353,7 +405,7 @@ On parle de méthode "<span class="important">inline</span>", dans le texte/cod
<p>"<span class="important">On ne met pas d'espace dans le nom des fichiers !, on les remplace par "_" ou "-", plutôt "_"</span>"</p>
<p>Une fois la feuille de style crée on devra la charger dans la page HTML
<hr class="space ">
<hr class="space">
@@ -362,10 +414,10 @@ les instructions qu'elle contient vont modifier la façon dont le navigateur aff
</div>
<pre><code class="language-markup nopreview">
<link rel="stylesheet" href="./0_assets/style_basics.css">
<link rel="stylesheet" href="./_ressources/0_intro/css/style_basics.css">
</code></pre>
<p>Lien vers <a href="./0_assets/style_basics.css"><i class="file">style_basics.css</i></a></p>
<p>Lien vers <a class="file" href="./_ressources/0_intro/css/style_basics.css">style_basics.css</a></p>
<p class="resume" id="back_from_index_empty_alt">La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page
@@ -387,16 +439,6 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
<h5>Créer un fichier + ! template Html</h5>
<p>Dans VSCODE (ou Codium), le logiciel de code qu'on va utiliser...
<br>je peux créer un fichier <i class="file">index.html</i>
<br>l'ouvrir... et tapper "<kdb class="key">!</kdb>", un popup s'ouvre (Intellisens), en faisant <kdb class="key">ENTRER</kdb>, le <i>template</i> (gabari, préformatage) d'une page HTML est chargé...</p>
<p>Lien vers <a href="./0_index_empty.html" target="_blank""><i class="file">0_index_empty.html</i></a></p>
<hr class="space" />
@@ -419,18 +461,18 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
</div>
<pre><code class="language-css" id="id_classes">
#important_wrapper { /* id */
#important_wrapper { /* id */
margin-left: 10px;
border-left: 3px solid red;
padding-left: 20px;
}
.important { /* classe */
}
.important { /* classe */
font-weight: bolder;
color: red;
}
.pas_important {
}
.pas_important {
font-weight: normal;
}
}
</code></pre>
<pre><code class="language-markup">
@@ -457,13 +499,13 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
<h3>CSS /VS/ HTML, cibler des éléments /VS/ ajouter des classes</h3>
<p class="important">CSS : On peut attribuer les mêmes consignes (<span class="color property">propriétés</span> + <span class="color value">valeurs</span>) à plusieurs élémens ciblés en même temps (via leur classe, id, etc) -- virgule</p>
<pre><code class="language-css" id="multiples_cibles">
.para, #sad {
.para, #sad {
....
}
.para,
#sad {
}
.para,
#sad {
....
}
}
</code></pre>
<p><span class="important">CSS : On utilise un --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre</span><br>
@@ -550,28 +592,28 @@ p:last-child .para {
<p>#contenant .element_dedans .sous_element</p>
<pre><code class="language-css" id="parent_cascade">
.border {
.border {
border:1px solid #000;
}
.cascade {
}
.cascade {
margin-left: 10px;
background: #FFF;
text-align: center;
}
.cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
}
.cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
background: fuchsia;
}
#enfant p {
}
#enfant p {
/* tout p présent dans #enfant */
text-transform: uppercase;
}
}
</code></pre>
<pre><code class="language-markup">
<div id="grand_parent" class="cascade border">
<p>tête</p>
<div id="parent" class="cascade border">
<p>soutient</p>
<p>aide</p>
<div id="enfant" class="cascade border">
<p>autonomie</p> <!-- ////////////// ciblé -->
</div>
@@ -585,6 +627,55 @@ p:last-child .para {
</code></pre>
<h4><i>Nesting</i></h4>
<div class="resume"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting</a>
CSS Avancé ! Autre façon de cibler les éléments d'une page HTML<br>Permet une meilleure lisibilité, on attribue des instructions CSS par élément (et ses sous-élements)</div>
<pre><code class="language-css" id="parent_cascade_nesting">
.border {
border:1px solid #000;
}
.cascade_nesting {
margin-left: 10px;
background: #FFF;
text-align: center;
}
.cascade_nesting:hover { /* Hover est une autre pseudo-classe bien pratique... */
background: yellow;
}
#parent_nesting {
p {
color: red;
}
u {
padding: 10px;
display: inline-block;
}
u, p {
text-transform: uppercase;
background: yellow;
display: inline-block;
}
}
#grand_parent_nesting:hover :is(#parent_nesting, #enfant_nesting) {
& * { background: orange }
background: orange
}
</code></pre>
<pre><code class="language-markup">
<div id="grand_parent_nesting" class="cascade_nesting border"><p>tête</p>
<div id="parent_nesting" class="cascade_nesting border"><p>aide</p>
<div id="enfant_nesting" class="cascade_nesting border"><u>autonomie</u></div>
</div></div>
</code></pre>
@@ -599,7 +690,8 @@ C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "
Wiki Style d'indentation : <a target="_blank" href="https://fr.wikipedia.org/wiki/Style_d'indentation">https://fr.wikipedia.org/wiki/Style_d'indentation</a>
<p>Dans VSCODE on peut utiliser <i><a target="_blank" href="https://open-vsx.org/extension/esbenp/prettier-vscode">Prettier Code Formatter</a></i> qui fait le boulot à notre place, aligne correctement les blocks de textes en fonction de leur imbrication successive...</p>
<p>Dans VSCODE on peut utiliser <br><i><a target="_blank" href="https://open-vsx.org/extension/esbenp/prettier-vscode">Prettier Code Formatter</a></i> qui fait le boulot à notre place <br>(aligne correctement les blocks de textes en fonction de leur imbrication successive...)<br>
ou encore <a href="https://open-vsx.org/extension/oderwat/indent-rainbow" target="_blank">indent-rainbow</a></p>
<hr class="space visible">
@@ -665,7 +757,7 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
<p>Firefox : <kdb class="key">CTRL+MAJ+I</kdb> + <code class="key">-> Inspecteur -> Mise en Page</code></p>
<p>En selectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées</p>
<img src="./0_assets/0_padding_margin.png">
<img src="./_ressources/0_intro/img/0_padding_margin.png">
<br>
@@ -674,29 +766,29 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
<pre><code class="language-css" id="margin_simple">
#margin_first,
#margin_seconde,
#margin_last {
#margin_first,
#margin_seconde,
#margin_last {
/* il faut que propriété "Display" ait la valeur "inline-block" */
/* (pour éviter que les éléments sautent à la ligne, des blocks) */
display: inline-block;
border: 1px solid;
}
.margin_left {
}
.margin_left {
margin-left: 100px
}
.margin_right {
}
.margin_right {
margin-right: 100px
}
.large {
}
.large {
width:500px;
}
.petite {
}
.petite {
width:200px;
}
</code></pre>
}
</code></pre>
<pre><code class="language-markup">
<pre><code class="language-markup">
<div id="margin_first" class="margin_left large border">
<span>#margin_first</span>
</div>
@@ -708,11 +800,11 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
<div id="margin_last" class="border">
<span>#margin_last</span>
</div>
</code></pre>
</code></pre>
<p>Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :</p>
<img src="./0_assets/0_padding_margin_cut.png">
<p>Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :</p>
<img src="./_ressources/0_intro/img/0_padding_margin_cut.png">
@@ -770,6 +862,40 @@ On garde la logique, la dernière <span class="color property">propriété</span
<h4>Transition + margin (pause)</h4>
<div class="resume">Margin crée de l'espace, permet aussi de déplacer les éléments...
MDN (transition) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/transition">https://developer.mozilla.org/fr/docs/Web/CSS/transition</a></div>
<pre><code class="language-css" id="margin_move_transition">
#mousehover_movemargin_element {
height: 130px;
width: 130px;
background: red;
color: #FFF;
padding: 20px;
text-align: center;
display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
}
#mousehover_movemargin:hover #mousehover_movemargin_element {
margin-left: calc(100% - 130px - 50px);
background:yellow;
transition: all 1s;
cursor: pointer;
}</code></pre>
<pre><code class="language-markup">
<div id="mousehover_movemargin">
<div id="mousehover_movemargin_element">Youhouuuuu</div>
</div>
</code></pre>
<br>
<br>
@@ -923,6 +1049,10 @@ textarea {
</code></pre>
<pre><code class="language-markup">
<!-- <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- </head> -->
<!-- <body> -->
<div id="width_full_page" class="min_max_width">
#width_full_page
</div>
@@ -931,8 +1061,10 @@ textarea {
#width_bloc_textarea
<textarea>Ecire un truc</textarea>
</div>
<!-- </body> -->
</code></pre>
<div class="resume" style="margin-top: 0px; margin-bottom: 4rem;">MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries#cibler_des_caractéristiques_média" target="_blank">CSS_media_queries</a>
MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/length#unités_pour_zone_daffichage_par_défaut" target="_blank">Unités de mesure</a> (px, em, vw, vh)
MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:has" target="_blank">:has</a>
MDN html <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/textarea" target="_blank">textarea</a>
</div>
@@ -940,39 +1072,6 @@ textarea {
<h3>Transition + margin (pause)</h3>
<div class="resume">Margin crée de l'espace, permet aussi de déplacer les éléments...
MDN (transition) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/transition">https://developer.mozilla.org/fr/docs/Web/CSS/transition</a></div>
<pre><code class="language-css" id="margin_move_transition">
#mousehover_movemargin_element {
height: 130px;
width: 130px;
background: red;
color: #FFF;
padding: 20px;
text-align: center;
display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
}
#mousehover_movemargin:hover #mousehover_movemargin_element {
margin-left: calc(100% - 130px - 50px);
background:yellow;
transition: all 1s;
cursor: pointer;
}
</code></pre>
<pre><code class="language-markup">
<div id="mousehover_movemargin">
<div id="mousehover_movemargin_element">Youhouuuuu</div>
</div>
</code></pre>
<h3>Positions... left/right/top/bottom</h3>
@@ -986,60 +1085,60 @@ MDN (transition) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/transi
<pre><code class="language-css">
.moveme {
.moveme {
z-index: 999;
}
.move_relative {
}
.move_relative {
position: relative;
}
.move_absolute {
}
.move_absolute {
position: absolute;
}
.move_fixed {
}
.move_fixed {
position: fixed;
opacity: 0;
bottom: 0px; right: 0
}
.moveme:hover {
}
.moveme:hover {
opacity: 0;
}
}
/* "Combinateur de voisins directs" (.item + .other) */
/* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */
.not_last_move:hover + .moveme,
.not_last_move:hover,
.move_fixed:hover {
/* "Combinateur de voisins directs" (.item + .other) */
/* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */
.not_last_move:hover + .moveme,
.not_last_move:hover,
.move_fixed:hover {
opacity: 1;
}
}
/* encore du CSS avancé... */
/* https://css-tricks.com/examples/nth-child-tester/ */
/* https://css-tricks.com/how-nth-child-works/ */
.moveme:nth-last-child(2) {
/* encore du CSS avancé... */
/* https://css-tricks.com/examples/nth-child-tester/ */
/* https://css-tricks.com/how-nth-child-works/ */
.moveme:nth-last-child(2) {
border: 3px solid red;
}
.moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; }
}
.moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; }
.petit_padd { padding:4px; background: #FFF }
<!-- .not_last_move:hover { opacity: 0; } -->
.petit_padd { padding:4px; background: #FFF }
<!-- .not_last_move:hover { opacity: 0; } -->
#pos_sticky {
#pos_sticky {
position: sticky;
top: 0;
right: 0 !important;
float: right;
margin: 0;
background: aqua;
}
}
</code></pre>
<pre><code class="language-markup">
<span class="moveme move_relative border petit_padd" style="left: 100px">relative + left:100px;</span>
<span class="moveme move_relative border petit_padd" style="left: 300px">relative + left:300px;</span>
<span class="moveme move_relative border petit_padd" style="top: -70px">relative + top:-70px;</span>
<span class="moveme move_absolute border petit_padd not_last_move" style="top: -70px">absolute + top:-70px;</span>
<span class="moveme move_fixed border petit_padd" >fixed + bottom: 0px; right: 0;</span>
<span class="moveme move_relative border petit_padd" style="left: 100px">relative + left:100px;</span>
<span class="moveme move_relative border petit_padd" style="left: 300px">relative + left:300px;</span>
<span class="moveme move_relative border petit_padd" style="top: -70px">relative + top:-70px;</span>
<span class="moveme move_absolute border petit_padd not_last_move" style="top: -70px">absolute + top:-70px;</span>
<span class="moveme move_fixed border petit_padd" >fixed + bottom: 0px; right: 0;</span>
</code></pre>
<!-- Gardé à l'extérieure pour que sticky marche -->
@@ -1051,9 +1150,6 @@ MDN (transition) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/transi
<h4>Dialog</h4>
<br>
<br>
<br>
<br>
<dialog open>
<p>Faisons une petite pause !</p>
@@ -1091,32 +1187,43 @@ MDN : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/::s
#incognito :is(.censured, .silencied, .unreadable)::selection{
color: #000;
}
</code></pre>
<pre><code class="language-markup">
<div id="incognito">
<div id="incognito">
<p>
Id quis id est cupidatat <span class="censured">ea culpa</span>. Excepteur excepteur adipisicing esse ullamco occaecat duis commodo reprehenderit commodo nostrud <span class="silencied">incididunt</span>. Dolore nisi nostrud aute mollit eu pariatur. In incididunt reprehenderit ut nisi veniam Lorem. Laboris irure occaecat cupidatat et.
</p>
<p>
Velit culpa deserunt <span class="unreadable">commodo magna eiusmod deserunt tempor aute excepteur et labore velit incididunt qui. Labore velit do sunt enim aliquip veniam deserunt deserunt.</span> Mollit proident reprehenderit ullamco. Dolor eu cillum ipsum consequat eu consectetur minim enim commodo dolor sint irure nostrud magna. Adipisicing enim laboris anim consectetur <span class="censured">Lorem incididunt dolore minim mollit deserunt ad dolor id ad exercitation</span>. Aliquip irure deserunt eiusmod minim ex nostrud duis irure ad laborum. Lorem cupidatat commodo exercitation laborum mollit sint sint consequat commodo.
</p>
</div>
</div>
</code></pre>
<h4>Textes</h4>
<div class="resume">MDN font-familly : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-family" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/font-family</a>
MDN font-size unités (em, px) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/length#em" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/length#em</a>
</div>
<pre><code class="language-css">
#text_basics {
text-align: center;
font-size: 1.2em;
line-height: 2em;
line-height: 2em; /* ((( em ))) 1em == Hauteur de la police... 1.5em 1xhauteur de la police + 0.5... */
font-family: sans-serif, Arial;
text-decoration: underline;
font-style: italic;
text-align: justify;
hyphens: auto;
}
#text_basics p:first-letter {
text-transform: uppercase;
@@ -1124,23 +1231,68 @@ MDN : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/::s
</code></pre>
<pre><code class="language-markup">
<div id="text_basics">
<div id="text_basics">
<p>ipsum exercitation adipisicing incididunt fugiat nulla laboris sit consectetur esse sunt laborum nisi nisi nisi ullamco. Deserunt cupidatat occaecat in. Proident voluptate exercitation culpa veniam nulla elit fugiat. Cillum id consequat fugiat dolore culpa proident amet. Lorem est qui quis nulla nostrud labore irure id culpa cupidatat non aute nostrud pariatur. Sint veniam cillum ut veniam voluptate excepteur commodo occaecat elit pariatur laborum. Laborum ad duis cupidatat consequat cillum enim cupidatat enim enim sint labore. Aliqua ipsum aliqua quis occaecat est sunt nulla sit pariatur velit nostrud dolore ipsum est.</p>
</div>
</div>
</code></pre>
<hr class="visible" />
</section>
</section>
<section class="centred">
<h2>Alignement de text, colones...</h2>
<!-- —> columns -->
<h3>Alignement manuel (2 colones left/right)</h3>
<div class="resume">MDN font-size unités (em, px) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/column-count" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/column-count</a></div>
<pre><code class="language-css">
#contenant {
display: block;
margin-bottom: 5rem;
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
.left, .right {
float:left;
width: 50%;
box-sizing: border-box;
}
.left {
width: calc(50% - 0px);
padding-left: 0px;
}
.right {
border-left: 1px solid #000;
padding-left: 30px;
}
}
</code></pre>
<pre><code class="language-markup">
<div id="contenant">
<span class="left">
<p>
@@ -1153,38 +1305,35 @@ MDN : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/::s
</p>
</span>
</div>
</code></pre>
<h3>Alignement css (column-count)</h3>
<pre><code class="language-css">
#contenant_cols {
column-count: 2;
float: left;
.text {
text-align: justify;
hyphens: auto;
display: block;
}
}
</code></pre>
<pre><code class="language-markup">
<div id="contenant_cols">
<div class="text">
Nulla et aliquip labore duis irure veniam ipsum labore excepteur
incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo
pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco
ullamco esse voluptate exercitation mollit velit ea aliquip aute eu.
Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea
cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat.
Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in
veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem
sint.
Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod
esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est.
Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip
consequat ea labore sit reprehenderit enim. Eu consequat consequat
excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor
excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim
laboris fugiat esse in.
Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est. Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip consequat ea labore sit reprehenderit enim. Eu consequat consequat excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim laboris fugiat esse in.
Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit
consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor
adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse
adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim
voluptate do proident aliquip occaecat.
Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim voluptate do proident aliquip occaecat.
</div>
</div>
</code></pre>
<br>
<br>
@@ -1193,23 +1342,33 @@ MDN : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/::s
<br>
<br>
<br>
</section>
</body>
<div id="top_page"><a href="#">#</a></div>
<footer>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script src="/assets/js/script_html_code.js"></script>
<script src="/assets/js/prism.js"></script>
<script src="/assets/js/prism_params.js"></script>
<script src="/assets/js/script_html_code.js"></script>
<script src="/assets/js/wrap_css_html_copy.js"></script>
<script type='text/javascript' src='/assets/js/jquery.erToc.min.js'></script>
<script src="/assets/js/toc_codethis_etc.js"></script>
<script src="/assets/js/script_html_infos.js"></script>
<script src="https://livejs.com/live.js"></script>
</footer>
</html>

190
public/0_intro_vscode.html Normal file
View File

@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vscode helper</title>
<link rel="stylesheet" href="style.css">
<style>
:root {
--background_titles: #00acf0 !important;
}
div.pre {
white-space: pre-line;
margin-top: -2em;
margin-bottom: 3rem;
}
body > div.pre:last-child {
margin-bottom: 6rem !important;
}
.important {
background: var(--background_titles);
padding: 2px 4px;
color: #FFF;
padding: 10px 20px;
font-weight: bold;
a {
color: #FFF !important;
}
}
</style>
</head>
<body>
<section>
<h1>Firefox</h1>
<div class="pre">
<kdb>CTRL+MAJ+I</kdb> les outils de dev. s'affichent
<kdb>CTRL+MAJ+M</kdb> vue adaptative
<kdb>CTRL+U</kdb>, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur)
</div>
<h1>VSCODE, VSCODIUM...</h1>
<div class="pre">
VScode
Le logiciel est un IDE, une interface visuelle pour coder...
Il est maintenu par Microsoft
Des gens ont mis à jour une version "sans Microsoft"
( sans "Telimetry" == aspiration de données )
- VSCodium - Open Source Binaries of VSCode
↳ <a href="https://vscodium.com" target="_blank">https://vscodium.com/</a>
- Codium ( vscodium Windows )
↳ <a href="https://thorium.rocks/codium" target="_blank">https://thorium.rocks/codium/</a>
La version ici (https://code.bonnebulle.xyz) est une version "serveur" <a href="https://coder.com/" target="_blank">infos sur Coder</a>, mais c'est le.la même interface...
Il y a quand même quelques changements mineurs, entre autres, pour les raccourcis clavier.
<span class="important">À installer également : <a href="https://hluk.github.io/CopyQ/" target="_blank">https://hluk.github.io/CopyQ/</a></span>
</div>
<h2>Raccourcis...</h2>
<h3>Dossiers / Fichiers</h3>
<div class="pre">
<kdb>Ctrl+Maj+S</kdb> sauvegarder sous (un autre nom)
<kdb>Ctrl+R</kdb> ouvrir un répertoire (espace de travail)
</div>
<h3>Commandes menus</h3>
<div class="pre">
<kdb>F1</kdb> [Affichage > Palette de commandes...] <--- chercher n'importe quelle action
(<kdb>Ctrl+Maj+P</kdb> sur Vscode non serveur)
<kdb>Ctrl+K + Ctrl+S</kdb> Raccourcis clavier
</div>
<h3>Affichage, panneaux</h3>
<div class="pre">
<kdb>Ctrl+Maj+O</kdb> Menu Layout (affichages)
...
<kdb>Alt+E</kdb> ( perso.custo ) : Toggle minimap
<kdb>Ctrl+B</kdb> Toggle panneau gauche (Explorer, autres)
<kdb>Ctrl+J</kdb> Toggle panneau Terminal
<kdb>Ctrl+K + Ctrl+M</kdb> Quand plusieurs éditeurs ouverts side-by-side (plusieurs groups d'éditeurs côte-à-côte)... va élargir l'éditeur actif (où est le curseur)
<div><strong>Voir Interfaces, groups, side-by-side... <a href="https://code.visualstudio.com/docs/getstarted/userinterface" target="_blank">https://code.visualstudio.com/docs/getstarted/userinterface</a></strong></div>
</div>
<h3>Navigation fichier</h3>
<div class="pre">
<kdb>Alt+O</kdb> (perso.custo) Afficher le fichier dans le navigateur (new tab) -- macro dans settings
<kdb>Alt+T</kdb> (perso.custo) Affichage rapide du dernier fichier ouvert (liste)
<kdb>Alt+Maj+T</kdb> (perso.custo) Affichage <strike>rapide</strike> du dernier fichier ouvert (liste)
<kdb>Ctrl+G</kdb> Go to line (> numéro de ligne)
<kdb>Ctrl+Alt+Z</kdb> (custo.perso) : curseur, revenir à la dernière intervention (précédent)... <kdb>+Maj</kdb> (suivant)
<a href="https://open-vsx.org/extension/codeandstuff/vscode-navigate-edit-history" target="_blank">https://open-vsx.org/extension/codeandstuff/vscode-navigate-edit-history</a>
</div>
<h3>Text, recherche...</h3>
<div class="pre">
<kdb>Alt+Z</kdb> Editor text, retour à la ligne (wrap text, largeur max)
...
<kdb>Ctrl+X</kdb> couper
<kdb>Fn+Fleches</kdb> : Aller au début / fin de ligne
<kdb>Maj</kdb> : sélectionné du text (marche avec début/fin de ligne)
...
<kdb>Ctrl+F</kdb> recherche ; <kdb>Ctrl+Maj+F</kdb> panneau de recherche + chercher dans tous les fichiers
<kdb>Ctrl+Maj+L</kdb> Rechercher dans le document/fichier le text actuellement sélectionné (mêmes occurences)
<kdb>Ctrl+Espace</kdb> Aides (suggestions, infos CSS, autres) ( <a href="https://code.visualstudio.com/docs/editing/intellisense" target="_blank">Intellisense</a> )
<kdb>CTRL+MAJ+/</kdb> Commenter
<kdb>CTRL+MAJ+Suppr</kdb> ( perso.custo ) : supprimer ligne courante !
</div>
<h3>Multi curseurs...</h3>
<div class="pre">
Selection > Utiliser <kdb>Ctrl+Clic</kdb>....
<strong>permet d'ajouter un curseur (de text) à plusieurs endroits...</strong>
<img src="./_ressources/0_intro/img/0_vscoder_multi_cursors.png">
<kdb>Ctrl+Maj + fleches(haut/bas)</kdb> ajouter un curseur (au dessus/dessous)
<kdb>Alt+A</kdb> ( perso.custo ) : annule le dernier ajout/déplacement/selection de curseur (pratique si on a mal sélectionné)
</div>
<h1>Tools / refs</h1>
<div class="pre">
MDN <a href="https://developer.mozilla.org/fr/" target="_blank">MozillaDevNework</a>
Commandes (Terminal) <a href="https://cht.sh/" target="_blank">https://cht.sh</a>
La <a href="https://la-cascade.io" target="_blank">Cascade</a>
</div>
</section>
</body>
<footer>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script type='text/javascript' src='./0_assets/jquery.erToc.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('section').erToc({'goTopNode':'section', 'startLevel': 'h1', 'numberedSuffix':'. ', tocTitle: 'Table des matières'});
});
</script>
</footer>
</html>

116
public/4_formulaires_php/index.php Normal file
View File

@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire PHP Simple</title>
</head>
<body>
<h1>Ajouter une entrée</h1>
<form method="POST">
<label>Texte :</label>
<input type="text" name="contenu" required>
<button type="submit">Enregistrer</button>
</form>
<hr>
<?php
// Charger les variables d'environnement depuis un fichier .env
// ... car oui ce projet est publié sur gitea (git)
// Dissimule le mot de passe + user ---- me les redemander !
function loadEnv($path) {
if (!file_exists($path)) {
throw new Exception("Fichier .env introuvable : $path");
}
if (!is_readable($path)) {
throw new Exception("Fichier .env non lisible : $path");
}
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if ($lines === false) {
throw new Exception("Impossible de lire le fichier .env : $path");
}
foreach ($lines as $line) {
$line = trim($line);
// Ignorer les commentaires et lignes vides
if (empty($line) || strpos($line, '#') === 0) {
continue;
}
// Parser la ligne KEY=VALUE
if (strpos($line, '=') === false) {
continue;
}
list($key, $value) = explode('=', $line, 2);
$key = trim($key);
$value = trim($value);
// Retirer les guillemets si présents
$value = trim($value, '"\'');
// Définir la variable d'environnement
putenv("$key=$value");
$_ENV[$key] = $value;
$_SERVER[$key] = $value;
}
}
// Charger le fichier .env (adapter le chemin selon votre structure)
loadEnv('/media/BC_01C/www/vscode_server/index/assets/mysql/.env');
// Configuration de la base de données
$host = getenv('DB_HOST') ?: '127.0.0.1';
$port = getenv('DB_PORT') ?: '3367';
$dbname = getenv('DB_NAME') ?: 'nom_base_de_donnes_default';
$username = getenv('DB_USER');
$password = getenv('DB_PASSWORD');
try {
// Connexion à MySQL
$pdo = new PDO("mysql:host=$host;port=$port;dbname=$dbname;charset=utf8", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Créer la table si elle n'existe pas
$createTable = "CREATE TABLE IF NOT EXISTS entrees (
id INT AUTO_INCREMENT PRIMARY KEY,
contenu TEXT NOT NULL,
date_creation DATETIME NOT NULL
)";
$pdo->exec($createTable);
// Si le formulaire est soumis
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contenu'])) {
$contenu = $_POST['contenu'];
// Insertion dans la base
$stmt = $pdo->prepare("INSERT INTO entrees (contenu, date_creation) VALUES (?, NOW())");
$stmt->execute([$contenu]);
echo "<p><strong>✓ Enregistré avec succès !</strong></p>";
}
// Affichage des entrées
echo "<h2>Entrées enregistrées :</h2>";
$stmt = $pdo->query("SELECT * FROM entrees ORDER BY date_creation DESC");
$entrees = $stmt->fetchAll(PDO::FETCH_ASSOC);
if (count($entrees) > 0) {
echo "<ul>";
foreach ($entrees as $entree) {
echo "<li>" . htmlspecialchars($entree['contenu']) . " <em>(" . $entree['date_creation'] . ")</em></li>";
}
echo "</ul>";
} else {
echo "<p>Aucune entrée pour le moment.</p>";
}
} catch (PDOException $e) {
echo "<p><strong>Erreur :</strong> " . $e->getMessage() . "</p>";
}
?>
</body>
</html>

1374
public/5_js/5_js.html Normal file
View File

File diff suppressed because it is too large Load Diff

8
public/_ressources/0_intro/css/style_basics.css Normal file
View File

@@ -0,0 +1,8 @@
p {
color: #000;
}
#next_flexbox {
background: #000; color: #FFF;
padding: 10px 20px;
}

3
public/_ressources/0_intro/css/style_columns.css Normal file
View File

@@ -0,0 +1,3 @@

0
public/0_assets/0_afficher_style.png → public/_ressources/0_intro/img/0_afficher_style.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

0
public/0_assets/0_firefox_parametres_devs.png → public/_ressources/0_intro/img/0_firefox_parametres_devs.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 142 KiB

0
public/0_assets/0_padding_margin.png → public/_ressources/0_intro/img/0_padding_margin.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

0
public/0_assets/0_padding_margin_cut.png → public/_ressources/0_intro/img/0_padding_margin_cut.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/_ressources/0_intro/img/0_vscoder_multi_cursors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

0
public/0_assets/vide.js → public/_ressources/0_intro/js/vide.js
View File

10
public/parts/header.html
View File

@@ -1,10 +0,0 @@
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Plain HTML site using GitLab Pages</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://livejs.com/live.js"></script>
</head>
<body>

85
public/style.css
View File

@@ -2,8 +2,19 @@
--property: #b77804;
--value: #0451A5;
--attr_value: #2aa198;
--background_titles: #000;
}
.er_toc_tag,
:not(.code-content) > p {
font-size: 1.3em;
}
.token.tag {
color: #800000 !important;
font-weight:400;
@@ -54,9 +65,9 @@ color: #FF0095 !important;
.token.unit {
color: #7400DA;
}
.token.hexcode.color {
/* .token.hexcode.color {
color: #00c3ff;
}
} */
.token.function {
color: #4A8147 !important;
@@ -225,8 +236,8 @@ codescaped.espace {
.file {
background: #e3eafd;
font-style: normal;
text-decoration: none;
color: #000 !important;
text-decoration: none !important;
padding: 0 7px;
}
@@ -274,6 +285,7 @@ div.code-toolbar > .toolbar {
code.term,
code.key,
kdb,
kdb.key {
background: gray;
color: #fff !important;
@@ -283,6 +295,7 @@ kdb.key {
border-radius: 4px;
white-space: pre-line;
}
kdb,
kdb.key {
font-size: 1em;
padding: 0px 10px;
@@ -345,14 +358,18 @@ hr.visible {
}
.color.value {
color: var(--value) !important;
font-weight: bold;
}
:not(.code-content) > :is(h1,h2,h3,h4,h5,h6) {
background: #000;
:not(.code-content) > :is(h1, h2, h3, h4, h5, h6) {
background: var(--background_titles);
color: #FFF;
padding: 10px 20px;
}
:is(html#centred, section.centred) :not(.code-content) > :is(h1, h2, h3, h4, h5, h6) {
margin-left: -10px;
}
#next_flexbox {
display: block;
@@ -366,6 +383,7 @@ hr.visible {
text-decoration: none;
width: 80px;
text-align: right;
color: blue;
}
.hash_title::before {
@@ -373,3 +391,60 @@ hr.visible {
content: counter(compteListe) " ";
font-size: 13px;
}
div.pre {
white-space: pre-line;
}
.er_toc {
margin: 2rem 0;
border: 1px solid gray;
padding: 2em 0 1em 2em;
}
#toc {
display: none;
}
#toc_checkbox:checked + #toc {
display: block;
}
#toc li {
margin-bottom: 1em;
}
#toc_wrapper {
margin: 40px 0px -40px 0;
}
.er_toc_top {
float: right;
text-decoration: none;
}
#top_page {
position: fixed;
top: 0;
left: 0;
}
#top_page a {
padding: 10px;
font-size: 1.2em;
text-decoration: none;
font-style: normal;
color: #000 !important;
}
.language-markup .token.keyword-class {
color: #000ECF !important;
}
.language-markup .token.keyword-id {
color: #C300FF !important;
}
/* quickfix ok with Normalise spaces (prism plugin) */
/* pre code[class^="language-"] {
color: #595959 !important;
margin-top: -1em;
display: block;
padding-bottom: 1em;
} */