interhack/2026.camp.public.website
interhack/2026.camp.public.website
15
1
Fork 2
Code Issues 10 Pull requests 5 Projects Releases Packages 1 Wiki Activity Actions

- Modification des tailles et espacements des titres #23

Merged
Nono merged 3 commits from fougere/2026.camp.public.website:fix/guide-style into main 2026-01-22 11:21:34 +00:00
Conversation 1 Commits 3 Files changed 2 +59 -17
2 changed files with 59 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
css/base.css
View file

@ -55,30 +55,44 @@ main h1 {
main h2 { main h2 {
Nono marked this conversation as resolved
Nono commented 2026-01-19 11:15:20 +00:00
Review
Copy link

Y'a les titres sur les deux pages qui ne sont pas exactement au même endroit, y'a une sorte de marge qui existe entre les deux ;

image

Y'a les titres sur les deux pages qui ne sont pas exactement au même endroit, y'a une sorte de marge qui existe entre les deux ; ![image](/attachments/5f85e7fa-5025-4f88-9684-de0a9af45d36)
image.png
146 KiB
Screenshot From 2026-01-19 12-14-27.png
67 KiB
Screenshot From 2026-01-19 12-14-27.png
fougere commented 2026-01-20 18:54:49 +00:00
Review
Copy link

OK, donc pour ce bug j'ai bien galéré à trouver ce qui le causait. Il doit être là depuis un bout de temps car c'est un soucis du HTML.

Il manquait juste le <!DOCTYPE html> au début de la page index.htmlce qui fait que le navigateur rend la page différemment. C'est le quirks mode : https://developer.mozilla.org/fr/docs/Web/HTML/Guides/Quirks_mode_and_standards_mode

OK, donc pour ce bug j'ai bien galéré à trouver ce qui le causait. Il doit être là depuis un bout de temps car c'est un soucis du HTML. Il manquait juste le `<!DOCTYPE html>` au début de la page `index.html`ce qui fait que le navigateur rend la page différemment. C'est le quirks mode : https://developer.mozilla.org/fr/docs/Web/HTML/Guides/Quirks_mode_and_standards_mode
👀 1
fougere commented 2026-01-20 19:02:38 +00:00
Review
Copy link

Problème corrigé dans b9fbe5f681

Problème corrigé dans b9fbe5f681
position: relative; position: relative;
margin: 4% auto; margin: 12% auto 5% auto;
text-align: center; text-align: center;
font-size: clamp(1.5em, 4vw, 3em); font-size: clamp(1.5em, 12vw, 4em);
font-family: segoesc; font-family: segoesc;
} }
main h2:first-of-type {
font-size: clamp(1.5em, 5vw, 5em);
margin: 1em auto 0.5em auto;
}
main h3 { main h3 {
position: relative; position: relative;
text-align: center;
Nono marked this conversation as resolved
Nono commented 2026-01-19 11:14:39 +00:00
Review
Copy link

Le fait de supprimer le center fait que ce titre n'est plus centré ;

image

Le fait de supprimer le center fait que ce titre n'est plus centré ; ![image](/attachments/3ca06c25-cd5a-4008-a620-c2801b00dc46)
image.png
138 KiB
fougere commented 2026-01-20 19:02:04 +00:00
Review
Copy link

Problème corrigé dans 6ea6888c46

Problème corrigé dans 6ea6888c46
margin: auto; margin: auto;
width: 100%; width: 100%;
font-size: clamp(2em, 4vw, 4em); font-size: clamp(1.8em, 3vw, 4em);
margin-top: 5%; margin-top: 5%;
margin-bottom: 2%;
font-weight: lighter;
text-align: center;
}
main section h3 {
text-align: left;
}
main h4 {
margin: 0.8em 0;
} }
main p { main p {
margin: 1%; margin: 0 0 min(1em, 2%) 1%;
padding: 1%;
/* border: solid 1px; */
opacity: 0.90;
display: inline-block; display: inline-block;
z-index: 3; z-index: 3;
background-color: black; }
main p:last-child {
margin-bottom: 0;
} }
section { section {
@ -89,9 +103,14 @@ section {
margin: auto; margin: auto;
margin-bottom: 100px; margin-bottom: 100px;
padding: 2%; padding: 2%;
padding-left: 0px; padding-left: min(1em, 2%);
z-index: 1000; z-index: 1000;
box-shadow: -5px 5px 0px var(--accent-yellow), -10px 10px 0px var(--accent-orange), -15px 15px 0px var(--accent-violet); box-shadow: -5px 5px 0px var(--accent-yellow), -10px 10px 0px var(--accent-orange), -15px 15px 0px var(--accent-violet);
background-color: #000000b8;
}
section :is(h1, h2, h3, h4, h5, h6) {
line-height: 1em;
} }
nav, footer, aside { nav, footer, aside {
@ -139,15 +158,21 @@ main > img {
object-fit: scale-down; object-fit: scale-down;
} }
figcaption {
font-size: 0.6em;
line-height: initial;
}
.btn-nice { .btn-nice {
color: #FFFFFF; color: #FFFFFF;
text-shadow: -5px 5px 0px var(--accent-orange), -10px 10px 0px var(--accent-violet); text-shadow: -2px 2px 0px var(--accent-orange), -4px 4px 0px var(--accent-violet);
color: var(--accent-yellow); color: var(--accent-yellow);
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-align: center;
margin: auto; margin: auto;
position: relative; position: relative;
display: block; display: block;
font-weight: bold;
} }
#camp { #camp {
@ -163,3 +188,23 @@ main > img {
margin-right: 10%; margin-right: 10%;
line-height: 0.5em; line-height: 0.5em;
} }
code {
background: #ffffff1f;
padding: 0.2em 0.4em;
border-radius: 0.2em;
margin-right: 0.5ex;
}
.btn-nice code {
background: none;
padding: 0;
margin-right: 0;
}
@media (max-width: 500px) {
/* Hide stickers on mobile */
.randomStart {
display: none;
}
}

9
index.html
View file

@ -1,4 +1,5 @@
<html lang="en"> <!DOCTYPE html>
<html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -29,11 +30,6 @@
<img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt="">
<img class="draggable randomStart" src="assets/stickers/tracteur.png" alt=""> <img class="draggable randomStart" src="assets/stickers/tracteur.png" alt="">
<img class="draggable randomStart" src="assets/stickers/ecran.png" alt="">
<img class="draggable randomStart" src="assets/stickers/ferasouder.png" alt="">
<img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt="">
<img class="draggable randomStart" src="assets/stickers/tracteur.png" alt="">
<h1> <h1>
<span id="camp" class="draggable">camp</span> <span id="camp" class="draggable">camp</span>
<br> <br>
@ -122,4 +118,5 @@
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>