autonomic-cooperative/cotech-website
3
0
Fork 2
mirror of https://git.coop/cotech/website.git synced 2025-12-17 11:07:32 +00:00
Code Issues Releases Wiki Activity

Refactor hero into grid-uneven and large-only classes

Browse Source 
This makes it possible to reuse this CSS for the about page layout.
This commit is contained in:
Chris Lowis
2025-12-16 12:11:01 +00:00
parent 4ae2be1ff9
commit ced5d2ad0e
3 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
about.html
View File

@ -3,8 +3,8 @@ title: About
layout: default layout: default
--- ---
<section class="hero"> <section class="grid grid-uneven">
<div class="hero__left stack"> <div class="stack">
<h1>About CoTech</h1> <h1>About CoTech</h1>
<p class="large">Co-operative Technologists (CoTech) is a growing network of tech and digital service co-operatives working to reshape the technology sector in the UK.</p> <p class="large">Co-operative Technologists (CoTech) is a growing network of tech and digital service co-operatives working to reshape the technology sector in the UK.</p>
@ -14,17 +14,17 @@ layout: default
<p>We believe that businesses owned and run by their workers can create better workplaces, deliver higher quality products, and provide greater value to customers. Unlike traditional businesses, we have no private shareholders extracting profits.</p> <p>We believe that businesses owned and run by their workers can create better workplaces, deliver higher quality products, and provide greater value to customers. Unlike traditional businesses, we have no private shareholders extracting profits.</p>
</div> </div>
<div class="hero__right"> <div>
<img class="rounded" src="assets/img/stickies.jpg" alt="" /> <img class="rounded" src="assets/img/stickies.jpg" alt="" />
</div> </div>
</section> </section>
<section class="hero"> <section class="grid grid-uneven">
<div class="hero__left stack"> <div class="large-only">
<img class="rounded" src="assets/img/maria.jpg" alt="" /> <img class="rounded" src="assets/img/maria.jpg" alt="" />
</div> </div>
<div class="hero__right"> <div>
<p class="large">We strive to be a model of thought leadership and innovation in the tech sector and the progressive business movement. Our aim is to change both our industry and society through cooperation.</p> <p class="large">We strive to be a model of thought leadership and innovation in the tech sector and the progressive business movement. Our aim is to change both our industry and society through cooperation.</p>
</div> </div>
</section> </section>

34
assets/css/app.css
View File

@ -211,6 +211,16 @@ section, footer, header {
gap: var(--space-sm); gap: var(--space-sm);
} }
.large-only {
display: none;
}
@media screen and (width > 480px) {
.large-only {
display: inline;
}
}
.btn { .btn {
padding: var(--space-sm) var(--space-lg); padding: var(--space-sm) var(--space-lg);
background: var(--cotech-white); background: var(--cotech-white);
@ -249,6 +259,10 @@ section, footer, header {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.grid-uneven {
grid-gap: var(--space-lg);
}
@media (min-width: 420px) { @media (min-width: 420px) {
.grid { .grid {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -257,6 +271,10 @@ section, footer, header {
.grid-dense { .grid-dense {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
} }
.grid-uneven {
grid-template-columns: 3fr 2fr;
}
} }
.header { .header {
@ -353,22 +371,6 @@ section, footer, header {
} }
} }
.hero__right {
display: none;
}
@media screen and (width > 480px) {
.hero {
display: grid;
gap: var(--space-xl);
grid-template-columns: 3fr 2fr;
}
.hero__right {
display: inline;
}
}
footer { footer {
h3 { h3 {
border-left: none; border-left: none;

6
index.html
View File

@ -3,8 +3,8 @@ title: CoTech
layout: default layout: default
--- ---
<section class="hero"> <section class="grid grid-uneven">
<div class="hero__left stack"> <div class="stack">
<h1>We're building a cooperative digital economy</h1> <h1>We're building a cooperative digital economy</h1>
<p class="large">CoTech is a UK-wide network of creative technology companies <p class="large">CoTech is a UK-wide network of creative technology companies
@ -21,7 +21,7 @@ layout: default
</div> </div>
</div> </div>
<div class="hero__right"> <div class="large-only">
<img src="assets/img/decoration.svg" alt="" /> <img src="assets/img/decoration.svg" alt="" />
</div> </div>
</section> </section>