[THEME] Fix the display of the letter page

layouts/archives/li.html

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

static/css/style.css

@@ -351,11 +351,10 @@ a.not(.anchor):focus {
 	height: 100px;
 }
 .archives-list .thumbnail {
-	display: block;
+	display: inline-block;
 	width: 15em;
 	text-align: left;
-	padding-right: 1.5em;
-	float: left;
+	margin-right: 1.5em;
 }
 @media only screen and (min-width: 768px) {
 	.archives-list .thumbnail {
@@ -363,8 +362,16 @@ a.not(.anchor):focus {
 		text-align: right;
 	}
 }
+.archives-list .title {
+	font-weight: bold;
+}
 .archives-list .description {
-	height: 100%;
+	display: inline-block;
+	min-width: 10em;
+	vertical-align: top;
+}
+.archives-list .description>p {
+	min-height: 3em;
 }
 .archive .more {
 	position: absolute;
@@ -403,20 +410,30 @@ a.not(.anchor):focus {
 }
 #letter-choice>p,
 #letter-form>label {
-	display: inline-block;
-	min-width: 10em;
+	display: block;
 }
+
 #letter-choice input:first-of-type {
 	margin-top: 0;
 }
 #letter-form input[type="text"] {
 	height: 2em;
-	width: 20em;
+	width: 100%;
 	max-width: 100%;
 }
 #letter-form #submit {
 	padding: 0.5em 0.8em;
 }
+@media only screen and (min-width: 768px) {
+	#letter-form>label {
+		display: inline-block;
+		min-width: 16em;
+	}
+	#letter-form input[type="text"] {
+		height: 2em;
+		width: 24em;
+	}
+}
 /******************* Paginator *******************/
 .pagination {
 	padding-left: 0;
@@ -772,6 +789,13 @@ blockquote:after {
 }
 
 /******************* Archive Gallery *******************/
+.thumb {
+	display: inline-block;
+	position: relative;
+}
+.thumb:hover {
+	z-index: 2;
+}
 .thumb>img {
 	max-height: 150px;
 	max-width: 150px;
@@ -792,7 +816,7 @@ blockquote:after {
 
 .lightbox img {
 	max-width: 90%;
-	max-height: 95%;
+	max-height: 92vh;
 	margin-top: 2%;
 	opacity: 0;
 }
@@ -849,7 +873,7 @@ blockquote:after {
 	color: #fafafa;
 	background-color: var(--background-color-dark);
 	border: solid 5px var(--font-color-em);
-	padding: 10px 15px;
+	padding: 0.7em 0.9em 0.6em 0.9em;
 	border-radius: 1px;
 	text-decoration: none;
 	opacity: 50%;