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

156
_layouts/coop.html
View File

@ -5,92 +5,90 @@
<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 class="two-column">
<div class="two-column_left">
{% if page.email %}
<div>
<strong>Email:</strong>
<p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
</div>
{% endif %}
{% if page.telephone %}
<div>
<strong>Tel:</strong>
<p>{{ page.telephone }}</p>
</div>
{% endif %}
{% if page.address %}
<div>
<strong>Address:</strong>
<p>{{ page.address | split: "," | join: "<br>" }}</p>
</div>
{% endif %}
<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>
{% endif %}
{% if page.github %}
<div>
<strong>Github:</strong>
<p><a href="https://github.com/{{ page.github }}" target="_blank">{{ page.github }}</a></p>
<div class="two-column_right">
<section>
<p>{{ content }}</p>
</section>
{% if page.services %}
<section>
<h2 id="services">Services</h2>
<ul>
{% for service in page.services %}
{% assign s = site.services | where: "slug", service | first %}
<li><a href="{{ s.url | relative_url }}">{{ s.name }}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if page.technologies %}
<section>
<h2 id="tech">Technologies</h2>
<ul>
{% for technology in page.technologies %}
{% assign t = site.technologies | where: "slug", technology | first %}
<li><a href="{{ t.url | relative_url }}">{{ t.name }}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if page.clients %}
<section>
<h2 id="clients">Clients</h2>
<ul>
{% for client in page.clients %}
{% assign c = site.clients | where: "slug", client | first %}
<li>{{ c.title }}</li>
{% endfor %}
</ul>
</section>
{% endif %}
</div>
{% endif %}
{% if page.email %}
<div>
<strong>Email:</strong>
<p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
</div>
{% endif %}
{% if page.telephone %}
<div>
<strong>Tel:</strong>
<p>{{ page.telephone }}</p>
</div>
{% endif %}
{% if page.address %}
<div>
<strong>Address:</strong>
<p>{{ page.address | split: "," | join: "<br>" }}</p>
</div>
{% endif %}
</section>
<section>
<p>{{ content }}</p>
</section>
{% if page.services %}
<section>
<h2 id="services">Services</h2>
<ul>
{% for service in page.services %}
{% assign s = site.services | where: "slug", service | first %}
<li><a href="{{ s.url | relative_url }}">{{ s.name }}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if page.technologies %}
<section>
<h2 id="tech">Technologies</h2>
<ul>
{% for technology in page.technologies %}
{% assign t = site.technologies | where: "slug", technology | first %}
<li><a href="{{ t.url | relative_url }}">{{ t.name }}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if page.clients %}
<section>
<h2 id="clients">Clients</h2>
<ul>
{% for client in page.clients %}
{% assign c = site.clients | where: "slug", client | first %}
<li>{{ c.title }}</li>
{% endfor %}
</ul>
</section>
{% endif %}
</div>
{% include footer.html %}
</body>
</html>

33
assets/css/app.css
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);
}