update

ournetworks · Apr 11, 2024 · 8ce9449 · 8ce9449
1 parent 48489ee
commit 8ce9449
Show file tree

Hide file tree

Showing 22 changed files with 198 additions and 153 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,6 +1,6 @@
-<footer class="footer mt-2 mb-2 pb-s pt-s w-main">
+<footer class="footer mt-2 pt-4">
   <div class="container flex">
-    <div class="w-50">
+    <div class="w-100">
       <p><a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" rel="noopener">@{{ site.twitter_username }}</a></p>
 
       <p><a href="{% link code-of-conduct.md %}">Code of Conduct</a>, email <a href="mailto:[email protected]">[email protected]</a></p>
@@ -10,3 +10,17 @@
     </div>
   </div>
 </footer>
+<pre class="font-display-mono aliased text-10 mt-0 max-w-prose overflow-scroll inline-flex mb-0">
+                                              `::`
+                                              /
+                                            `    `;:`
+                    _
+                  _(_)_                          wWWWw   _
+      @@@@       (_)@(_)   vVVVv     _     @@@@  (___) _(_)_
+     @@()@@ wWWWw  (_)\    (___)   _(_)_  @@()@@   Y  (_)@(_)
+      @@@@  (___)     `|/    Y    (_)@(_)  @@@@   \|/   (_)\
+       /      Y       \|    \|/    /(_)    \|      |/      |
+    \ |     \ |/       | / \ | /  \|/       |/    \|      \|/
+jgs \\|//   \\|///  \\\|//\\\|/// \|///  \\\|//  \\|//  \\\|// 
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</pre>
+
diff --git a/_includes/icons/close.svg b/_includes/icons/close.svg
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,40 +1,21 @@
-<header class="header w-100 top-0 mb-2 font-display font-medium">
-  <div class="container flex relative w-100 flex-align-center flex-justify-space-between">
+{% assign currentTitle = page.title %}
+{% assign current = page.url %}
+{% assign sorted_pages = site.pages | sort: "order" %}
+{% assign sub_pages = '' | split: '' %}
+
+<header class="header w-100 top-0 mb-2">
+  <div class="container relative w-100">
     <a class="logo" href="{{ "/" | relative_url }}" rel="home" title="{{ site.title }}">
       {% include logo/soon-logo.svg %}
     </a>
     <input class="menu-btn none" type="checkbox" id="menu-btn" />
-    <label class="menu-icon none text-white bg-black" for="menu-btn"><span>Menu</span></label>
+    <label class="menu-icon none text-white bg-black rounded font-mono antialiased p-1 no-underline outlined" for="menu-btn"><span>Menu</span></label>
     <nav class="nav w-100" aria-label="Primary Menu">
-      <ul class="menu flex w-100 gap-4 text-center list-none">
-        {% assign currentTitle = page.title %}
-        {% assign current = page.url %}
-        {% assign sorted_pages = site.pages | sort: "order" %}
-          {% for page in sorted_pages %}
-             {% if page.order > 0 and page.parent == nil %}
-               <li>
-                 <a class="nav-item {% if current != '/' %}{% if page.url == current %}active{% endif %}{% endif %}"
-                    href="{% if page.content.size > 1 %}{{ page.url | relative_url }}{% else %}#{% endif %}" aria-label="{{ page.title }}">
-                    {% if page.titleDisplay %}{{ page.titleDisplay }}{% else %}{{ page.title }}{% endif %}
-                 </a>
-                {% assign sorted2_pages = site.pages | sort: "order" %}
-                 <ul class="nav-item-sub" aria-hidden="true">
-                    {% if page.title == "Previous years" %}
-                      {%- for year in site.data.previous-years -%}
-                        <li><a href="{{ year.redirect_to }}" aria-label="{{ year.titleDisplay }}" target="_blank">{{ year.titleDisplay }}</a></li>
-                      {%- endfor -%}
-                    {% else %}
-                      {%- for page2 in sorted2_pages -%}
-                        {% if page.title == page2.parent %}
-                        <li><a class="{% if current != '/' %}{% if page2.url == current %}active{% endif %}{% endif %}" href="{% if page2.redirect_to %}{{ page2.redirect_to }}{% else %}{{ page2.url }}{% endif %}" aria-label="{% if page2.titleDisplay %}{{ page2.titleDisplay }}{% else %}{{ page2.title }}{% endif %}">{% if page2.titleDisplay %}{{ page2.titleDisplay }}{% else %}{{ page2.title }}{% endif %}</a></li>
-                        {% endif %}
-                      {%- endfor -%}
-                    {% endif %}
-                 </ul>
-               </li>
-             {% endif %}
-        {% endfor %}
-      </ul> <!-- .nav -->
+<pre class="leading-normal"><ul class="menu w-100 gap-4 list-none"><a class="hover-ornament {% if current == '/' %}active{% endif %}" href="{{ "/" | relative_url }}" rel="home" title="{{ site.title }}">ournetworks.ca</a>{% for page in sorted_pages %}{% if page.order > 0 and page.parent == nil %}<li>{% if forloop.last %}└── {% else %}├── {% endif %}<a class="hover-ornament {% if current != '/' %}{% if page.url == current %}active{% endif %}{% endif %}"
+href="{% if page.content.size > 1 %}{{ page.url | relative_url }}{% else %}#{% endif %}" aria-label="{{ page.title }}">{% if page.titleDisplay %}{{ page.titleDisplay }}{% else %}{{ page.title }}{% endif %}</a>{% assign sorted2_pages = site.pages | sort: "order" %}<ul class="nav-item-sub">{% if page.title == "Previous years" %}{%- for year in site.data.previous-years -%}<li>│   {% if forloop.last %}└── {% else %}├── {% endif %}<a class="hover-ornament" href="{{ year.redirect_to }}" aria-label="{{ year.titleDisplay }}" target="_blank">{{ year.titleDisplay }}</a></li>
+{%- endfor -%}{% else %}{%- for page2 in sorted2_pages -%}{% if page.title == page2.parent %}{% assign sub_pages = sub_pages | push: page2 %}
+    {%- for page in sub_pages -%}
+    <li>│   {% if forloop.last %}└── {% else %}├── {% endif %}<a class="hover-ornament {% if current != '/' %}{% if page.url == current %}active{% endif %}{% endif %}" href="{% if page.redirect_to %}{{ page.redirect_to }}{% else %}{{ page.url }}{% endif %}" aria-label="{% if page.titleDisplay %}{{ page.titleDisplay }}{% else %}{{ page.title }}{% endif %}">{% if page.titleDisplay %}{{ page.titleDisplay }}{% else %}{{ page.title }}{% endif %}</a></li>{% endfor %}{% endif %}{%- endfor -%}{% endif %}</ul></li>{% endif %}{% endfor %}</ul></pre><!-- .nav -->
     </nav>
   </div>
 </header>
