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

Typography defaults

Browse Source 
I've translated the two font sizes shown in Figma[1] to a responsive
scale using an online tool[2].

I've chosen a 70ch base measure as this seems to fit the designs based
on eyeballing them.

[1] https://www.figma.com/design/J0usguWJyGJSAqWSoozGos/Cotech--External-?node-id=2073-3627&t=H31i8C467gbX3TAJ-4
[2] https://websemantics.uk/tools/responsive-font-calculator/
This commit is contained in:
Chris Lowis
2025-12-15 11:43:09 +00:00
parent d5ee34dba9
commit 631c9a4fe6
2 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
assets/css/app.css
View File

@ -1,32 +1,25 @@
@font-face {
font-family: 'open_sansregular';
src: url("/assets/fonts/OpenSans-Regular-webfont.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'open_sansbold';
src: url("/assets/fonts/OpenSans-Bold-webfont.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'source_serif_regular';
src: url("/assets/fonts/SourceSerif4-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'source_serif_bold';
src: url("/assets/fonts/SourceSerif4-Bold.ttf");
font-weight: normal;
font-style: normal;
}
:root {
--measure: 70ch;
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
@ -41,14 +34,116 @@
--cotech-light-grey: #646464;
}
* {
max-inline-size: var(--measure);
}
html,
body,
div,
header,
nav,
main,
footer {
max-inline-size: none;
}
p, li, a {
font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
color: var(--cotech-white);
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: "source_serif_regular", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
color: var(--cotech-white);
font-weight: 400;
}
h3.title {
font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
color: var(--cotech-white);
font-weight: 700;
}
@media (min-width: 48em) {
h1 {
font-size: calc(2.625rem + ((1vw - 0.48rem) * 2.8646));
line-height: calc(1.2 + ((1vw - 0.48) * -0.2083));
min-height: 0vw;
}
h2 {
font-size: calc(2rem + ((1vw - 0.48rem) * 1.7361));
line-height: calc(1.2 + ((1vw - 0.48) * -0.1389));
min-height: 0vw;
}
h3 {
font-size: calc(1.625rem + ((1vw - 0.48rem) * 1.2153));
line-height: calc(1.2 + ((1vw - 0.48) * -0.1389));
min-height: 0vw;
}
h3.title {
font-size: calc(1.25rem + ((1vw - 0.48rem) * 0.3472));
min-height: 0vw;
}
p.large {
font-size: calc(1.375rem + ((1vw - 0.48rem) * 0.6944));
min-height: 0vw;
line-height: 1.4;
}
p.intro {
font-size: calc(1.125rem + ((1vw - 0.48rem) * 0.1736));
min-height: 0vw;
line-height: 1.4;
}
p, li, a {
font-size: calc(0.875rem + ((1vw - 0.48rem) * 0.1736));
min-height: 0vw;
line-height: 1.4;
}
}
@media (min-width: 120em) {
h1 {
font-size: 4.6875rem;
line-height: 1.05;
}
h2 {
font-size: 3.25rem;
line-height: 1.1;
}
h3 {
font-size: 2.5rem;
line-height: 1.1;
}
h3.title {
font-size: 1.5rem;
}
p.large {
font-size: 1.875rem;
line-height: 1.4;
}
p.intro {
font-size: 1.25rem;
line-height: 1.4;
}
p, li, a {
font-size: 1rem;
line-height: 1.4;
}
}
body {

14
index.html
View File

@ -6,7 +6,7 @@ layout: default
<section>
<h1>We're building a cooperative digital economy</h1>
<p>CoTech is a UK-wide network of creative technology companies
<p class="large">CoTech is a UK-wide network of creative technology companies
fully owned and controlled by the people who do the work.</p>
<a href="#">Hire our coops</a>
@ -16,14 +16,14 @@ layout: default
<section>
<h2>Our services</h2>
<p>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
stack. From strategy and discovery through to build, hosting and
long-term support. We can even support organisational development,
particularly when it comes to democratic ownership and
decision-making.</p>
<div>
<h3>Digital products & platforms</h3>
<h3 class="title">Digital products & platforms</h3>
<ul>
<li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
<li>CMS / CRM design and development</li>
@ -37,7 +37,7 @@ layout: default
</div>
<div>
<h3>Design & content</h3>
<h3 class="title">Design & content</h3>
<ul>
<li>User research & testing</li>
<li>Design sprints & discovery</li>
@ -50,7 +50,7 @@ layout: default
</div>
<div>
<h3>Marketing & comms</h3>
<h3 class="title">Marketing & comms</h3>
<ul>
<li>Digital strategy & campaigns</li>
<li>Copywriting</li>
@ -62,7 +62,7 @@ layout: default
</div>
<div>
<h3>Coop & organisational development</h3>
<h3 class="title">Coop & organisational development</h3>
<ul>
<li>Cooperative Development</li>
<li>Facilitation</li>
@ -74,7 +74,7 @@ layout: default
<section id="members">
<h2>Our members</h2>
<p>Meet the coops behind CoTech</p>
<p class="intro">Meet the coops behind CoTech</p>
<div>
{% for coop in site.coops %}