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

Introduce stack to add consistent vertical spacing

Browse Source 
The default value of `--space` here is 1.4rem, to match the
default paragraph spacing.
This commit is contained in:
Chris Lowis
2025-12-15 12:15:33 +00:00
parent 72feafaf49
commit 7b8f5c9870
2 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/app.css
View File

@ -172,6 +172,20 @@ section {
padding: var(--space-sm); padding: var(--space-sm);
} }
.stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.stack > * {
margin-block: 0;
}
.stack > * + * {
margin-block-start: var(--space, 1.4rem);
}
.header { .header {
display: flex; display: flex;
padding: var(--space-lg) var(--space-md); padding: var(--space-lg) var(--space-md);

14
index.html
View File

@ -3,7 +3,7 @@ title: CoTech
layout: default layout: default
--- ---
<section> <section 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
@ -13,7 +13,7 @@ layout: default
<a href="#">Join the network</a> <a href="#">Join the network</a>
</section> </section>
<section> <section class="stack">
<h2>Our services</h2> <h2>Our services</h2>
<p class="intro">Between our member co-ops, we cover the full digital and creative <p class="intro">Between our member co-ops, we cover the full digital and creative
@ -22,7 +22,7 @@ layout: default
particularly when it comes to democratic ownership and particularly when it comes to democratic ownership and
decision-making.</p> decision-making.</p>
<div class="box"> <div class="box stack">
<h3 class="title">Digital products & platforms</h3> <h3 class="title">Digital products & platforms</h3>
<ul> <ul>
<li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li> <li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
@ -36,7 +36,7 @@ layout: default
</ul> </ul>
</div> </div>
<div class="box"> <div class="box stack">
<h3 class="title">Design & content</h3> <h3 class="title">Design & content</h3>
<ul> <ul>
<li>User research & testing</li> <li>User research & testing</li>
@ -49,7 +49,7 @@ layout: default
</ul> </ul>
</div> </div>
<div class="box"> <div class="box stack">
<h3 class="title">Marketing & comms</h3> <h3 class="title">Marketing & comms</h3>
<ul> <ul>
<li>Digital strategy & campaigns</li> <li>Digital strategy & campaigns</li>
@ -61,7 +61,7 @@ layout: default
</ul> </ul>
</div> </div>
<div class="box"> <div class="box stack">
<h3 class="title">Coop & organisational development</h3> <h3 class="title">Coop & organisational development</h3>
<ul> <ul>
<li>Cooperative Development</li> <li>Cooperative Development</li>
@ -72,7 +72,7 @@ layout: default
</div> </div>
</section> </section>
<section id="members"> <section id="members" class="stack">
<h2>Our members</h2> <h2>Our members</h2>
<p class="intro">Meet the coops behind CoTech</p> <p class="intro">Meet the coops behind CoTech</p>