From fea43c63705a18ca8ca75aa4c6b006f5e1c48a3f Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Wed, 25 Jun 2025 21:23:29 +0100
Subject: [PATCH] Layout improvements on mobile
I've hidden the metadata and reduced some whitespace to make things
look a little better on small screens.
---
assets/css/app.css | 26 ++++++++++++++++++++++----
1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/assets/css/app.css b/assets/css/app.css
index caa8cf0..3843b41 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -118,7 +118,7 @@ section.content h2 {
.hero {
width: 100%;
- padding: var(--space-xxl);
+ padding: var(--space-lg) var(--space-sm);
background-image: url(/assets/img/banner-collage.jpg);
background-position: center center;
background-repeat: no-repeat;
@@ -130,6 +130,12 @@ section.content h2 {
text-align: center;
}
+@media screen and (width >= 480px) {
+ .hero {
+ padding: var(--space-xxl);
+ }
+}
+
.hero_body {
font-size: 1.5em;
font-weight: bold;
@@ -155,7 +161,7 @@ section.content h2 {
.slice {
width: 100%;
- padding: var(--space-lg);
+ padding: var(--space-sm);
display: flex;
flex-direction: column;
align-items: center;
@@ -163,6 +169,12 @@ section.content h2 {
text-align: center;
}
+@media screen and (width >= 480px) {
+ .slice {
+ padding: var(--space-lg);
+ }
+}
+
.slice--light-grey {
background-color: var(--cotech-light-grey);
}
@@ -217,8 +229,14 @@ section.content h2 {
}
.metadata {
- display: flex;
- gap: var(--space-xl);
+ display: none;
+}
+
+@media screen and (width >= 480px) {
+ .metadata {
+ display: flex;
+ gap: var(--space-xl);
+ }
}
.metadata_item {