autonomic-cooperative/cotech-website
3
0
Fork 2
mirror of https://git.coop/cotech/website.git synced 2025-12-18 04:27:32 +00:00
Code Issues 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>

79
assets/css/app.css
View File

@ -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);
}

4
assets/img/close.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30.3555" cy="30.3555" r="30.3555" fill="white"/>
<path d="M29.6565 28.8436L38.2221 20.278C38.6433 19.81 39.3454 19.81 39.7667 20.278C40.2347 20.6993 40.2347 21.4014 39.7667 21.8226L31.2011 30.3882L39.7667 38.9537C40.2347 39.4218 40.2347 40.1239 39.7667 40.5452C39.3454 41.0132 38.6433 41.0132 38.2221 40.5452L29.6565 31.9796L21.0441 40.5452C20.6229 41.0132 19.9208 41.0132 19.4995 40.5452C19.0315 40.1239 19.0315 39.4218 19.4995 38.9537L28.0651 30.3882L19.4995 21.8226C19.0315 21.4014 19.0315 20.6993 19.4995 20.278C19.9208 19.81 20.6229 19.81 21.0441 20.278L29.6565 28.8436Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 707 B