tribou_f/repaircafe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(style): improve css

Browse source
This commit is contained in:
Florent Tribouilloy 2025-12-05 22:05:38 +01:00
parent 7cc2f3d1de
commit f02e1c6d22
8 changed files with 235 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
content/about.md
View file

@ -2,11 +2,11 @@
title: "À propos"
---
## Le but
### Le but
Apprendre à diagnostiquer, à réparer.
## Comment ça marche ?
### Comment ça marche ?
1. Vous apportez votre objet cassé
2. Nous vous aidons à diagnostiquer la panne

4
content/contact.md
View file

@ -2,11 +2,11 @@
title: "Contact"
---
## Email
### Email
[repair-cafe@ariege.org](mailto:repair-cafe@ariege.org)
## Signal
### Signal
[Lien vers le groupe Signal](https://signal.group/#CjQKIAi5hEPZAURQ1OeINzRVDwUPLTTC_m44DvLV4bm3OTOIEhA2xOrPcBxVDOXPx30bU0_k)

18
layouts/_default/baseof.html
View file

@ -1,11 +1,15 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }} - {{ .Site.Title }}</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/content.css">
</head>
<body>
<header>
<nav>
@ -13,19 +17,23 @@
<ul>
<li><a href="/about">À propos</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="https://www.repaircafe.org/fr/" class="btn-nav" target="_blank" rel="noopener noreferrer">Repair Café</a></li>
<li><a href="https://adieuwindows.april.org/" class="btn-nav" target="_blank" rel="noopener noreferrer">Adieu Windows</a></li>
<li><a href="https://www.agendadulibre.org/" class="btn-nav" target="_blank" rel="noopener noreferrer">Prochaines dates</a></li>
<li><a href="https://www.repaircafe.org/fr/" class="btn-nav" target="_blank"
rel="noopener noreferrer">Repair Café</a></li>
<li><a href="https://adieuwindows.april.org/" class="btn-nav" target="_blank"
rel="noopener noreferrer">Adieu Windows</a></li>
<li><a href="https://www.agendadulibre.org/" class="btn-nav" target="_blank"
rel="noopener noreferrer">Prochaines dates</a></li>
</ul>
</nav>
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
<p>&copy; {{ now.Year }} Repair Café du Haut-Salat</p>
</footer>
</body>
</html>

6
layouts/_default/single.html
View file

@ -1,6 +1,6 @@
{{ define "main" }}
<content>
<h1>{{ .Title }}</h1>
<section class="content">
<h2>{{ .Title }}</h2>
{{ .Content }}
</content>
</section>
{{ end }}

73
layouts/index.html
View file

@ -1,38 +1,51 @@
{{ define "main" }}
<section class="maintitle">
<h1>Repair Café du Haut Salat</h1>
<p>Diagnostiquer, réparer, transmettre</p>
</section>
<div class="index">
<section class="maintitle">
<h1>Repair Café du Haut Salat</h1>
<p>Diagnostiquer, réparer, transmettre</p>
</section>
<section class="repair-dates">
<h2>Lab Place</h2>
<p class="date">Dernier samedi du mois, de 14h à 18h</p>
<p class="lieu">Lab Place, route d’Aulus à Oust</p>
</section>
<section class="repair-dates">
<div class="container">
<div class="header">
<h2>Événements</h2>
</div>
<div class="event">
<p class="date">Dernier samedi du mois, de 14h à 18h</p>
<p class="lieu">Lab Place, route d’Aulus à Oust</p>
</div>
<div class="event">
</div>
<div class="footer">
<h3>Plus à venir</h3>
</div>
</div>
</section>
<section class="presentation">
<h2>Qu'est-ce que le Repair Café du Haut Salat ?</h2>
<p>Une équipe de bénévoles est présente pour aider à réparer des objets cassés, installer Linux
ou former à l’utilisation des logiciels libres/trouver des alternatives.</p>
<section class="presentation">
<h2>Qu'est-ce que le Repair Café du Haut Salat ?</h2>
<p>Une équipe de bénévoles est présente pour aider à réparer des objets cassés, installer Linux
ou former à l’utilisation des logiciels libres/trouver des alternatives.</p>
<h2>Qu’est ce que l’on fait ?</h2>
<p>
Lors des réparations, nous aidons au diagnostic, guidons pour réparer et servons de troisième main.
La liste des objets pouvant être réparés dépend des bénévoles et des outils présents ce jour-là.
</p>
<h2>Qu’est ce que l’on fait ?</h2>
<p>
Lors des réparations, nous aidons au diagnostic, guidons pour réparer et servons de troisième main.
La liste des objets pouvant être réparés dépend des bénévoles et des outils présents ce jour-là.
</p>
<h2>Qu’est ce que l’on ne fait pas ?</h2>
<p>On ne fait pas du service de réparation. Les bénévoles</p>
<h2>Qu’est ce que l’on ne fait pas ?</h2>
<p>On ne fait pas du service de réparation. Les bénévoles</p>
<h2>Qui ?</h2>
<p>
Ce Repair Café est porté par trois associations locales (Lab Place, Hélios, La Ressourcerie du Haut Salat)
ainsi que des bénévoles qui organisent et animent ce moment.
</p>
<h2>Qui ?</h2>
<p>
Ce Repair Café est porté par trois associations locales (Lab Place, Hélios, La Ressourcerie du Haut Salat)
ainsi que des bénévoles qui organisent et animent ce moment.
</p>
<h2>Coût ?</h2>
<p>
Le Repair Café est gratuit.
</p>
</section>
<h2>Coût ?</h2>
<p>
Le Repair Café est gratuit.
</p>
</section>
</div>
{{ end }}