diff --git a/_includes/session-video.html b/_includes/session-video.html
@@ -11,7 +11,7 @@
       <img src="https://img.youtube.com/vi/{{ session.youtube }}/maxresdefault.jpg" loading="lazy" alt="Video thumbnail for {{ session.title }}" />
     </a>
   </div>
-  <header class="m-1">
+  <header class="mt-1">
     <h3 class="mb-0 mt-0 font-display">{{ session.title }}</h3>
     {%- if session.presenterID -%}
       <h4 class="session-presenter text-sm mt-1 font-normal">
@@ -29,23 +29,23 @@ <h4 class="session-presenter text-sm mt-1 font-normal">
       </h4>
     {%- endif -%}
   </header>
-  <div class="m-1">
-    <div class="text-xs">
-      {{ session.description | truncatewords: 20 | markdownify }}
+  <section>
+    <div>
+        <p class="text-xs">{{ session.description | truncatewords: 20 | markdownify | strip_html }}</p>
         {%- unless session.sessionType == "orga" or session.sessionType == "lightning-talk" -%}
-        <p><span class="read-more">
-          <a href="https://{{ include.year }}.ournetworks.ca/{%- if include.program-path -%}{{ include.program-path }}{% else %}program{%- endif -%}/#{{ session.title | truncatewords: 6, '' | downcase | replace: ':', '' | replace: ' ', '-' }}" rel="noopener">See session description</a></span></p>
+        <p class="text-sm">
+          <a href="https://{{ include.year }}.ournetworks.ca/{%- if include.program-path -%}{{ include.program-path }}{% else %}program{%- endif -%}/#{{ session.title | truncatewords: 6, '' | downcase | replace: ':', '' | replace: ' ', '-' }}" rel="noopener">See session description</a></p>
         {%- endunless -%}
       <div class="video-links-container pt-1">
         <h5 class="text-base mt-0 mb-0 font-display">Watch elsewhere:</h5>
         {%- if session.ipfs720 or session.ipfs1080 or session.youtube -%}
-          <ul class="list-none p-0">
+          <ul class="list-none p-0 text-xs font-mono">
            {%- if session.ipfs720 -%}<li class="video-links-item"><a href="{{ site.ipfs_gateway }}/ipfs/{{ session.ipfs720 }}" target="_blank" rel="noopener"><code>[&nbsp;720p]</code>ipfs://{{ session.ipfs720 }}</a></li>{%- endif -%}
            {%- if session.ipfs1080 -%}<li class="video-links-item"><a href="{{ site.ipfs_gateway }}/ipfs/{{ session.ipfs1080 }}" target="_blank" rel="noopener"><code>[1080p]</code>ipfs://{{ session.ipfs1080 }}</a></li>{%- endif -%}
            {%- if session.youtube -%}<li><a href="https://youtu.be/{{ session.youtube }}" target="_blank" rel="noopener">youtu.be/{{ session.youtube }}</a></li>{%- endif -%}
           </ul>
         {%- endif -%}
       </div>
     </div>
-  </div>
+  </section>
 </article>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -39,7 +39,7 @@
     />
   </head>
   <body class="bg-beige">
