Program data and page (#193)

* initial set * link fixes * rm gh * updated description filters * adding session descriptions * wp * fix link * fix para * removed icons * Remove Jennifer (she cancelled) * Remove Hillary (she also cancelled * bios * update * adding session type * sort * jump link js * line update * nesting coc * updated data * add full stroke class * add inline and update bio class * style update * layout updates * remove broken link * updated scroll method and feedback * typo * fix zero * message * Two presenter updates and ticket link Co-authored-by: anon <[email protected]>
ournetworks · Aug 22, 2020 · dc48b4d · dc48b4d
1 parent a90b1d7
commit dc48b4d
Show file tree

Hide file tree

Showing 16 changed files with 612 additions and 105 deletions.
diff --git a/_data/presenters.yml b/_data/presenters.yml
diff --git a/_data/sessions.yml b/_data/sessions.yml
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -11,7 +11,7 @@
       </p>
     </div>
 
-    <p>Scuttlebutt gathering: <code class="overflow-wrap">%+0iVAZf/n2JnnwytKPPCLim1UNfBcXjiXvzla4TOP04=.sha256</code></p>
+    <p>Scuttlebutt gathering: <code class="overflow-wrap highlight">%+0iVAZf/n2JnnwytKPPCLim1UNfBcXjiXvzla4TOP04=.sha256</code></p>
 
     <p><a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" rel="noopener">@{{ site.twitter_username }}</a></p>
 

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -13,7 +13,7 @@
     <input class="menu-btn none" type="checkbox" id="menu-btn" />
     <label class="menu-icon none color-white bg-black" for="menu-btn"><span>Menu</span></label>
     <nav class="nav w-100" aria-label="Primary Menu">
-      <ul class="menu flex flex-justify-space-between w-100 text-center fw-bold ls-none">
+      <ul class="menu flex w-100 text-center fw-bold ls-none">
         {% assign currentTitle = page.title %}
         {% assign current = page.url %}
         {% assign sorted_pages = site.pages | sort: "order" %}

diff --git a/_includes/presenter-details.html b/_includes/presenter-details.html
@@ -1,20 +1,30 @@
-{%- if presenter.name -%}
+{%- if presenter.link or presenter.bio -%}
 <div class="presenter program-block content-width">
   <a class="program-block-anchor" id="{{ presenter.presenterID }}"></a>
   <div class="program-block-content p-1">
     <header>
-      <h3 class="presenter-name heading">{{ presenter.name }}</h3>
+      <h3 class="presenter-name heading mb-05">{{ presenter.name }}</h3>
     </header>
-    <div class="presenter-bio">
+    <div class="presenter-bio fs-medium">
       {%- if presenter.bio -%}<p>{{ presenter.bio }}</p>{%- endif -%}
-      {%- if presenter.link or presenter.twitter or presenter.github -%}
-        <ul class="bio-sm-list pl-0 flex">
-         {%- if presenter.link and presenter.linkDisplay -%}<li class="bio-sm-list-item"><a href="{{ presenter.link }}" target="_blank" rel="noopener" {% if presenter.linkIgnore %}data-proofer-ignore{% endif %} >{% include icons/link.svg %}&nbsp;{{ presenter.linkDisplay }}</a></li>{%- endif -%}
-         {%- if presenter.twitter -%}<li class="bio-sm-list-item"><a href="https://twitter.com/{{ presenter.twitter }}" target="_blank" rel="noopener">{% include icons/twitter.svg %}&nbsp;@{{ presenter.twitter }}</a></li>{%- endif -%}
-         {%- if presenter.github -%}<li class="bio-sm-list-item"><a href="https://github.com/{{ presenter.github }}" target="_blank" rel="noopener">{% include icons/github.svg %}&nbsp;{{ presenter.github }}</a></li>{%- endif -%}
+        {%- if presenter.link -%}
+        <ul class="bio-sm-list pl-0 flex mono mb-0">
+         {%- if presenter.link and presenter.linkDisplay -%}<li class="bio-sm-list-item"><a href="{{ presenter.link }}" target="_blank" rel="noopener" {% if presenter.linkIgnore %}data-proofer-ignore{% endif %} >{{ presenter.linkDisplay }}</a></li>{%- endif -%}
+          {%- if presenter.link2 and presenter.linkDisplay2 -%}<li class="bio-sm-list-item"><a href="{{ presenter.link2 }}" target="_blank" rel="noopener" {% if presenter.linkIgnore2 %}data-proofer-ignore{% endif %} >{{ presenter.linkDisplay2 }}</a></li>{%- endif -%}
         </ul>
-      {%- endif -%}
+        {%- endif -%}
+        {%- if presenter.twitter or presenter.github -%}
+          <ul class="bio-sm-list pl-0 flex mono mb-0 mt-1">
+            {%- if presenter.twitter -%}<li class="bio-sm-list-item">
+            <p class="mb-0 fs-small">Twitter</p>
+            <a href="https://twitter.com/{{ presenter.twitter }}" target="_blank" rel="noopener">@{{ presenter.twitter }}</a></li>{%- endif -%}
+           {%- if presenter.github -%}<li class="bio-sm-list-item">
+            <p class="mb-0 fs-small">GitHub</p>
+            <a href="https://github.com/{{ presenter.github }}" target="_blank" rel="noopener">{{ presenter.github }}</a></li>{%- endif -%}
+          </ul>
+        {%- endif -%}
     </div>
+    <button class="session-jump none mt-2 compact bg-black color-white">Back to session</button>
   </div>
 </div>
 {%- endif -%}
diff --git a/_includes/session-details.html b/_includes/session-details.html
@@ -4,18 +4,37 @@
   <div class="program-block-content p-1">
     <header class="session-header mb-1">
       <h3 class="session-title heading">{{ session.title }}</h3>
+      <ul class="ls-none p-0 flex fs-medium">
+      {% for item in session.sessionType %}
+        <li class="highlight p-05 mr-05 mono">{{ item | capitalize | replace: '-', ' ' }}</li>
+      {% endfor %}
+      </ul>
+
       {%- if session.presenterID -%}
           {% assign presenters = site.data.presenters[include.year] %}
           {% assign presenterCount = session.presenterID.size %}
-          <ul class="ls-none pl-0">
+          <ul class="ls-none pl-0 mono fs-medium">
           {%- for presenterID in session.presenterID -%}
             {%- for presenter in presenters -%}
               {%- if presenter.presenterID == presenterID -%}
                 {% assign name = presenter.name %}
+                {%- if presenter.bio or presenter.link-%}
+                  {% assign presenterLink = true %}
+                {%- else -%}
+                  {% assign presenterLink = false %}
+                {%- endif -%}
               {%- endif -%}
             {%- endfor -%}
             {% assign presenterCount = presenterCount | minus:1 %}
-            <li><h4 class="session-presenter">> <a href="#{{ presenterID }}">{{ name }}</a></h4></li>
+            <li class="inline">
+              <h4 class="session-presenter inline">
+              {%- if presenterLink -%}
+                <a href="#{{ presenterID }}" class="session-presenter-link">{{ name }}</a>
+              {%- else -%}
+                {{ name }}
+              {%- endif -%}
+              </h4> {%- if presenterCount > 0 -%},{%- endif -%}
+            </li>
           {%- endfor -%}
           </ul>
       {%- endif -%}
@@ -28,16 +47,19 @@ <h3 class="session-title heading">{{ session.title }}</h3>
       </div>
     {%- endif -%}
     {%- if session.description -%}
-    <div class="session-caption">
-        <p>{{ session.description | escape | newline_to_br | truncatewords: 75 }}{%- if session.descriptionLink -%}<span class="read-more"><a href="{{ session.descriptionLink }}" rel="noopener"> read more</a></span>{%- endif -%}</p>
+    <div class="session-caption fs-medium">
+      {{- session.description | escape | newline_to_br | truncatewords: 100 | markdownify -}}
     </div>
     {%- endif -%}
+    {%- if session.descriptionLink -%}
+      <div class="read-more mono fs-medium"><a href="{{ session.descriptionLink }}" rel="noopener">Read more</a></div>
+    {%- endif -%}
     {%- if session.link or session.twitter or session.github -%}
     <ul class="bio-sm-list">
-     {%- if session.link and session.linkDisplay -%}<li class="bio-sm-list-item"><a href="{{ session.link }}" target="_blank" rel="noopener">{% include icons/link.svg %}&nbsp;{{ session.linkDisplay }} </a></li>{%- endif -%}
-     {%- if session.twitter -%}<li class="bio-sm-list-item"><a href="https://twitter.com/{{ session.twitter }}" target="_blank" rel="noopener">{% include icons/twitter.svg %}&nbsp;@{{ session.twitter }}</a></li>{%- endif -%}
-     {%- if session.github -%}<li class="bio-sm-list-item"><a href="https://github.com/{{ session.github }}" target="_blank" rel="noopener">{% include icons/github.svg %}&nbsp;{{ session.github }}</a></li>{%- endif -%}
-     {%- if session.instagram -%}<li class="bio-sm-list-item"><a href="https://instagram.com/{{ session.instagram }}" target="_blank" rel="noopener">{% include icons/instagram.svg %}&nbsp;{{ session.instagram }}</a></li>{%- endif -%}
+     {%- if session.link and session.linkDisplay -%}<li class="bio-sm-list-item"><a href="{{ session.link }}" target="_blank" rel="noopener">{{ session.linkDisplay }} </a></li>{%- endif -%}
+     {%- if session.twitter -%}<li class="bio-sm-list-item"><a href="https://twitter.com/{{ session.twitter }}" target="_blank" rel="noopener">@{{ session.twitter }}</a></li>{%- endif -%}
+     {%- if session.github -%}<li class="bio-sm-list-item"><a href="https://github.com/{{ session.github }}" target="_blank" rel="noopener">{{ session.github }}</a></li>{%- endif -%}
+     {%- if session.instagram -%}<li class="bio-sm-list-item"><a href="https://instagram.com/{{ session.instagram }}" target="_blank" rel="noopener">{{ session.instagram }}</a></li>{%- endif -%}
     </ul>
     {%- endif -%}
   </div>

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -72,6 +72,10 @@ hr {
       margin-right: -20px;
     }
   }
+
+  &.full-stroke {
+    border-top-width: 5px;
+  }
 }
 
 // mark