52
static/css/content.css Normal file
View file

@ -0,0 +1,52 @@
.content {
padding: 2rem;
border-radius: 8px;
color: #2e2c7e;
background-color: #e1e1e1;
padding: 1.5rem;
position: relative;
width: 100%;
height: 100%;
}
.content h1 {
margin-bottom: 2rem;
margin-left: 1rem;
font-size: 2.5rem;
font-weight: bold;
text-align: center;
}
.content h2 {
margin-top: 2rem;
margin-bottom: 1rem;
margin-left: 1rem;
font-size: 1.8rem;
text-align: center;
}
.content h3 {
color: #EF694A;
margin-top: 1.5rem;
margin-bottom: 1rem;
margin-left: 1rem;
font-size: 1.4rem;
}
.content p {
margin-bottom: 2rem;
margin-left: 2rem;
font-size: 1.1rem;
}
.content ul,
.content ol {
margin-left: 2rem;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.content li {
margin-left: 2rem;
margin-bottom: 0.5rem;
}

111
static/css/index.css Normal file
View file

@ -0,0 +1,111 @@
.index {
background-color: #e1e1e1;
border-radius: 8px;
padding: 0 5rem 1rem 5rem;
}
.index section {
margin-top: 0;
margin-bottom: 1rem;
padding-bottom: 0;
background-color: white;
}
.index .maintitle {
text-align: center;
}
.index .maintitle h1 {
padding-top: 3rem;
font-size: 3.5rem;
font-weight: bold;
color: #2e2c7e;
}
.index .maintitle p {
padding-top: 1.5rem;
padding-bottom: 1rem;
font-size: 1.4rem;
font-weight: 400;
color: #EF694A;
font-weight: bold;
}
.index .repair-dates h2 {
color: #2e2c7e;
font-size: 3rem;
font-weight: bold;
}
.index .repair-dates p {
color: #2e2c7e;
font-size: 1.3rem;
font-weight: bold;
}
.index .repair-dates h3 {
color: #2e2c7e;
font-size: 2rem;
font-weight: bold;
}
.index .repair-dates {
text-align: center;
padding: 2rem;
}
.index .repair-dates .date {
font-weight: bold;
color: #EF694A;
}
.index .repair-dates .lieu {
color: #2e2c7e;
}
.index .container {
display: grid;
grid-template-areas:
"header header"
"event event"
"footer footer";
grid-template-columns: 2fr 2fr;
}
.index .container div.header {
grid-area: header;
text-align: center;
margin-bottom: 2rem;
}
.index .container div.footer {
grid-area: footer;
text-align: center;
}
.index .container div.event {
grid-area: event;
font-size: 1.3rem;
margin-bottom: 2rem;
border: 1px solid black;
border-radius: 8px;
}
.index .presentation {
padding: 2rem;
}
.index .presentation h2 {
color: #2e2c7e;
font-size: 2rem;
font-weight: bold;
padding: 0.5rem;
text-align: center;
margin-top: 1rem;
}
.index .presentation p {
color: #2e2c7e;
font-size: 1rem;
text-align: justify;
}

141
static/css/style.css
View file

@ -6,9 +6,8 @@
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #2e2c7e;
background: #e1e1e1;
background-color: white;
}
header {
@ -56,131 +55,9 @@ nav a:hover {
main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
min-height: 60vh;
}
.maintitle {
text-align: center;
padding: 4rem 2rem;
background: white;
color: #2e2c7e;
margin: -2rem -2rem 3rem -2rem;
border-radius: 8px;
}
.maintitle h1 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: bold;
color: #2e2c7e;
}
.maintitle p {
font-size: 1.4rem;
font-weight: 400;
color: #EF694A;
}
section {
margin: 3rem 0;
padding: 2rem;
background: white;
border-radius: 8px;
}
section h2 {
color: #2e2c7e;
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: bold;
}
section h3 {
color: #EF694A;
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
section p {
font-size: 1.1rem;
margin-bottom: 1rem;
color: #2e2c7e;
}
.repair-dates {
background: white;
border: 3px solid #EF694A;
text-align: center;
padding: 3rem 2rem;
}
.repair-dates h2 {
color: #2e2c7e;
margin-bottom: 2rem;
}
.date {
font-size: 2rem;
font-weight: bold;
color: #EF694A;
margin: 1rem 0;
}
.lieu {
font-size: 1.3rem;
color: #2e2c7e;
}
.presentation {
background: white;
}
content {
padding: 2rem;
background: white;
border-radius: 8px;
}
content h1 {
color: #2e2c7e;
margin-bottom: 2rem;
font-size: 2.5rem;
font-weight: bold;
}
content h2 {
color: #2e2c7e;
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.8rem;
font-weight: bold;
}
content h3 {
color: #EF694A;
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1.4rem;
}
content p {
margin-bottom: 1rem;
font-size: 1.1rem;
color: #2e2c7e;
}
content ul, content ol {
margin-left: 2rem;
margin-bottom: 1rem;
font-size: 1.1rem;
color: #2e2c7e;
}
content li {
margin-bottom: 0.5rem;
background-color: white;
margin: auto;
}
footer {
@ -240,25 +117,25 @@ img[alt=signal-qrcode] {
flex-direction: column;
gap: 1rem;
}
nav ul {
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.maintitle h1 {
font-size: 2rem;
}
.maintitle p {
font-size: 1.1rem;
}
section {
padding: 1.5rem;
}
section h2 {
font-size: 1.5rem;
}
@ -274,4 +151,4 @@ img[alt=signal-qrcode] {
.btn-nav:hover {
background: white;
color: #EF694A !important;
}
}