femmefaytale/cotech-website
0
0
Fork 0
forked from autonomic-cooperative/cotech-website
Code Issues Pull Requests Projects Releases Wiki Activity

Style co-op pages

Browse Source
This commit is contained in:
Chris Lowis
2025-06-20 16:33:36 +01:00
parent b3371aa8c9
commit 0916048bc3
2 changed files with 108 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
_layouts/coop.html
View File

@ -5,27 +5,16 @@
<body> <body>
{% include header.html %} {% include header.html %}
<section> <section class="slice">
<a href="{{ page.website }}" target="_blank"> <a href="{{ page.website }}" target="_blank">
<img src="/images/coops/{{ page.slug }}" alt="{{ page.slug }}"> <img class="slice_logo" src="/images/coops/{{ page.slug }}" alt="{{ page.slug }}">
</a> </a>
<h1>{{ page.name }}</h1> <h1 class="slice_title">{{ page.name }}</h1>
<a href="{{ page.website }}" target="_blank">{{ page.website }}</a> <a class="slice_subtitle" href="{{ page.website }}" target="_blank">{{ page.website }}</a>
</section> </section>
<section> <div class="two-column">
{% if page.twitter %} <div class="two-column_left">
<div>
<strong>Twitter:</strong>
<p><a href="http://twitter.com/{{ page.twitter }}" target="_blank">{{ page.twitter }}</a></p>
</div>
{% endif %}
{% if page.github %}
<div>
<strong>Github:</strong>
<p><a href="https://github.com/{{ page.github }}" target="_blank">{{ page.github }}</a></p>
</div>
{% endif %}
{% if page.email %} {% if page.email %}
<div> <div>
<strong>Email:</strong> <strong>Email:</strong>
@ -44,13 +33,21 @@
<p>{{ page.address | split: "," | join: "<br>" }}</p> <p>{{ page.address | split: "," | join: "<br>" }}</p>
</div> </div>
{% endif %} {% endif %}
</section> <div>
{% if page.twitter %}
<p><a href="http://twitter.com/{{ page.twitter }}" target="_blank">Twitter</a></p>
{% endif %}
{% if page.github %}
<p><a href="https://github.com/{{ page.github }}" target="_blank">Github</a></p>
{% endif %}
</div>
</div>
<div class="two-column_right">
<section> <section>
<p>{{ content }}</p> <p>{{ content }}</p>
</section> </section>
{% if page.services %} {% if page.services %}
<section> <section>
<h2 id="services">Services</h2> <h2 id="services">Services</h2>
@ -89,8 +86,9 @@
</ul> </ul>
</section> </section>
{% endif %} {% endif %}
</div>
</div>
{% include footer.html %} {% include footer.html %}
</body> </body>
</html> </html>

33
assets/css/app.css
View File

@ -132,8 +132,9 @@ h1, h2, h3, h4, h5, h6 {
background-color: var(--cotech-blue); background-color: var(--cotech-blue);
} }
.slice-subtitle { .slice_title {
color: var(--cotech-light-grey); font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 2.5rem;
} }
.slice--blue .slice_title { .slice--blue .slice_title {
@ -164,6 +165,10 @@ h1, h2, h3, h4, h5, h6 {
color: #7b8290; color: #7b8290;
} }
.slice_logo {
max-width: 200px;
}
.metadata { .metadata {
display: flex; display: flex;
gap: var(--space-xl); gap: var(--space-xl);
@ -238,3 +243,27 @@ h1, h2, h3, h4, h5, h6 {
display: flex; display: flex;
gap: var(--space-lg); gap: var(--space-lg);
} }
.two-column {
width: 100%;
display: flex;
justify-content: center;
gap: var(--space-xl);
padding: var(--space-lg)
}
.two-column p {
max-width: 70ch;
}
.two-column_left {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.two-column_right {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}