Team

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,3 +1,11 @@
+@import "defs";
+
+@import "footer";
+@import "header";
+@import "process";
+@import "services";
+@import "team";
+
 #dev-warning {
 	position: fixed;
 	top: 48px;
@@ -13,27 +21,12 @@
 	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;

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/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>