Responsiveness improvements of series page

Author: Seramis

content/series.njk

@@ -1,72 +1,83 @@
 ---js
 // <script>
 const eleventyNavigation = {
-  key: "Series",
-  order: 2,
+	key: "Series",
+	order: 2,
 };
 const aside = true;
 
 function pageSeries(collection){
   return Object.keys(collection)
     .map((name) => ({
-      name: name,
-      latestPostDate: new Date(Math.max(...collection[name].map(p => p.date))),
-      posts: collection[name],
+		name: name,
+		latestPostDate: new Date(Math.max(...collection[name].map(p => p.date))),
+		posts: collection[name],
     }))
     .sort((a, b) => b.latestPostDate - a.latestPostDate);
 };
 // </script>
 ---
 {% css %}
 .series-posts {
-  display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+	display: grid;
+	grid-gap: 1rem;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
 }
+@media(max-width: 1024px) {
+	.series-posts {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+@media(max-width: 640px) {
+	.series-posts {
+		grid-template-columns: 100%;
+	}
+}
+
 .series-post {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 8px;
-  background-color: var(--bg-color-secondary);
-  box-shadow: 2px 2px 4px var(--shadow-color);
-  transition: background-color 0.3s;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 8px;
+	background-color: var(--bg-color-secondary);
+	box-shadow: 2px 2px 4px var(--shadow-color);
+	transition: background-color 0.3s;
 }
 
 .series-view-all {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  padding: 8px;
-  background-color: var(--bg-color-secondary);
-  box-shadow: 2px 2px 4px var(--shadow-color);
-  transition: background-color 0.3s;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	padding: 8px;
+	background-color: var(--bg-color-secondary);
+	box-shadow: 2px 2px 4px var(--shadow-color);
+	transition: background-color 0.3s;
 }
 h3.series-title {
-  margin-bottom: 0.5rem;
+  	margin-bottom: 0.5rem;
 }
 {% endcss %}
 <h1>Series</h1>
 
 {% for series in pageSeries(collections.series) %}
-  {% if series.posts.length > 0 %}
-    {% set serieUrl %}/series/{{ series.name | slugify }}/{% endset %}
-    <h3 class="series-title"><a href="{{ serieUrl }}">{{ series.name }}</a></h3>
-    <div class="series-posts">
-      {% for post in series.posts.slice(-3) | reverse %}
-        <div class="series-post">
-          <a href="{{ post.url }}">
-            <img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" />
-            {{ post.data.title }}
-          </a>
-        </div>
-      {% endfor %}
-      {% if series.posts.length > 3 %}
-        <div class="series-view-all">
-          <a href="{{ serieUrl }}">View all {{ series.posts.length }} posts &gt;&gt;</a>
-        </div>
-      {% endif %}
-    </div>
-  {% endif %}
+	{% if series.posts.length > 0 %}
+		{% set serieUrl %}/series/{{ series.name | slugify }}/{% endset %}
+		<h3 class="series-title"><a href="{{ serieUrl }}">{{ series.name }}</a></h3>
+		<div class="series-posts">
+			{% for post in series.posts.slice(-3) | reverse %}
+				<div class="series-post">
+					<a href="{{ post.url }}">
+						<img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" />
+						{{ post.data.title }}
+					</a>
+				</div>
+			{% endfor %}
+			{% if series.posts.length > 3 %}
+				<div class="series-view-all">
+					<a href="{{ serieUrl }}">View all {{ series.posts.length }} posts &gt;&gt;</a>
+				</div>
+			{% endif %}
+		</div>
+	{% endif %}
 {% endfor %}