Initial pass at homepage, very incomplete

src/_includes/components/footer.html

@@ -1,8 +1,16 @@
-<footer class="footer">
+<footer class="footer has-outlined-shadow">
   <div class="content has-text-centered">
+    <img src="/static/images/lil-guy-5-white.svg">
+    <p>
+      © {{ metadata.copyright.year }} {{metadata.copyright.author}}
+    </p>
+    <p>
+      Design by <a href="https://www.innerloop.press/">inner loop press</a>, web design by <a href="winterbloom.com">Winterbloom</a>
+    </p>
+    <p>
+      Published under <a href="{{metadata.copyright.license_url}}" target="_blank">{{metadata.copyright.license}}</a>
+    </p>
     <p>
-      © {{ metadata.copyright.year }} {{metadata.copyright.author}},
-      Published under <a href="{{metadata.copyright.license_url}}" target="_blank">{{metadata.copyright.license}}</a>,
       <a href="{{metadata.github_url}}/blob/main/{{ page.inputPath }}" target="_blank">Edit on GitHub</a>
     </p>
   </div>

src/_includes/components/navbar.html

@@ -1,7 +1,7 @@
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <a class="navbar-item" href="/">
-      <img src="/static/images/ohm-lockup-color-logomark.png">
+      <span>OHS</span><span class="is-numbers">2025</span>
     </a>
     <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
       <span aria-hidden="true"></span>

src/_includes/layouts/base.html

@@ -21,11 +21,10 @@
       <main class="main">
         {{ content }}
       </main>
-
-      {% include "components/footer.html" %}
-      {% include "components/scripts.html" %}
     </div>
+    {% include "components/footer.html" %}
   </section>
+  {% include "components/scripts.html" %}
 </body>
 
 </html>

src/_includes/layouts/home.html

@@ -0,0 +1,7 @@
+---
+layout: layouts/base.html
+---
+<div class="home content my-6">
+    <img src="/static/images/header.svg" />
+    {{ content }}
+</div>

src/index.md

@@ -1,31 +1,73 @@
 ---
-layout: layouts/page.html
+layout: layouts/home.html
 title: 2025 Open Hardware Summit
 ---
 
-# October is Open Hardware Month!
+# The Open Hardware Summit returns to Montreal in 2025
 
-October is Open Hardware Month! Join us at [OSHWA] by [certifying hardware][certify] as open source, [becoming a member][membership], or – where it is safe due to the pandemic – hosting a small event.
-
-We are providing resources and asking the community to host small, local events (if it’s safe) in the name of open source hardware.  We ask that you have followed OSHWA’s rules listed on the ["Dos and Don'ts" page][dos-and-donts].
+<div class="lil-guy">
+    <img src="/static/images/lil-guy-1-color.svg">
+    <p>
+        The Open Hardware Summit will take place <strong>May 3rd & 4th, 2025</strong> at Concordia  University and LESPACEMAKER in Montreal, Québec, Canada.
+    </p>
+</div>
 
-<div class="is-flex is-justify-content-center my-6">
-    <a class="button is-link is-rounded is-large" href="/get-involved">Get involved</a>
+<div class="lil-guy is-right">
+    <img src="/static/images/lil-guy-2-color.svg">
+    <p>
+        Since 2010, the <a href="">Open Source Hardware Association</a>, a 501(c)(3) not for profit charity, has hosted the Open Hardware Summit- a comprehensive conference for the open hardware community and the ever changing open source hardware movement.
+    </p>
 </div>
 
-[OSHWA]: https://oshwa.org
-[certify]: https://certification.oshwa.org/
-[membership]: https://www.oshwa.org/membership/
-[dos-and-donts]: /dos-and-donts
+<div class="lil-guy">
+    <img src="/static/images/lil-guy-4-color.svg">
+    <p>
+        Speakers include world renowned leaders from industry, academia, the arts and maker community. Talks cover a wide range of subjects from electronics, mechanics to related fields such as digital fabrication, fashion technology, self-quantification devices, and IP law. As a microcosm of the Open Source Hardware community, the Open Hardware Summit provides an annual, friendly forum for the community.
+    </p>
+</div>
 
 
-## About OSHWA
 
