From ad8f05c3bc184de401b2bdc6b97670741c276e35 Mon Sep 17 00:00:00 2001
From: ZettaScript <contact@zettascript.org>
Date: Mon, 26 Sep 2022 16:05:08 +0200
Subject: [PATCH] Process boxes

---
 content/_index.md                     | 19 +++++++++++
 sass/css/base.scss                    | 45 ++++++++++++++++++++++++++-
 templates/shortcodes/process_box.html |  5 +++
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 templates/shortcodes/process_box.html

diff --git a/content/_index.md b/content/_index.md
index 7d2d14b..c49b971 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -36,3 +36,22 @@ title = "Librezo"
 </div>
 
 <span class="slogan2">Et beaucoup, beaucoup d'autres...</span>
+
+<span class="slogan1">Comment ça se passe&#8239;?</span>
+
+<div class="process-title"><span>Autonomisation de l'infrastructure réseau</span></div>
+
+<div class="process_boxes">
+{{ process_box(number="1", title="Étude", description="Définition du besoin et propositions de solutions adaptées.") }}
+{{ process_box(number="2", title="Installation", description="Montage du serveur à domicile et installation du système et des composants logiciels.") }}
+{{ process_box(number="3", title="Configuration", description="Réglages sur mesure et configurations de sécurité.") }}
+{{ process_box(number="4", title="Acquisition", description="Votre serveur GNU/Linux est prêt et 100% entre vos mains. Tests.") }}
+</div>
+
+<div class="process-title"><span>Formations optionnelles</span></div>
+
+<div class="process_boxes">
+{{ process_box(number="5", title="Accompagnement utilisateur", description="Apprenez en quelques heures à utiliser vos outils.") }}
+{{ process_box(number="6", title="Accompagnement administrateur", description="Devenez administrateur-système de votre propre infrastructure (plusieurs semaines).") }}
+{{ process_box(number="7", title="Autonomie", description="Vous êtes capable de gérer votre système et vos applications : vous êtes autonome et n'avez plus besoin de tiers de confiance.") }}
+</div>
diff --git a/sass/css/base.scss b/sass/css/base.scss
index df93525..afabae3 100644
--- a/sass/css/base.scss
+++ b/sass/css/base.scss
@@ -44,7 +44,7 @@ header {
 }
 
 #header-menu a:hover, #header-menu a:focus {
-	border-bottom: 2px solid #ac44ff;
+	text-shadow: 1px 2px 1px #ac44ff;
 }
 
 main {
@@ -93,6 +93,7 @@ a, a:visited {
 	display: flex;
 	align-items: stretch;
 	justify-content: center;
+	border-right: 32px solid #ac44ff;
 }
 
 .need_box {
@@ -139,6 +140,10 @@ a, a:visited {
 	text-decoration: none;
 }
 
+.service_box-link:hover, .service_box-link:focus {
+	text-shadow: 1px 2px 1px #ac44ff;
+}
+
 .service_box-title {
 	position: relative;
 	top: 8px;
@@ -146,3 +151,41 @@ a, a:visited {
 	padding-bottom: 14px;
 	font-size: 24px;
 }
+
+.process-title {
+	font-family: Amatic;
+	font-size: 42px;
+	background: linear-gradient(0.25turn, #0294d9, #ac44ff);
+	color: #fff;
+}
+
+.process_boxes {
+	flex: 62%;
+	text-align: center;
+	font-family: LunaSans;
+}
+
+.process_box {
+	display: inline-block;
+	width: 256px;
+	padding-top: 4px;
+	vertical-align: top;
+}
+
+.process_box-number {
+	display: inline-block;
+	width: 64px;
+	height: 64px;
+	font-size: 48px;
+	background: linear-gradient(-0.125turn, #0294d9, #ac44ff);
+	color: #fff;
+	border-radius: 32px;
+}
+
+.process_box-title {
+	position: relative;
+	top: 8px;
+	display: inline-block;
+	padding-bottom: 14px;
+	font-size: 32px;
+}
diff --git a/templates/shortcodes/process_box.html b/templates/shortcodes/process_box.html
new file mode 100644
index 0000000..2d2bb73
--- /dev/null
+++ b/templates/shortcodes/process_box.html
@@ -0,0 +1,5 @@
+<div class="process_box">
+	<span class="process_box-number">{{number|safe}}</span><br/>
+	<span class="process_box-title">{{title|safe}}</span>{% if description %}<br/>
+	<span class="process_box-description">{{description|safe}}</span>{% endif %}
+</div>