changeset 99:e83a48ef3bf4

cheese: make the style much more mobile-friendly
author Paper <paper@tflc.us>
date Fri, 27 Dec 2024 17:06:48 -0500
parents caa6f0e136c8
children f638780ffe2f
files cheese/index.html css/style.css
diffstat 2 files changed, 13 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/cheese/index.html	Tue Nov 19 00:55:49 2024 -0500
+++ b/cheese/index.html	Fri Dec 27 17:06:48 2024 -0500
@@ -3,7 +3,7 @@
 title: cheese
 ---
 <div class="cheese-list">
-{% for item in site.data.cheese %}
-	<a href="{{ item.link }}"><img class="drop-shadow-box cheese-image" src="{{ item.link }}" alt="{{ item.name }}" title="{{ item.name }}"></a>
+{% for row in site.data.cheese %}
+	<a href="{{ row.link }}"><img class="drop-shadow-box cheese-image" src="{{ row.link }}" alt="{{ row.name }}" title="{{ row.name }}"></a>
 {% endfor %}
 </div>
--- a/css/style.css	Tue Nov 19 00:55:49 2024 -0500
+++ b/css/style.css	Fri Dec 27 17:06:48 2024 -0500
@@ -77,7 +77,7 @@
 }
 
 /* fuck off */
-h1, h2 {
+h1, h2, h3, h4, h5, h6 {
 	margin: 0;
 }
 
@@ -172,18 +172,22 @@
 .cheese-list {
 	display: flex;
 
+	column-gap: 0.5em;
+	row-gap: 0.5em;
 	flex-wrap: wrap;
-	justify-content: center;
 
-	row-gap: 0.5em;
-	column-gap: 0.5em;
+	justify-content: center;
+	align-items: center;
+
+	width: 100%;
 }
 
 .cheese-image {
+	/* should be a safe value */
+	min-height: 100px;
+	height: 33vh;
 	display: block;
-
-	height: 35vh;
-	width: auto;
+	object-fit: contain;
 }
 
 .plugs-list {