-The Open Source Hardware Association (OSHWA) aims to foster technological knowledge and encourage research that is accessible, collaborative and respects user freedom. OSHWA’s primary activities include hosting the annual Open Hardware Summit and maintaining the Open Source Hardware certification, which allows the community to quickly identify and represent hardware that complies with the community definition of open source hardware.
+## Stay tuned!
 
-## Open Hardware Summit
+We'll have more details to share shortly, including when tickets go on sale and when we'll begin our call for speakers! In the meantime, [sign up for our newsletter][newsletter], [follow us], or [drop us an email][email].
 
-Document your project in October, then join us for the Open Hardware Summit in Montreal in 2024!
-[Sign up for our newsletter][newsletter] to receive forthcoming details.
 
 [newsletter]: https://oshwa.us19.list-manage.com/subscribe?u=3e1619d377d5a6c361ef3292b&id=ca147d8610
+[follow]: https://todo
+[email]: mailto:[email protected]
+
+
+
+## The team
+
+<div class="cool-person">
+    <img src="/static/images/lee.jpg" class="has-outlined-shadow">
+    <div>
+        <h3>Lee Wilkins</h3>
+        <ul class="details">
+            <li class="role">Summit chair</li>
+            <li><a href="">@leeborg_</a></li>
+        </ul>
+        <p>
+            Lee is an artist, cyborg, and educator currently based in Montreal. They hold a bachelor's from Concordia University, a master's from OCAD University, and currently are a PhD candidate at the University of Toronto. Lee is interested in lasers, technology, outer space exploration, and building whimsical robots.
+        </p>
+        <p>
+            They are a member of OSHWA's board of directors, co-executive director at <a href="">Little Dada</a>, and secretary and board member at <a href="Pleasure Dome">. You may know them from co-organizing events like <a href="">Make Change Conference</a>, <a href="">Make Friends Meetup</a>, <a href="">Long Exposure Festival</a>, <a href="">Defcon Biohacking Village</a>, or from being director at <a href="">Site 3 coLaboratory</a>.
+        </p>
+    </div>
+</div>
+
+<div class="cool-person">
+    <img src="/static/images/sid.png" class="has-outlined-shadow">
+    <div>
+        <h3>Sid Dirmay</h3>
+        <ul class="details">
+            <li class="role">Fellowship chair</li>
+            <li><a href="">@webspookie</a></li>
+        </ul>
+        <p>
+            Sid is a queer non-binary trans interdisciplinary artist who loves textiles, cyberpunk and snails. They work as the OSHWA's community coordinator and the summit fellowship chair for the OHS. They are also co-chair of <a href="">Dinacon</a> and a freelance journalist with bylines in CBC, This Magazine, and Broken Pencil Magazine. They are a passionate arts educator and zinester. They are probably in the middle of too many projects right now. You can find them at <a href="">sidneydrmay.com</a>.
+        </p>
+    </div>
+</div>

src/static/styles/ohs.css

@@ -8,6 +8,7 @@
 :root {
     --ohs-family-display: "BluuNext", Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
     --ohs-family-text: "Office Code Pro", 'Nimbus Mono PS', 'Courier New', monospace;
+    --ohs-family-numeric-accent: "Jacquard 24", "BluuNext", Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
 
     --ohs-color-primary: #615d59;
     --ohs-color-accent-pink: #F8DBFF;
@@ -23,6 +24,10 @@
     font-weight: bold;
 }
 
