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

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