[STYLE] Make navbar sticky

layouts/archives/li.html

@@ -1,8 +1,12 @@
 <a class="archive hidden_link" href="{{ .Params.ExternalLink | default .RelPermalink }}">
-		<img class="thumbnail" src="{{ .RelPermalink }}/thumb.jpg" />
+		{{ $thumb := $.Page.Resources.GetMatch "thumb.jpg"}}
+		{{ if $thumb }}
+			<img class="thumbnail" src="{{ .RelPermalink }}thumb.jpg" />
+		{{ else }}
+			<img class="thumbnail" src="/images/thumb.jpg" />
+		{{ end }}
 		<div class="description">
 			<span class="title">{{ .Title }}</span>
-			<p>{{ .Description }}</p>
 			<span class="more">&rarr; plus d'infos</span>
 		</div>
 </a>

layouts/archives/single.html

@@ -39,22 +39,6 @@
 				<a href="#img{{ $next }}" class="light-btn hidden_link btn-next">>></a>
 			</div>
 		{{ end }}
-				<div class="post-meta">
-					<!--div class="date">
-						<span class="posted-on">
-							<img class="page-icon header-icon" src="/svg/calendar.svg"/>
-							<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-								Article publié le {{ .Date.Day }} {{ index $.Site.Data.snotra.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}
-							</time>
-						</span>
-						<span class="reading-time">
-							<img class="page-icon header-icon" src="/svg/clock.svg"/>
-							{{ i18n "reading_time" .ReadingTime }}
-						</span>
-					</div-->
-					{{ partial "categories.html" .Page.Params.Categories }}
-					{{ partial "tags.html" .Page.Params.Tags }}
-				</div>
 			</header>
 		 			<div class="archive-body">
 				{{ .Content }}

static/css/style.css

@@ -14,6 +14,7 @@
 	--color03: #871818;
 
 	--image-margin-side: 2.5em;
+	--navigation-height: 4em;
 	
 	--content-width: 900px;
 }
@@ -24,7 +25,7 @@
 }
 html {
 	background-color: var(--background-color);
-	font-family: Lato, Helvetica, sans-serif;
+	font-family: serif;
 	font-size: medium;
 	color: var(--font-color);
 }
@@ -86,9 +87,13 @@ a.not(.anchor):focus {
 
 /******************* Navbar *******************/
 #navigation {
-	height: 4em;
+	position: fixed;
+	top: 0;
+	height: var(--navigation-height);
 	width: 100%;
-	line-height: 4em;
+	line-height: var(--navigation-height);
+	background-color: var(--background-color);
+	z-index: 100;
 }
 #navigation a {
 	padding: 1em;
@@ -302,6 +307,7 @@ a.not(.anchor):focus {
 .container {
 	max-width: 90vw;
 	margin: 0 auto;
+	margin-top: var(--navigation-height);
 	width: 100%;
 	display: flex;
 	flex: 1;
@@ -333,9 +339,24 @@ a.not(.anchor):focus {
 }
 
 /******************* Archives List *******************/
+#blog-list {
+	max-width: 95vw;
+}
+
 .archives-list {
 	list-style: none;
 	padding-left: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	justify-content: space-between;
+	gap: 1em;
+}
+
+.archives-list::after {
+	content: "";
+	flex: auto;
+	flex-basis: 20em;
 }
 .archives-list .archive {
 	display: block;
@@ -343,6 +364,7 @@ a.not(.anchor):focus {
 	margin: 1em 0;
 	overflow: auto;
 	border: none;
+	width: 100%;
 }
 .archives-list .archive:hover {
 	border: none;
@@ -352,11 +374,13 @@ a.not(.anchor):focus {
 }
 .archives-list .thumbnail {
 	display: inline-block;
-	width: 15em;
+	width: 100%;
 	text-align: left;
-	margin-right: 1.5em;
 }
 @media only screen and (min-width: 768px) {
+	.archives-list .archive {
+		width: 48%;
+	}
 	.archives-list .thumbnail {
 		display: inline-block;
 		text-align: right;
@@ -378,6 +402,10 @@ a.not(.anchor):focus {
 	bottom: 0;
 	right: 0;
 	font-style: italic;
+	display: none;
+}
+.archive:hover .more {
+	display: inherit;
 }
 
 /******************* Letters *******************/

static/svg/telegram.svg

@@ -0,0 +1,3 @@
+<svg width="1792" height="1792" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1189 1307l147-693c13-61-22-85-62-70L410 877c-59 23-58 56-10 71l221 69 513-323c24-16 46-7 28 9l-415 375-16 228c23 0 33-10 45-22l108-104 224 165c41 23 70 11 81-38zm603-411A896 896 0 1 1 0 896a896 896 0 0 1 1792 0z" fill="#efefef"/>
+</svg>