+.is-family-numeric-accent {
+    font-family: var(--ohs-family-numeric-accent);
+}
+
 /* Bulma customizations */
 :root {
     --bulma-body-size: 18px;
@@ -40,6 +45,10 @@ h6 {
     font-family: var(--ohs-family-display);
 }
 
+.content h2:not(:first-child) {
+    margin-top: 4rem;
+}
+
 .navbar {
     font-family: var(--ohs-family-display);
     font-weight: bold;
@@ -85,3 +94,151 @@ h6 {
         opacity: 1;
     }
 }
+
+/* Special OHS-specific fun stuff */
+
+
+/* Highlights and such */
+
+main strong {
+    font-weight: normal;
+    background-color: var(--ohs-color-accent-yellow);
+    outline: 0.15em solid var(--ohs-color-accent-yellow);
+}
+main em {
+    background-color: var(--ohs-color-accent-pink);
+}
+main a {
+    --bulma-link-text: var(--ohs-color-primary);
+    --bg: var(--ohs-color-accent-pink);
+    background-color: var(--bg);
+    outline: 0.15em solid var(--bg);
+}
+
+
+/* Navbar brand */
+
+.navbar-brand {
+    align-items: center;
+}
+
+.navbar-brand .navbar-item {
+    display: flex;
+    gap: 0.25rem;
+    align-items: baseline;
+}
+
+.navbar-brand .navbar-item .is-numbers {
+    font-family: var(--ohs-family-numeric-accent);
+    font-weight: normal;
+    font-size: 200%;
+    line-height: 0;
+}
+
+/* Home page layouts with lil illustrations */
+
+.lil-guy {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 2rem;
+    align-items: center;
+    margin-block: 2rem;
+}
+
+.lil-guy img {
+    max-width: 30%;
+    max-height: 10rem;
+    flex-shrink: 1;
+}
+
+.lil-guy.is-right {
+    flex-direction: row-reverse;
+}
+
+/* Home page / speaker layouts for people */
+
+.cool-person {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 2rem;
+    align-items: start;
+    margin-block: 2rem;
+}
+
+.cool-person img {
+    margin-top: 1.5rem;
+    max-width: 15rem;
+    max-height: 10rem;
+    flex-shrink: 1;
+}
+
+.cool-person ul.details {
+    list-style: none;
+    margin-inline: 0;
+    margin-block: 0.75rem;
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+    font-size: 1.2rem;
+}
+
+.cool-person ul.details li {
+    margin: 0;
+    padding: 0;
+}
+
+.cool-person ul.details li a {
+    --bg: var(--ohs-color-accent-yellow);
+}
+
+.cool-person ul.details li+li {
+}
+
+.cool-person ul.details li+li::before {
+    content: "·";
+    margin-right: 1rem;
+}
+
+/* Shadow magic */
+
+.has-outlined-shadow, .has-yellow-outlined-shadow {
+    --shadow-color: var(--ohs-color-accent-pink);
+    --shadow-outline-color: var(--ohs-color-primary);
+    --shadow-offset: 18px;
+    --shadow-border: 3px;
+    --shadow-border-max: calc(var(--shadow-offset) + var(--shadow-border));
+    --shadow-border-min: calc(var(--shadow-offset) - var(--shadow-border));
+    --main-shadow: var(--shadow-offset) calc(var(--shadow-offset) * -1) 0 var(--shadow-color);
+    --outline-shadow-1: var(--shadow-border-max) calc(var(--shadow-border-max) * -1) 0 var(--shadow-outline-color);
+    --outline-shadow-2: var(--shadow-border-min) calc(var(--shadow-border-max) * -1) 0 var(--shadow-outline-color);
+    --outline-shadow-3: var(--shadow-border-max) calc(var(--shadow-border-min) * -1) 0 var(--shadow-outline-color);
+    box-shadow: var(--main-shadow), var(--outline-shadow-1), var(--outline-shadow-2), var(--outline-shadow-3);
+}
+
+.has-yellow-outlined-shadow {
+    --shadow-color: var(--ohs-color-accent-yellow);
+}
+
+
+/* Footer magic */
+
+.footer {
+    margin-block-start: 6rem;
+    margin-inline: auto;
+    padding: 3rem 1.5rem 3rem;
+    max-width: 800px;
+    font-size: 0.9rem;
+    background-color: var(--ohs-color-primary);
+    color: white;
+}
+
+.footer a {
+    --bulma-link-text: var(--ohs-color-accent-yellow);
+}
+
+.footer img {
+    margin-block: auto 2rem;
+    max-width: 50%;
+}