From 06c0d8f45f9bfd9672e159a57813ade59d1915f3 Mon Sep 17 00:00:00 2001 From: Chris Lowis Date: Wed, 25 Jun 2025 21:34:58 +0100 Subject: [PATCH] Style service/technology pages --- _layouts/service.html | 33 +++++++++++++++++---------------- _layouts/technology.html | 33 +++++++++++++++++---------------- assets/css/app.css | 13 +++++++++++-- 3 files changed, 45 insertions(+), 34 deletions(-) diff --git a/_layouts/service.html b/_layouts/service.html index e784a78..b3c9368 100644 --- a/_layouts/service.html +++ b/_layouts/service.html @@ -6,25 +6,26 @@ {% include header.html %} -
-

Coops that offer {{ page.name }}

- {% if page.description %} -

{{ page.description }}

- {% endif %} -
+
+
+

Coops that offer {{ page.name }}

+ {% if page.description %} +

{{ page.description }}

+ {% endif %} +
-
- {% for coop in site.coops %} - {% if coop.services contains page.slug %} -
- - {{ coop.name }} +
+ {% for coop in site.coops %} + {% if coop.services contains page.slug %} + +
+ {{ coop.name }} +
+ {% endif %} + {% endfor %}
- {% endif %} - {% endfor %} -
- +
{% include footer.html %} diff --git a/_layouts/technology.html b/_layouts/technology.html index 7a6af0d..00e4502 100644 --- a/_layouts/technology.html +++ b/_layouts/technology.html @@ -6,25 +6,26 @@ {% include header.html %} -
-

Coops that use {{ page.name }}

- {% if page.description %} -

{{ page.description }}

- {% endif %} -
+
+
+

Coops that use {{ page.name }}

+ {% if page.description %} +

{{ page.description }}

+ {% endif %} +
-
- {% for coop in site.coops %} - {% if coop.technologies contains page.slug %} -
- - {{ coop.name }} +
+ {% for coop in site.coops %} + {% if coop.technologies contains page.slug %} + +
+ {{ coop.name }} +
+ {% endif %} + {% endfor %}
- {% endif %} - {% endfor %} -
- +
{% include footer.html %} diff --git a/assets/css/app.css b/assets/css/app.css index f6ef746..0f36eaf 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -45,18 +45,27 @@ h1, h2, h3, h4, h5, h6 { display: flex; flex-direction: column; align-items: center; + gap: var(--space-lg); + margin-bottom: var(--space-lg); } .page-heading { display: flex; - justify-content: center; - padding: 1rem; + flex-direction: column; + align-items: center; + gap: var(--space-md); + padding: var(--space-md); + text-align: center; } .page-heading h1 { font-size: 2.5rem; } +.page-heading p { + max-width: 60ch; +} + section.content { padding: var(--space-sm); max-width: 900px;