From 0916048bc3574915b702c003ecd86bd3506f3de9 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Fri, 20 Jun 2025 16:33:36 +0100
Subject: [PATCH] Style co-op pages
---
_layouts/coop.html | 156 ++++++++++++++++++++++-----------------------
assets/css/app.css | 33 +++++++++-
2 files changed, 108 insertions(+), 81 deletions(-)
diff --git a/_layouts/coop.html b/_layouts/coop.html
index 0873d2e..394108e 100644
--- a/_layouts/coop.html
+++ b/_layouts/coop.html
@@ -5,92 +5,90 @@
<body>
{% include header.html %}
- <section>
+ <section class="slice">
<a href="{{ page.website }}" target="_blank">
- <img src="/images/coops/{{ page.slug }}" alt="{{ page.slug }}">
+ <img class="slice_logo" src="/images/coops/{{ page.slug }}" alt="{{ page.slug }}">
</a>
- <h1>{{ page.name }}</h1>
- <a href="{{ page.website }}" target="_blank">{{ page.website }}</a>
+ <h1 class="slice_title">{{ page.name }}</h1>
+ <a class="slice_subtitle" href="{{ page.website }}" target="_blank">{{ page.website }}</a>
</section>
- <section>
- {% if page.twitter %}
- <div>
- <strong>Twitter:</strong>
- <p><a href="http://twitter.com/{{ page.twitter }}" target="_blank">{{ page.twitter }}</a></p>
+ <div class="two-column">
+ <div class="two-column_left">
+ {% if page.email %}
+ <div>
+ <strong>Email:</strong>
+ <p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
+ </div>
+ {% endif %}
+ {% if page.telephone %}
+ <div>
+ <strong>Tel:</strong>
+ <p>{{ page.telephone }}</p>
+ </div>
+ {% endif %}
+ {% if page.address %}
+ <div>
+ <strong>Address:</strong>
+ <p>{{ page.address | split: "," | join: "<br>" }}</p>
+ </div>
+ {% endif %}
+ <div>
+ {% if page.twitter %}
+ <p><a href="http://twitter.com/{{ page.twitter }}" target="_blank">Twitter</a></p>
+ {% endif %}
+ {% if page.github %}
+ <p><a href="https://github.com/{{ page.github }}" target="_blank">Github</a></p>
+ {% endif %}
+ </div>
</div>
- {% endif %}
- {% if page.github %}
- <div>
- <strong>Github:</strong>
- <p><a href="https://github.com/{{ page.github }}" target="_blank">{{ page.github }}</a></p>
+
+ <div class="two-column_right">
+ <section>
+ <p>{{ content }}</p>
+ </section>
+
+ {% if page.services %}
+ <section>
+ <h2 id="services">Services</h2>
+
+ <ul>
+ {% for service in page.services %}
+ {% assign s = site.services | where: "slug", service | first %}
+ <li><a href="{{ s.url | relative_url }}">{{ s.name }}</a></li>
+ {% endfor %}
+ </ul>
+ </section>
+ {% endif %}
+
+ {% if page.technologies %}
+ <section>
+ <h2 id="tech">Technologies</h2>
+
+ <ul>
+ {% for technology in page.technologies %}
+ {% assign t = site.technologies | where: "slug", technology | first %}
+ <li><a href="{{ t.url | relative_url }}">{{ t.name }}</a></li>
+ {% endfor %}
+ </ul>
+ </section>
+ {% endif %}
+
+ {% if page.clients %}
+ <section>
+ <h2 id="clients">Clients</h2>
+
+ <ul>
+ {% for client in page.clients %}
+ {% assign c = site.clients | where: "slug", client | first %}
+ <li>{{ c.title }}</li>
+ {% endfor %}
+ </ul>
+ </section>
+ {% endif %}
</div>
- {% endif %}
- {% if page.email %}
- <div>
- <strong>Email:</strong>
- <p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
- </div>
- {% endif %}
- {% if page.telephone %}
- <div>
- <strong>Tel:</strong>
- <p>{{ page.telephone }}</p>
- </div>
- {% endif %}
- {% if page.address %}
- <div>
- <strong>Address:</strong>
- <p>{{ page.address | split: "," | join: "<br>" }}</p>
- </div>
- {% endif %}
- </section>
-
- <section>
- <p>{{ content }}</p>
- </section>
-
-
- {% if page.services %}
- <section>
- <h2 id="services">Services</h2>
-
- <ul>
- {% for service in page.services %}
- {% assign s = site.services | where: "slug", service | first %}
- <li><a href="{{ s.url | relative_url }}">{{ s.name }}</a></li>
- {% endfor %}
- </ul>
- </section>
- {% endif %}
-
- {% if page.technologies %}
- <section>
- <h2 id="tech">Technologies</h2>
-
- <ul>
- {% for technology in page.technologies %}
- {% assign t = site.technologies | where: "slug", technology | first %}
- <li><a href="{{ t.url | relative_url }}">{{ t.name }}</a></li>
- {% endfor %}
- </ul>
- </section>
- {% endif %}
-
- {% if page.clients %}
- <section>
- <h2 id="clients">Clients</h2>
-
- <ul>
- {% for client in page.clients %}
- {% assign c = site.clients | where: "slug", client | first %}
- <li>{{ c.title }}</li>
- {% endfor %}
- </ul>
- </section>
- {% endif %}
+ </div>
{% include footer.html %}
</body>
-
</html>
diff --git a/assets/css/app.css b/assets/css/app.css
index eba4b55..929bc8c 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -132,8 +132,9 @@ h1, h2, h3, h4, h5, h6 {
background-color: var(--cotech-blue);
}
-.slice-subtitle {
- color: var(--cotech-light-grey);
+.slice_title {
+ font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-size: 2.5rem;
}
.slice--blue .slice_title {
@@ -164,6 +165,10 @@ h1, h2, h3, h4, h5, h6 {
color: #7b8290;
}
+.slice_logo {
+ max-width: 200px;
+}
+
.metadata {
display: flex;
gap: var(--space-xl);
@@ -238,3 +243,27 @@ h1, h2, h3, h4, h5, h6 {
display: flex;
gap: var(--space-lg);
}
+
+.two-column {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: var(--space-xl);
+ padding: var(--space-lg)
+}
+
+.two-column p {
+ max-width: 70ch;
+}
+
+.two-column_left {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+}
+
+.two-column_right {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-lg);
+}