Update repo address, build cmd

README.md

@@ -1,3 +1,11 @@
 Proposition de design pour Librezo.
 
 [voir le rendu](http://librezo.txmn.tk)
+
+## Build
+
+[Install Zola](https://getzola.org)
+
+```bash
+	zola serve
+```

content/charte.md

@@ -0,0 +1,22 @@
++++
+title = "Charte"
++++
+
+Librezo est un collectif autogéré d'individus, d’associations et d’entreprises qui mutualisent leurs ressources, compétences et connaissances au sein d'une structure à taille humaine dans le but de :
+
+* promouvoir des solutions informatiques en licences libres comme alternatives aux licences propriétaires des GAFAM
+* encourager l’installation de serveurs auto-hébergés pour permettre à ses clients s’affranchir d’acteurs tiers et leur garantir la confidentialité et le contrôle de leurs données personnelles et de leur infrastructure numérique
+* créer un réseau de prestataires de confiance sur l’ensemble du territoire
+* accompagner ses clients dans leur utilisation des logiciels libres en vue de les rendre autonomes
+* développer un modèle économique viable pour la promotion du logiciel libre en mettant en œuvre des prestations de service sur mesure associées à son utilisation
+* La mission de Librezo s’inscrit dans une volonté technique de décentralisation des serveurs informatiques pour se préserver de la surveillance généralisée et de censure. Cette décentralisation répond également à la nécessaire réduction de l’empreinte énergétique du numérique.
+* Les membres de Librezo et leurs partenaires sont promoteurs, utilisateurs, contributeurs ou ont une implication forte dans le logiciel libre.
+* L'appartenance au collectif Librezo n'est pas liée à des accords financiers ou commerciaux, mais à l'évaluation par les autres membres du respect des valeurs et objectifs communs :
+  * liberté en tant que non nuisance symétrique
+  * horizontalité de la prise de décision
+  * partage et transmission des connaissances
+  * autonomie et entraide au sein d’une toile de confiance
+  * contribution au développement de l’écosystème du logiciel libre par la création de nouveaux outils informatiques
+  * politique locale des prestations favorisant la proximité géographique des clients et prestataires
+
+L’aventure Librezo est une expérimentation de démocratie d’entreprise. 

content/qui-sommes-nous.md

@@ -0,0 +1,36 @@
++++
+title = "Qui sommes-nous ?"
++++
+
+## Qui sommes-nous ?
+
+Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes désirant partager leur passion et leur savoir-faire dans le domaine des réseaux et du logiciel libre.
+
+{{ team_box(
+	title = "Étienne Bouché",
+	place = "Melun",
+	subtitle = "Le Technicien engagé",
+	img = "poka.jpg",
+	description = "Blabla"
+) }}
+{{ team_box(
+	title = "Cédric Dumond",
+	place = "Montreuil",
+	subtitle = "Le comédien bidouilleur",
+	img = "cedric.jpg",
+	description = "Blabla"
+) }}
+{{ team_box(
+	title = "Pascal Engélibert",
+	place = "Bordeaux",
+	subtitle = "Le bricoleur",
+	img = "tuxmain.jpg",
+	description = "Blabla"
+) }}
+{{ team_box(
+	title = "Tobias Ollive",
+	place = "Cambrai",
+	subtitle = "Le monocycliste",
+	img = "tobias.jpg",
+	description = "Blabla"
+) }}

sass/css/base.scss

@@ -1,8 +1,16 @@
+@import "defs";
+
+@import "footer";
+@import "header";
+@import "process";
+@import "services";
+@import "team";
+
 #dev-warning {
 	position: fixed;
 	top: 48px;
 	left: 0;
-	width: 256px;
+	width: 240px;
 	background-color: #fa0;
 	border-bottom: 4px dashed #000;
 	border-right: 4px dashed #000;
@@ -13,32 +21,27 @@
 	font-size: 20px;
 }
 
-@font-face {
-	font-family: Amatic;
-	src: url("/fonts/AmaticSC-Bold.woff2");
-}
-
-@font-face {
-	font-family: LunaSans;
-	src: url("/fonts/LunaSans-Regular.ttf");
-}
-
 html, body {
 	margin: 0;
 	padding: 0;
 	font-family: LunaSans;
 }
 
-@import "header";
-@import "footer";
-@import "services";
-@import "process";
-
 main {
 	width: 100%;
+	font-size: 18px;
+	min-height: calc(100vh - 155px);
+}
+
+main.center {
 	text-align: center;
 }
 
+main.narrower {
+	max-width: 900px;
+	margin: auto;
+}
+
 a, a:visited {
 	text-decoration: none;
 }

sass/css/defs.scss

@@ -0,0 +1,12 @@
+$blue: #0294d9;
+$violet: #ac44ff;
+
+@font-face {
+	font-family: Amatic;
+	src: url("/fonts/AmaticSC-Bold.woff2");
+}
+
+@font-face {
+	font-family: LunaSans;
+	src: url("/fonts/LunaSans-Regular.ttf");
+}

sass/css/footer.scss

@@ -1,6 +1,8 @@
+@import "defs";
+
 footer {
 	margin-top: 32px;
-	background: linear-gradient(0.25turn, #0294d9, #ac44ff);
+	background: linear-gradient(0.25turn, $blue, $violet);
 	color: #fff;
 	font-size: 18px;
 }

sass/css/header.scss

@@ -1,3 +1,5 @@
+@import "defs";
+
 header {
 	height: 48px;
 	max-width: 1100px;
@@ -28,5 +30,5 @@ header {
 }
 
 #header-menu a:hover, #header-menu a:focus {
-	text-shadow: 1px 2px 1px #ac44ff;
+	text-shadow: 1px 2px 1px $violet;
 }

sass/css/process.scss

@@ -1,7 +1,9 @@
+@import "defs";
+
 .process-title {
 	font-family: Amatic;
 	font-size: 42px;
-	background: linear-gradient(0.25turn, #0294d9, #ac44ff);
+	background: linear-gradient(0.25turn, $blue, $violet);
 	color: #fff;
 	margin-top: 16px;
 	margin-bottom: 16px;
@@ -26,7 +28,7 @@
 	width: 64px;
 	height: 64px;
 	font-size: 48px;
-	background: linear-gradient(-0.125turn, #0294d9, #ac44ff);
+	background: linear-gradient(-0.125turn, $blue, $violet);
 	color: #fff;
 	border-radius: 32px;
 }

sass/css/services.scss

@@ -1,16 +1,18 @@
+@import "defs";
+
 .need_services {
 	margin-top: 16px;
 	display: flex;
 	align-items: stretch;
 	justify-content: center;
-	border-right: 32px solid #ac44ff;
+	border-right: 32px solid $violet;
 }
 
 .need_box {
 	flex: 38%;
 	font-family: Amatic;
 	font-size: 42px;
-	background: linear-gradient(0.25turn, #0294d9, #ac44ff);
+	background: linear-gradient(0.25turn, $blue, $violet);
 	color: #fff;
 	display: flex;
 	flex-direction: column;
@@ -52,7 +54,7 @@
 }
 
 .service_box-link:hover, .service_box-link:focus {
-	text-shadow: 1px 2px 1px #ac44ff;
+	text-shadow: 1px 2px 1px $violet;
 }
 
 .service_box-title {

sass/css/team.scss

@@ -0,0 +1,16 @@
+@import "defs";
+
+.team_box {
+	float: left;
+	margin: 16px;
+}
+
+.team_box-img {
+	// 70% ~= 1/sqrt(2)
+	mask-image: radial-gradient(circle, #000 69%, transparent 70%);
+	width: 160px;
+}
+
+.team_box-subtitle {
+	color: $blue;
+}

templates/base.html

@@ -45,7 +45,7 @@
 						<li><a href="tel:+33782306653">07.82.30.66.53</a></li>
 						<li><a href="mailto:info@librezo.com">info@librezo.com</a></li>
 					</ul>
-					<a href="https://git.txmn.tk/tuxmain/librezo">Code source du site</a>
+					<a href="https://git.txmn.tk/Librezo/website">Code source du site</a>
 				</div>
 				<div class="footer-pane">
 					<p>

templates/index.html

@@ -6,7 +6,7 @@
 {% endblock head %}
 
 {% block body %}
-<main>
+<main class="center">
 	{{section.content | safe}}
 </main>
 {% endblock body %}

templates/page.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block title %}{{ config.extra.sitename|safe }}{% endblock title %}
+
+{% block head %}
+{% endblock head %}
+
+{% block body %}
+<main class="narrower">
+	{{page.content | safe}}
+</main>
+{% endblock body %}

templates/shortcodes/team_box.html

@@ -0,0 +1,17 @@
+<div class="team_box">
+	<a class="team_box-link">
+		<div class="team_box-img_wrap"><img class="team_box-img" src="/img/team/{{img|safe}}" alt="{{title}}" aria-hidden/></div>
+		<span class="team_box-title">{{title|safe}}</span>
+		{% if place %}
+			<span class="team_box-place">{{place|safe}}</span>
+		{% endif %}
+		{% if subtitle %}
+			<br/>
+			<span class="team_box-subtitle">{{subtitle|safe}}</span>
+		{% endif %}
+		{% if description %}
+			<br/>
+			<span class="team_box-description">{{description|safe}}</span>
+		{% endif %}
+	</a>
+</div>