updated conference page, add focus left/right styles, added events to top nav and tweaked responsive behaviour

This commit is contained in:
simon
2026-08-04 14:38:19 +01:00
parent 567d1ae997
commit 336b66d7d3
3 changed files with 41 additions and 11 deletions
+1
View File
@@ -21,6 +21,7 @@
<li><a href="/work">Our work</a></li> <li><a href="/work">Our work</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
<li><a href="/why_coops">Why co-ops</a></li> <li><a href="/why_coops">Why co-ops</a></li>
<li><a href="/conference-2026">Events</a></li>
</ul> </ul>
</div> </div>
+25 -2
View File
@@ -196,6 +196,16 @@ img.cover {
width: 100%; width: 100%;
} }
/* opt-in crop focus, for cover images whose subject isn't in the middle.
object-position takes x then y, so these shift the crop horizontally only. */
img.cover.focus-right {
object-position: 70% 50%;
}
img.cover.focus-left {
object-position: 30% 50%;
}
img.stretch { img.stretch {
object-fit: cover; object-fit: cover;
object-position: 0px 0px; object-position: 0px 0px;
@@ -356,9 +366,20 @@ section, footer, header {
font-family: 'open_sansbold'; font-family: 'open_sansbold';
list-style-type: none; list-style-type: none;
display: flex; display: flex;
gap: var(--space-md); /* wrap whole items onto new rows rather than squeezing the logo off the header */
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-xs) var(--space-md);
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
/* opt out of the global 70ch measure so the row can grow with the viewport */
max-inline-size: none;
}
.header_menu-list li,
.header_menu-list a {
max-inline-size: none;
white-space: nowrap;
} }
.header_menu-list a { .header_menu-list a {
@@ -378,7 +399,7 @@ section, footer, header {
display: none; display: none;
} }
@media screen and (width < 480px) { @media screen and (width < 768px) {
.header { .header {
position: relative; position: relative;
} }
@@ -398,6 +419,8 @@ section, footer, header {
height: 100vh; height: 100vh;
background-color: var(--cotech-black); background-color: var(--cotech-black);
flex-direction: column; flex-direction: column;
/* full-height overlay: never break the column into a second column */
flex-wrap: nowrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: var(--space-lg); gap: var(--space-lg);
+15 -9
View File
@@ -21,26 +21,32 @@ permalink: /conference-2026
</div> </div>
<div> <div>
<img class="rounded cover" src="assets/img/richard.jpg" alt="Photo of someone giving a talk at a CoTech event" /> <img class="rounded cover focus-right" src="assets/img/richard.jpg" alt="Photo of someone giving a talk at a CoTech event" />
</div> </div>
</section> </section>
<section class="stack w-full"> <section class="stack w-full">
<h2>About the event</h2> <h2>About the event</h2>
<p class="intro">CoTech is bringing its network together for a day of honest conversation, genuine connection, and <p class="intro">Who builds AI, who controls it, and how do communities take their seat at the table?</p>
some big questions about the technology we're all living with.</p>
<p>This year's theme is AI. Not the hype, not the sales pitch, but the real debate. Is ethical AI actually possible? <p>CoTech is bringing its network together for a day of honest conversation, genuine connection, and some big questions about the technology we're all living with.</p>
And what does it mean for the kind of human-centred, ecologically-sustainable work we do?</p>
<p>We're kicking things off with a panel of expert speakers, then opening the floor. The afternoon is yours: <p>This year's theme is AI. Not the hype, not the sales pitch, but the real debate. Is ethical AI actually possible? And what does it mean for the kind of human-centred, ecologically-sustainable work we do?</p>
unconference sessions shaped by the people in the room, lightning talks, and the kind of conversations that don't
happen at corporate conferences.</p> <p>We're kicking things off with a panel of expert speakers, then opening the floor. The afternoon is yours: unconference sessions shaped by the people in the room, lightning talks, and the kind of conversations that don't happen at corporate conferences.</p>
<p>Come ready to think, disagree, and leave with something useful.</p> <p>Come ready to think, disagree, and leave with something useful.</p>
</section> </section>
<section class="stack w-full">
<h2> The Panellists</h2>
<h3>Giuseppe Sollazzo, Deputy Director of HMRC's Chief AI Office</h3>
<p>Giuseppe is helping HMRC set up its AI initiatives, specifically focussing on "good AI", assurance, and value creation. He previously led DWP's national-scale data products and services, and he was Deputy Director of the NHS AI Lab, the first public sector R&D AI initiative.</p>
<h3>Amanda Brock, OpenUK CEO</h3>
<p>OpenUK CEO, Professor Amanda Brock has grown it into a leading open source organisation and think tank. A lawyer with 25 year's experience across tech, she helped shape internet law in the 2000's and today's AI and open source law and policy at an international level. Amanda is a sought-after international keynote speaker and has written extensively on tech. She's the editor of Open Source Law, Policy and Practice, the seminal text in this space. Amanda's held many commercial, not for profit and public sector advisory and NXD roles. OpenUK's State of Open Con is one of open source's leading conferences.</p>
</section>
<section class="stack w-full"> <section class="stack w-full">
<h2>The day</h2> <h2>The day</h2>
@@ -87,7 +93,7 @@ permalink: /conference-2026
<h2>Who's it for</h2> <h2>Who's it for</h2>
<p class="intro">CoTech members and anyone who cares about tech that serves people not profit. If you work in digital <p class="intro">CoTech members and anyone who cares about tech that serves people not profit. If you work in digital
around co-ops, charities and the public sector, and youre curious about where cooperative technology is heading, around co-ops, charities and the public sector, and you're curious about where cooperative technology is heading,
this is for you.</p> this is for you.</p>
<div class="switcher"> <div class="switcher">