mirror of
https://git.coop/cotech/website.git
synced 2026-02-07 01:39:02 +00:00
Various tweaks based on design feedback
Tommy sent over some feedback, and I've tried to incorporate it. I've brought in the Light variant of the Source Serif font, as although figma uses Regular, these seemed to render too heavy in browsers even with the smoothing options I also added.
This commit is contained in:
Chris Lowis
@ -19,10 +19,6 @@
|
||||
</dialog>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a class="btn" href="/hire">Hire our co-ops</a>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const dialog = document.getElementById('coop-dialog');
|
||||
const dialogBody = document.getElementById('coop-dialog-container__body');
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="grid">
|
||||
<div class="box stack">
|
||||
<h3 class="title">Digital products & platforms</h3>
|
||||
<ul>
|
||||
<ul class="services">
|
||||
<li>Websites & web apps
(WordPress, Drupal, Webflow, custom)</li>
|
||||
<li>CMS / CRM design and development</li>
|
||||
<li>E-commerce</li>
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
<div class="box stack">
|
||||
<h3 class="title">Design & content</h3>
|
||||
<ul>
|
||||
<ul class="services">
|
||||
<li>User research & testing</li>
|
||||
<li>Design sprints & discovery</li>
|
||||
<li>Accessibility & usability training</li>
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
<div class="box stack">
|
||||
<h3 class="title">Marketing & comms</h3>
|
||||
<ul>
|
||||
<ul class="services">
|
||||
<li>Digital strategy & campaigns</li>
|
||||
<li>Copywriting</li>
|
||||
<li>Social media marketing</li>
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
<div class="box stack">
|
||||
<h3 class="title">Co-op & organisational development</h3>
|
||||
<ul>
|
||||
<ul class="services">
|
||||
<li>Cooperative Development</li>
|
||||
<li>Facilitation</li>
|
||||
<li>Sociocracy Training</li>
|
||||
|
||||
@ -13,6 +13,11 @@
|
||||
src: url("/assets/fonts/SourceSerif4-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'source_serif_light';
|
||||
src: url("/assets/fonts/SourceSerif4-Light.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'source_serif_bold';
|
||||
src: url("/assets/fonts/SourceSerif4-Bold.ttf");
|
||||
@ -51,6 +56,15 @@ section {
|
||||
max-inline-size: none;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
main {
|
||||
--space: 3rem;
|
||||
}
|
||||
|
||||
p, li, a {
|
||||
font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
color: var(--cotech-white);
|
||||
@ -59,9 +73,9 @@ p, li, a {
|
||||
}
|
||||
|
||||
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;
|
||||
font-family: "source_serif_light", 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);
|
||||
line-height: 1.1;
|
||||
line-height: 1.2;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@ -76,48 +90,37 @@ h3.title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 48em) {
|
||||
h1 {
|
||||
font-size: calc(2.625rem + ((1vw - 0.48rem) * 2.8646));
|
||||
min-height: 0vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(2rem + ((1vw - 0.48rem) * 1.7361));
|
||||
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;
|
||||
}
|
||||
|
||||
p.intro {
|
||||
font-size: calc(1.125rem + ((1vw - 0.48rem) * 0.1736));
|
||||
min-height: 0vw;
|
||||
}
|
||||
|
||||
p, li, a {
|
||||
font-size: calc(0.875rem + ((1vw - 0.48rem) * 0.1736));
|
||||
min-height: 0vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.625rem;
|
||||
}
|
||||
|
||||
@media (min-width: 120em) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
|
||||
h3.title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p.large {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
p.intro {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p, li, a {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
h1 {
|
||||
font-size: 4.6875rem;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -145,6 +148,23 @@ h3.title {
|
||||
}
|
||||
}
|
||||
|
||||
ul.services {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.services li {
|
||||
padding-left: var(--space-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.services li::before {
|
||||
content: "−";
|
||||
color: var(--cotech-blue);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
}
|
||||
@ -165,15 +185,26 @@ img.rounded {
|
||||
border-radius: var(--space-sm);
|
||||
}
|
||||
|
||||
img.rectangle {
|
||||
aspect-ratio: 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
img.cover {
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img.stretch {
|
||||
object-fit: cover;
|
||||
object-position: 0px 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
section, footer, header {
|
||||
padding: var(--space-md);
|
||||
max-inline-size: 1024px;
|
||||
max-inline-size: 1144px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
BIN
assets/fonts/SourceSerif4-Light.ttf
Normal file
BIN
assets/fonts/SourceSerif4-Light.ttf
Normal file
Binary file not shown.
16
index.html
16
index.html
@ -5,15 +5,15 @@ layout: default
|
||||
|
||||
<section class="grid grid-uneven">
|
||||
<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
|
||||
fully owned and controlled by the people who do the work.</p>
|
||||
|
||||
<p class="intro">We design, build, and support digital and creative products for
|
||||
<p>We design, build, and support digital and creative products for
|
||||
organisations that want values-aligned tech.</p>
|
||||
|
||||
<img class="rounded" src="assets/img/richard.jpg" alt="Photo of Richard from Agile Collective giving a talk about CoTech" />
|
||||
<img class="rounded rectangle" src="assets/img/richard.jpg" alt="Photo of Richard from Agile Collective giving a talk about CoTech" />
|
||||
|
||||
<div class="switcher">
|
||||
<a class="btn" href="/hire">Hire our co-ops</a>
|
||||
@ -22,10 +22,18 @@ layout: default
|
||||
</div>
|
||||
|
||||
<div class="large-only">
|
||||
<img src="assets/img/decoration.svg" alt="Brand image with stylised lettering of the word 'Cotech'" />
|
||||
<img class="stretch" src="assets/img/decoration.svg" alt="Brand image with stylised lettering of the word 'Cotech'" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include services.html %}
|
||||
|
||||
<section>
|
||||
<a class="btn" href="/hire">Hire our co-ops</a>
|
||||
</section>
|
||||
|
||||
{% include our_members.html %}
|
||||
|
||||
<section>
|
||||
<a class="btn w-full" href="/hire">Hire our co-ops</a>
|
||||
</section>
|
||||
|
||||
@ -37,7 +37,7 @@ layout: default
|
||||
<div class="grid">
|
||||
<div class="box stack">
|
||||
<h3 class="title">More community</h3>
|
||||
<ul>
|
||||
<ul class="services">
|
||||
<li>A transparent, friendly group of mission-driven co-op founders and worker-owners</li>
|
||||
<li>Monthly online calls</li>
|
||||
<li>Twice-yearly in-person gatherings around the UK</li>
|
||||
@ -49,7 +49,7 @@ layout: default
|
||||
<div class="box stack">
|
||||
<h3 class="title">More skills</h3>
|
||||
|
||||
<ul>
|
||||
<ul class="services">
|
||||
<li>Develop business skills</li>
|
||||
<li>Share challenges of working in the digital/tech sector</li>
|
||||
<li>Swap tools, processes and experience</li>
|
||||
@ -59,7 +59,7 @@ layout: default
|
||||
|
||||
<div class="box stack">
|
||||
<h3 class="title">More work</h3>
|
||||
<ul>
|
||||
<ul class="services">
|
||||
<li>Strengthen your co-op’s reputation and value proposition by association with CoTech</li>
|
||||
<li>Generate leads through the CoTech brand and presence at sector events</li>
|
||||
<li>Get referrals from other members</li>
|
||||
|
||||
Reference in New Issue
Block a user