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> <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> {% if page.email %}
<strong>Twitter:</strong> <div>
<p><a href="http://twitter.com/{{ page.twitter }}" target="_blank">{{ page.twitter }}</a></p> <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> </div>
{% endif %}
{% if page.github %} <div class="two-column_right">
<div> <section>
<strong>Github:</strong> <p>{{ content }}</p>
<p><a href="https://github.com/{{ page.github }}" target="_blank">{{ page.github }}</a></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> </div>
{% endif %} </div>
{% 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 %}
{% 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);
}