From bb785c79ed90e1545fa01787445bb2357ee7d23b Mon Sep 17 00:00:00 2001 From: Chris Lowis Date: Tue, 16 Dec 2025 10:28:55 +0000 Subject: [PATCH] Style the co-op pages to match the designs 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. --- _layouts/coop.html | 36 ++++++++++++-------- assets/css/app.css | 79 ++++++++++++++++++++++++++++++++++++++++++++ assets/img/close.svg | 4 +++ 3 files changed, 105 insertions(+), 14 deletions(-) create mode 100644 assets/img/close.svg diff --git a/_layouts/coop.html b/_layouts/coop.html index c4afea9..f2fc306 100644 --- a/_layouts/coop.html +++ b/_layouts/coop.html @@ -2,21 +2,29 @@ {% include head.html %} - - {% include header.html %} + +
+
+ + close + +
-
- - {{ page.slug }} - -

{{ page.name }}

- {{ page.website }} + + +
+

Co-operative name

+

{{ page.name }}

+ +

About this co-operative

+ {{ content }} + +

Co-operative website

+ + {{ page.name }} +
- -
-

{{ content }}

-
- - {% include footer.html %} diff --git a/assets/css/app.css b/assets/css/app.css index 65a6145..07ed6ab 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -389,3 +389,82 @@ footer { } } } + +.padded { + padding: var(--space-sm); +} + +.coop-info-box { + position: relative; + padding: 0; + margin: 0 auto; + overflow: hidden; + background: var(--cotech-white); + border-radius: var(--space-sm); + border: 2px solid var(--cotech-light-grey); + max-width: var(--measure); +} + +.coop-info-box__close { + position: absolute; + top: 10px; + right: 10px; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--cotech-white); + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + +.coop-info-box__close img { + transition: transform 0.3s ease; +} + +.coop-info-box__close:hover img { + transform: rotate(90deg); +} + +@media screen and (width > 480px) { + .coop-info-box__close { + top: 20px; + right: 20px; + width: 60px; + height: 60px; + } +} + +.coop-info-box__close a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.coop-info-box__content > * { + color: var(--cotech-black); +} + +.coop-info-box__content { + padding: var(--space-lg); +} + +.coop-info-box .btn { + filter: invert(100%); +} + +.coop-info-box h2 { + border-left: none; + padding-left: 0; +} + +.coop-info-box__logo { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: var(--cotech-black); +} diff --git a/assets/img/close.svg b/assets/img/close.svg new file mode 100644 index 0000000..03ec810 --- /dev/null +++ b/assets/img/close.svg @@ -0,0 +1,4 @@ + + + +