Style co-op pages

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

View File

@ -5,27 +5,16 @@
<body>
{% include header.html %}
<section>
<section class="slice">
<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>
<h1>{{ page.name }}</h1>
<a href="{{ page.website }}" target="_blank">{{ page.website }}</a>
<h1 class="slice_title">{{ page.name }}</h1>
<a class="slice_subtitle" href="{{ page.website }}" target="_blank">{{ page.website }}</a>
</section>
<section>
{% if page.twitter %}
<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 %}
<div class="two-column">
<div class="two-column_left">
{% if page.email %}
<div>
<strong>Email:</strong>
@ -44,13 +33,21 @@
<p>{{ page.address | split: "," | join: "<br>" }}</p>
</div>
{% 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>
<p>{{ content }}</p>
</section>
{% if page.services %}
<section>
<h2 id="services">Services</h2>
@ -89,8 +86,9 @@
</ul>
</section>
{% endif %}
</div>
</div>
{% include footer.html %}
</body>
</html>

View File

@ -132,8 +132,9 @@ h1, h2, h3, h4, h5, h6 {
background-color: var(--cotech-blue);
}
.slice-subtitle {
color: var(--cotech-light-grey);
.slice_title {
font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 2.5rem;
}
.slice--blue .slice_title {
@ -164,6 +165,10 @@ h1, h2, h3, h4, h5, h6 {
color: #7b8290;
}
.slice_logo {
max-width: 200px;
}
.metadata {
display: flex;
gap: var(--space-xl);
@ -238,3 +243,27 @@ h1, h2, h3, h4, h5, h6 {
display: flex;
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);
}