@@ -93,7 +97,6 @@ pre {
 
 code {
   padding: 1px 5px;
-  background: rgba($accent-color,.1);
 }
 
 pre {

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -85,6 +85,10 @@
   display: block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -166,6 +170,10 @@
   padding: 0;
 }
 
+.p-05 {
+  padding: 0.5em;
+}
+
 .p-1 {
   padding: 1em;
 }
@@ -290,16 +298,9 @@
 
 // Social Media Biography
 
-.bio-sm-list {
-  margin-top: -$base-margin-bottom;
-  margin-bottom: $base-margin-bottom;
-  list-style: none;
-}
-
 .bio-sm-list-item {
   margin-right: $spacing-unit / 2;
   margin-top: 0;
-  padding: 5px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
@@ -23,6 +23,9 @@
     padding: 10px 15px;
     display: inline-flex;
     white-space: nowrap;
+    border: 1px solid $black;
+    border-radius: 20px;
+    text-decoration: none;
 
     @media (max-width: $on-palm) {
       display: block;
@@ -32,7 +35,6 @@
     &:hover,
     &.active {
       background: $accent-color;
-      border-radius: 20px;
 
       .nav-item-sub {
         display: block;
@@ -48,19 +50,31 @@
   }
 
   .menu {
-    display: inline-flex;
     margin: 0;
     padding: 0;
 
     li {
       position: relative;
-      flex-grow: 1;
+      margin-right: 1em;
+
+      @media (max-width: $on-palm) {
+        margin-right: 0;
+
+        &[aria-haspopup="true"] {
+          margin: 2em 0;
+        }
+
+        &[aria-haspopup="true"]:first-child {
+          margin-top: 0;
+        }
+      }
     }
 
     @media (max-width: $on-palm) {
       display: block;
       margin-top: 0.5em;
       margin-bottom: -0.5em;
+      padding: 1em;
 
       a {
         color: $black;
@@ -131,16 +145,19 @@ input[type="checkbox"].menu-btn {
   position: absolute;
   z-index: 1000;
   display: none;
-  width: 100%;
   padding: 0;
   list-style: none;
-  background: $white;
 
   a {
+    margin-top: 0.5em;
     display: block;
     white-space: nowrap;
     padding: 8px 10px;
     border-radius: 20px;
+    border: 1px solid $black;
+    border-radius: 20px;
+    text-decoration: none;
+    background: $white;
   }
 
   a:hover,

diff --git a/_sass/_tables.scss b/_sass/_tables.scss
@@ -147,8 +147,6 @@ thead th {
 }
 
 .program-block {
-  border-bottom: 1px solid $grey-table-borders;
-
   &:last-child {
     border-bottom: 0;
   }
@@ -166,11 +164,6 @@ thead th {
   .presenter-name {
     margin-top: 0;
   }
-
-  .bio-sm-list {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
 }
 
 .program-block-anchor:target {
@@ -180,6 +173,22 @@ thead th {
   visibility: hidden;
 
   & + .program-block-content {
-    background: $black;
+    border-radius: 20px;
+    background: $accent-color;
+
+    .session-jump {
+      display: block;
+    }
   }
 }
+
+.session-detail {
+  .program-block-anchor:target {
+    & + .program-block-content {
+      background: rgba($accent-color,.1);
+      .highlight {
+        background: rgba($accent-color,.2);
+      }
+    }
+  }
+}
diff --git a/_sass/_typography.scss b/_sass/_typography.scss
@@ -53,6 +53,10 @@ p {
   font-size: $small-font-size;
 }
 
+.fs-medium {
+  font-size: $medium-font-size;
+}
+
 .text-center {
   text-align: center;
 }
@@ -61,6 +65,10 @@ p {
   text-align: right;
 }
 
+.highlight {
+  background: rgba($accent-color,.1);
+}
+
 // Heading helpers
 
 .heading-1 {

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -17,6 +17,7 @@
 $base-font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
 $base-font-size: 16px;
 $base-font-weight: normal;
+$medium-font-size: 14px;
 $small-font-size: 12px;
 $base-line-height: 1.45;
 $base-heading-line-height: 1.2;

diff --git a/about.md b/about.md
@@ -5,6 +5,8 @@ title: "About the event"
 titleDisplay: "About"
 ---
 
+[TICKETS NOW AVAILABLE](https://www.brownpapertickets.com/event/4710809)
+
 Our Networks is a conference about the past, present, and future of building our own network infrastructures. The event brings together enthusiasts, hardware and software hackers, researchers, organizers and more to collectively explore creative and critical engagements with the Internet and alternative infrastructures.
 
 The event has a [Code of Conduct](/code-of-conduct/) and policy on [Filming](/filming/) in order to foster an environment where we can all work together. During the event if you are being harassed, notice that someone else is being harassed, or have any other concerns, we ask you to contact an organizer immediately. Those who wish to do so but don’t feel comfortable talking to the organizers in-person can email [[email protected]](mailto:[email protected]).

diff --git a/code-of-conduct.md b/code-of-conduct.md
@@ -2,6 +2,7 @@
 layout: page
 order: 2
 title: "Code of Conduct"
+parent: "About the event"
 ---
 
 Our Networks is dedicated to providing a harassment-free environment for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, age, religion or technical skill level.

diff --git a/js/main.js b/js/main.js
@@ -136,7 +136,7 @@ const currentTime = () => {
       return currentDate.getUTCHours() + 20
     } else {
       const offSetHours = currentDate.getUTCHours() - 4
-      return (offSetHours - 4 < 10 ? '0' : '') + offSetHours
+      return (offSetHours < 10 ? '0' : '') + offSetHours
     }
   }
   const minutes = (currentDate.getUTCMinutes() < 10 ? '0' : '') + currentDate.getUTCMinutes()
@@ -149,3 +149,19 @@ clockElement.innerHTML = currentTime()
 setInterval(() => {
   clockElement.innerHTML = currentTime()
 }, 1000)
+
+// Program scroll skip
+
+let jumpPosAnchor
+
+document.querySelectorAll('.session-presenter-link').forEach((e) => {
+  e.addEventListener('click', () => {
+    jumpPosAnchor = e.closest('.program-block').firstElementChild.id
+  })
+})
+
+document.querySelectorAll('.session-jump').forEach((e) => {
+  e.addEventListener('click', () => {
+    window.location.href = `#${jumpPosAnchor ? `${jumpPosAnchor}` : 'sessions'}`
+  })
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
           </p>
         </div>
-        <p>Scuttlebutt gathering: <code class="overflow-wrap">%+0iVAZf/n2JnnwytKPPCLim1UNfBcXjiXvzla4TOP04=.sha256</code></p>
+        <p>Scuttlebutt gathering: <code class="overflow-wrap highlight">%+0iVAZf/n2JnnwytKPPCLim1UNfBcXjiXvzla4TOP04=.sha256</code></p>
         <p><a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" rel="noopener">@{{ site.twitter_username }}</a></p>
@@ Expand Down @@