femmefaytale/cotech-website
0
0
Fork 0
forked from autonomic-cooperative/cotech-website
Code Issues Pull Requests Projects Releases Wiki Activity

Style the co-op pages to match the designs

Browse Source 
I've decided to style these pages to look like "modals" for now, but I
haven't implemented them as such yet. I think we might be able to add
some progressive enhancement to retain the scroll position when a
co-op logo is clicked to make it feel more like a separate modal
dialog is opening.
This commit is contained in:
Chris Lowis
2025-12-16 10:28:55 +00:00
parent f8d28d8aa3
commit bb785c79ed
3 changed files with 105 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
_layouts/coop.html
View File

@ -2,21 +2,29 @@
<html lang="en">
{% include head.html %}
<body>
{% include header.html %}
<body class="padded">
<section class="coop-info-box">
<div class="coop-info-box__close">
<a href="/#members">
<img src="/assets/img/close.svg" alt="close" />
</a>
</div>
<section>
<a href="{{ page.website }}" target="_blank">
<img src="/images/coops/{{ page.logo }}" alt="{{ page.slug }}">
</a>
<h1>{{ page.name }}</h1>
<a href="{{ page.website }}" target="_blank">{{ page.website }}</a>
<div class="coop-info-box__logo">
<img class="greyscale" src="/images/coops/{{ page.logo }}" alt="{{ page.slug }}">
</div>
<div class="coop-info-box__content stack">
<p><strong>Co-operative name</strong></p>
<h2>{{ page.name }}</h2>
<p><strong>About this co-operative</strong></p>
{{ content }}
<p><strong>Co-operative website</strong></p>
<a class="btn" href="{{ page.website }}">{{ page.name }}</a>
</div>
</section>
<section>
<p>{{ content }}</p>
</section>
{% include footer.html %}
</body>
</html>