From b4faded4b36a01b520058f88d5884183f1870f66 Mon Sep 17 00:00:00 2001 From: Chris Lowis Date: Fri, 20 Jun 2025 14:49:33 +0100 Subject: [PATCH] Style homepage hero --- _layouts/home.html | 22 ++++++++++------------ assets/css/app.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 12 deletions(-) diff --git a/_layouts/home.html b/_layouts/home.html index 6e54808..ad099e1 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -4,20 +4,18 @@ {% include header.html %} -
-
-

Cooperative Technologists

-

Creative technology companies, fully owned and controlled by - the people who do the work. Cooperative ownership means tech - that’s better for its workers and customers.

+
+

Cooperative Technologists

+

Creative technology companies, fully owned and controlled by + the people who do the work.
+ Cooperative ownership means tech that’s better for its workers and customers.

- - Our manifesto - -
+ + Our manifesto + +
- {{ content }} -
+ {{ content }} {% include footer.html %} diff --git a/assets/css/app.css b/assets/css/app.css index 333c44c..e97fd04 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -50,3 +50,41 @@ h1, h2, h3, h4, h5, h6 { font-size: 1rem; letter-spacing: 0.05em; } + +.hero { + width: 100%; + padding: 8rem; + background-image: url(/assets/img/banner-collage.jpg); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + text-align: center; + +} + +.hero_body { + font-size: 1.5em; + font-weight: bold; + line-height: 1.6; + color: #ffffff; + max-width: 50ch; +} + +.hero_title { + display: none; +} + +.hero_button { + cursor: pointer; + padding: 1rem; + border: 1px solid white; + border-radius: 4px; +} + +.hero_button a { + color: white; +}