-    <main>{% include nav.html %} {{ content }} {% include footer.html %}</main>
+    <main class="max-w-prose mx-auto">{% include nav.html %} {{ content }} {% include footer.html %}</main>
     <script
       async
       src="{{ '/js/main.js' | relative_url }}?{{ site.time | date: '%s%N' }}"

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -3,11 +3,11 @@
 ---
 
 <div class="container">
-  <article class="w-main">
+  <div class="max-w-prose">
     <header>
       <h1 class="{{ page.titleClasses }} font-display">{{ page.title }}</h1>
     </header>
 
-    <div>{{ content }}</div>
-  </article>
+    <section>{{ content }}</section>
+  </div>
 </div>
diff --git a/_layouts/splash.html b/_layouts/splash.html
@@ -4,11 +4,30 @@
 
 <div class="container">
   <header>
-    <h1 class="font-display">Our Networks 2024</h1>
-    <h2 class="font-display">Does not (cloud) compute</h2>
-    <h3 class="font-display">July 27, 2024</h3>
-    <h4 class="font-display">312 Main</h4>
-    <h5 class="font-display">Vancouver, BC</h5>
+    <h1 class="font-display text-sm">Our Networks 2024</h1>
+    <h2 class="font-display text-4xl mt-0">Does not (cloud) compute</h2>
+    <h3 class="font-display text-2xl">July 27, 2024</h3>
+    <h4 class="font-display text-2xl mb-0">
+      <a href="https://312main.ca/" target="_blank">312 Main</a>
+    </h4>
+    <h5 class="font-display text-2xl mt-0 mb-0">Vancouver, BC</h5>
   </header>
-  {{ content }}
+  <div>
+    <pre class="font-display-mono aliased text-10 max-w-prose overflow-scroll">
+            .--..-.                        .--.  _.-.        
+           (    )  )            ☼         (    )'    )       
+         .-'       `-.     ☼            .-'.         `-.     
+  _     (   _.-~-._)-'              __ (    )       )   )    
+-~ ~-._ _.-~       ~-._..--~~--._.-~  ~~--..__-----' `-'     
+    _.-~               ~-._ _.-~              ~~--..__  ___..
+_.-~ ·      _____________ .          ~-._.                   
+           |░░░░░░░░░░░░░|   ·.         ~-._     . .  ·· . . 
+           |░░░░░☺░░░░░░░|
+           |░░░░░░░░░░░░░|
+           |░░░░░░░░░░░░░|
+            \\###########\\
+             \      ___    \
+              \_____\__\____\</pre>
+  </div>
+  <div class="max-w-prose">{{ content }}</div>
 </div>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -6,11 +6,17 @@ a {
 }
 
 p {
-  @extend .text-sm;
-  line-height: 1.5;
+  @extend .text-base;
+  @extend .leading-relaxed;
 }
 
 img {
   max-width: 100%;
   height: auto;
 }
+
+hr {
+  border: 0;
+  background-color: var(--black);
+  height: 1px;
+}
diff --git a/_sass/_fonts.scss b/_sass/_fonts.scss
@@ -1,12 +1,3 @@
-@font-face {
-  font-family: jgs;
-  src: url("fonts/jgs_font.woff2") format("woff2"),
-    url("fonts/jgs_font.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
 @font-face {
   font-family: jgs5;
   src: url("fonts/jgs5.woff2") format("woff2"),
@@ -16,24 +7,6 @@
   font-display: swap;
 }
 
-@font-face {
-  font-family: jgs7;
-  src: url("fonts/jgs7.woff2") format("woff2"),
-    url("fonts/jgs7.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: jgs9;
-  src: url("fonts/jgs9.woff2") format("woff2"),
-    url("fonts/jgs9.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
 @font-face {
   font-family: hershey-futural;
   src: url("fonts/Hershey-Futural--15.woff2") format("woff2"),

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -8,14 +8,14 @@
   overflow: hidden;
 }
 
-// Grid
-
-.content-width {
-  max-width: $content-width;
+.overflow-scroll {
+  overflow: scroll;
 }
 
+// Grid
+
 .container {
-  padding: 0 20px;
+  padding: 0 1.25rem;
 }
 
 .none {
@@ -30,6 +30,10 @@
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -89,8 +93,8 @@
   }
 }
 
-.w-main {
-  max-width: $content-width;
+.max-w-prose {
+  max-width: 65ch;
 }
 
 // Padding
@@ -99,12 +103,17 @@
   padding: 0;
 }
 
-.pt-s {
-  padding-top: 1em;
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
 }
 
-.pb-s {
-  padding-bottom: 1em;
+.px-2 {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 // Margin
@@ -153,8 +162,27 @@
   margin-right: 1em;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 // Gap
 
 .gap-4 {
   gap: 1rem;
 }
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.outlined:hover,
+.outlined:focus {
+  outline: 1px solid var(--black);
+  outline-offset: 0.2rem;
+}
+
+.outlined:active {
+  outline-width: 2px;
+}