jekyll-theme-isotc154 0.0.1

data/_layouts/event_base.html

@@ -0,0 +1,19 @@
+---
+# NOTE: Pages using this layout, or inheriting layouts,
+# must specify frontmatter variables:
+# - event_id, matching the ID of appropriate event under _data/events
+# - permalink, full page path including appropriate event ID
+
+layout: default
+
+extra_scripts:
+  - src: /assets/vendor/openlayers/ol.js
+  - src: "https://unpkg.com/popper.js@1"
+  - src: "https://unpkg.com/tippy.js@5"
+  - src: /assets/js/event_map.js
+
+extra_stylesheets:
+  - href: /assets/vendor/openlayers/ol.css
+---
+
+{{ content }}

data/_layouts/event_landing.html

@@ -0,0 +1,64 @@
+---
+layout: event_base
+---
+
+{% assign event = site.data.events[page.event_id] %}
+
+{% comment %}
+  Sort out whether the event is past or future relative to now.
+  Assumes that site is rebuilt with CDN cache reset,
+  and that rebuilds will be triggered around event start and end dates.
+{% endcomment %}
+{% assign now_unix = 'now' | date: '%s' %}
+{% assign event_start_unix = event.time.from.date | date: '%s' %}
+{% assign event_finish_unix = event.time.to.date | date: '%s' %}
+
+{% if now_unix > event_start_unix %}
+  {% assign started = true %}
+{% else %}
+  {% assign started = false %}
+{% endif %}
+
+{% if now_unix > event_finish_unix %}
+  {% assign finished = true %}
+{% else %}
+  {% assign finished = false %}
+{% endif %}
+
+{% comment %}Main event layout.{% endcomment %}
+
+<main class="{% if started %}event-started{% endif %} {% if finished %}event-finished{% endif %}">
+  <header>
+    <h2 class="entity"><span class="type">Event</span></h2>
+    <h1 class="headline">{{ event.title }}</h1>
+  </header>
+
+  <section class="meta">
+    <div class="time">
+      <i class="fas fa-calendar icon"></i>
+      {% unless finished %}
+        {%- include date_with_precision.html date=event.time.from default_precision="day" -%}
+        —
+        {%- include date_with_precision.html date=event.time.to default_precision="day" -%}
+      {% else %}
+        Ended on {% include date_with_precision.html date=event.time.to default_precision="day" %}
+      {% endunless %}
+    </div>
+    <div class="place">
+      <i class="fas fa-map-marker icon"></i>
+      {{ event.general_area }}
+    </div>
+  </section>
+
+  <section class="intro">
+    {{ event.intro | asciidocify }}
+  </section>
+
+  {% assign top_groups = event.primary_nav.items | slice: 0, 2 %}
+  <div class="main-nav">
+    {% include event_nav.html show_detail=true item_data=event.nav items=top_groups %}
+  </div>
+
+  {{ content }}
+
+</main>

data/_layouts/event_subpage.html

@@ -0,0 +1,80 @@
+---
+layout: event_base
+html_class: event-subpage
+---
+
+{% assign event = site.data.events[page.event_id] %}
+
+
+{% comment %}
+  Sort out whether the event is past or future relative to now.
+  Assumes that site is rebuilt with CDN cache reset,
+  and that rebuilds will be triggered around event start and end dates.
+{% endcomment %}
+
+{% assign now_unix = 'now' | date: '%s' %}
+{% assign event_start_unix = event.time.from.date | date: '%s' %}
+{% assign event_finish_unix = event.time.to.date | date: '%s' %}
+
+{% if now_unix > event_start_unix %}
+  {% assign started = true %}
+{% else %}
+  {% assign started = false %}
+{% endif %}
+
+{% if now_unix > event_finish_unix %}
+  {% assign finished = true %}
+{% else %}
+  {% assign finished = false %}
+{% endif %}
+
+
+{% comment %}Main event layout.{% endcomment %}
+
+<main class="{% if started %}event-started{% endif %} {% if finished %}event-finished{% endif %}">
+  <header>
+    <h2 class="entity">
+      <a class="name" href="{{ event.landing_url }}">{{ event.title }}</a>
+      <span class="type">Event</span>
+      <span class="meta time">
+        <i class="fas fa-calendar icon"></i>
+        {% unless finished %}
+          {%- include date_with_precision.html date=event.time.from default_precision="day" -%}
+          —
+          {%- include date_with_precision.html date=event.time.to default_precision="day" -%}
+        {% else %}
+          Ended on {% include date_with_precision.html date=event.time.to default_precision="day" %}
+        {% endunless %}
+      </span>
+      <span class="meta place">
+        <i class="fas fa-map-marker icon"></i>
+        {{ event.general_area }}
+      </span>
+    </h2>
+    <h1 class="headline">{{ page.title }}</h1>
+  </header>
+
+  <div class="page-body">
+    <div class="page-content">
+      {{ content }}
+    </div>
+
+    <div class="page-toc">
+      <h2 class="page-toc-title">Event navigation</h2>
+      {% include event_nav.html show_detail=false item_data=event.nav items=event.primary_nav.items %}
+    </div>
+  </div>
+</main>
+
+{% assign map = page.map | default: layout.map %}
+{% if map %}
+  <div class="map"
+    data-map-container
+    data-map-id="{{ map.id }}"
+    data-map-center='{
+      "lon": {{ map.center.lon | default: event.map_defaults.center.lon }},
+      "lat": {{ map.center.lat | default: event.map_defaults.center.lat }},
+      "zoom": {{ map.zoom | default: event.map_defaults.zoom }}
+    }'>
+  </div>
+{% endif %}

data/_layouts/page.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+
+<main>
+  <h1>{{ page.title }}</h1>
+  {{ content }}
+</main>

data/_sass/adoc-markup.scss

@@ -0,0 +1,216 @@
+// Asciidoctor-generated markup
+// ============================
+
+@mixin padded-code-snippet() {
+  padding: 0 .75em;
+  margin: 0 .2em;
+  background: $codeListingBackgroundColor;
+
+  border: 1px dashed $codeListingBorderColor;
+  border-radius: .25em;
+
+  font-size: 15px;
+}
+
+@mixin padded-code-snippet--reset() {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+@mixin code-snippet-container() {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  line-height: 1.2;
+
+  @include padded-code-snippet();
+  padding-top: .5em;
+  padding-bottom: .5em;
+
+  border-width: 0 0 0 1px;
+  border-radius: 0 .25em .25em 0;
+
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  margin-left: -.1em;
+
+  > code {
+    // Avoid bad formatting in case of <code> element nested
+    // inside a <pre>
+    @include padded-code-snippet--reset();
+  }
+}
+
+@mixin code-snippet() {
+  color: lighten($textColor, 24);
+
+  @include padded-code-snippet();
+  margin-top: -1px;
+  margin-bottom: -1px;
+
+  code {
+    // Avoid bad formatting in case of <code> elements nested
+    // into each other (possible with adoc output)
+    @include padded-code-snippet--reset();
+  }
+}
+
+@mixin asciidoc-markup() {
+
+  .paragraph + .paragraph {
+    p {
+      text-indent: 1rem;
+    }
+  }
+  p, .paragraph p {
+    margin: 0;
+    text-indent: 0;
+  }
+
+  ol, ul {
+    margin: 0;
+
+    li {
+      break-inside: avoid;
+      -webkit-column-break-inside: avoid;
+      -moz-column-break-inside: avoid;
+      column-break-inside: avoid;
+      break-inside: avoid-column;
+    }
+  }
+
+  // Code listing
+
+  .paragraph code {
+    word-break: break-word;
+  }
+  code {
+    @include code-snippet();
+  }
+  pre {
+    @include code-snippet-container();
+  }
+
+  // Generic block title
+
+  .admonitionblock,
+  .listingblock,
+  .imageblock {
+    .title {
+      text-transform: uppercase;
+      font-size: 12px;
+      border-radius: .25em;
+      background-color: $textColor;
+      color: white;
+      font-weight: bold;
+      padding: .3em .6em .25em .6em;
+    }
+  }
+
+  // Specific blocks
+
+  .admonitionblock,
+  .listingblock {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  .admonitionblock.warning {
+    td.icon .title {
+      background-color: $warningColor;
+    }
+  }
+  .admonitionblock.important {
+    td.icon .title {
+      background-color: $importantColor;
+    }
+  }
+
+  .imageblock {
+    .title {
+      background-color: $accentColor;
+      color: white;
+    }
+  }
+
+  .listingblock {
+    display: flex;
+    flex-flow: column nowrap;
+
+    .title {
+      align-self: flex-start;
+      background-color: $codeListingBorderColor;
+      color: white;
+      border-radius: 0;
+    }
+
+    .content {
+      align-self: stretch;
+
+      pre {
+        margin: 0;
+      }
+    }
+  }
+
+  .admonitionblock {
+    table:first-child {
+      margin-top: 0;
+    }
+    table:last-child {
+      margin-bottom: 0;
+    }
+
+    td.icon {
+      vertical-align: top;
+      padding-left: 0;
+      padding-right: 1em;
+      font-size: 90%;
+    }
+
+    .title {
+      background-color: $linkColor;
+      color: white;
+    }
+
+    .content {
+      font-size: 90%;
+
+      .title {
+        background: transparent;
+        color: $textColor;
+        padding-left: 0;
+      }
+
+      .listingblock pre {
+        font-size: 100%;
+      }
+
+      > div:first-child {
+        > :first-child {
+          margin-top: 0;
+        }
+      }
+      > div:last-child {
+        > :last-child {
+          margin-bottom: 0;
+        }
+        &.ulist {
+          ul {
+            padding-left: 1.25em;
+          }
+
+          li:first-child > :first-child {
+            margin-top: 0;
+          }
+          li:last-child > :last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/events.scss

@@ -0,0 +1,562 @@
+@mixin major-section-title {
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: lighten($textColor, 50);
+}
+
+/* Maps and markers. Potentially not events-specific. */
+
+[data-map-marker] {
+  .map-marker-reference {
+    display: inline-block;
+    text-align: center;
+    overflow: hidden;
+    background: $primaryColor;
+    color: white;
+    padding: 0 .25em;
+    font-size: 80%;
+    margin: 0 .25rem;
+    vertical-align: middle;
+    opacity: .5;
+
+    // It’s interactive.
+    cursor: pointer;
+  }
+  &.map-marker-selected {
+    .map-marker-reference {
+      opacity: 1;
+    }
+  }
+}
+
+body.layout--home {
+  section.events {
+    margin-top: -3rem;
+
+    article.event {
+      box-sizing: border-box;
+      margin: 0 -2rem 1rem -2rem;
+      background: $lightBackgroundColor;
+      padding: .5rem 0;
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        padding: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        margin: 0 0 1rem -1.2rem;
+      }
+
+      > .summary, > .mini-map {
+        flex-basis: 50%;
+        box-sizing: border-box;
+      }
+
+      .summary {
+        margin: 0 1rem 0 1.5rem;
+      }
+
+      header {
+        .meta {
+          .time {
+            .separator {
+              opacity: .5;
+            }
+          }
+          > * {
+            margin-right: 1em;
+            white-space: nowrap;
+
+            .icon {
+              width: 1em;
+              margin-right: .25em;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+body.event-subpage, body.layout--event_landing {
+  background: $lightBackgroundColor;
+
+  > footer {
+    margin-top: 1rem;
+  }
+
+  > main > header {
+    margin-bottom: 1rem;
+
+    h1.headline {
+      font-weight: normal;
+      margin-top: .6em;
+      line-height: 1.2;
+    }
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      margin-bottom: 2rem;
+
+      h1.headline {
+        margin-top: .5rem;
+        font-size: 280%;
+      }
+    }
+  }
+
+  main > .meta, main > header .entity .meta {
+    .time .separator {
+      opacity: .5;
+      margin: 0 .05rem;
+    }
+  }
+
+  ul[role=nav] {
+    li.item-missing-page {
+      opacity: .5;
+    }
+  }
+}
+
+.page-content {
+  .accommodation-option, .sect1 {
+    margin-right: -2rem;
+    margin-left: -2rem;
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+}
+
+
+body.layout--event_landing {
+  > main {
+    display: flex;
+    flex-flow: column nowrap;
+    position: relative;
+
+    > header {
+      margin-bottom: 0;
+    }
+
+    > .meta {
+      margin-bottom: 2rem;
+      font-size: 120%;
+
+      display: flex;
+      flex-flow: row wrap;
+
+      > * {
+        margin-right: 1rem;
+      }
+    }
+
+    > .intro {
+      font-size: 120%;
+      margin-top: -2rem; // Compensates for meta’s bottom margin.
+      margin-bottom: 2rem;
+    }
+  }
+
+  > main.event-started {
+    .main-nav > ul {
+      // For started events, reverse sections
+      flex-flow: column-reverse nowrap;
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        // Negate the above to avoid clash below.
+        flex-flow: row nowrap;
+      }
+    }
+  }
+
+  .main-nav {
+    ul, li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    > ul {
+      display: flex;
+      flex-flow: column nowrap;
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        flex-flow: row nowrap;
+        align-items: stretch;
+      }
+    }
+
+    > ul > li {
+      $borderRadius: 1rem;
+      $itemGapBase: $borderRadius;
+
+      flex: 1;
+      margin-top: 1rem;
+
+      display: flex;
+      flex-flow: column nowrap;
+
+      > .title {
+        @include major-section-title;
+      }
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        width: $bigscreenBreakpoint - 100px;
+        margin: 0 auto;
+      }
+
+      a, li.with-url .icon {
+        color: $linkColor;
+      }
+
+      span {
+        color: lighten($textColor, 0.5);
+      }
+
+      > ul {
+        flex: 1;
+
+        display: flex;
+        flex-flow: column nowrap;
+
+        > li {
+          @include nmCard($bg: white);
+
+          flex: 1;
+          flex-basis: 50%;
+          box-sizing: border-box;
+          padding: .75rem 1rem;
+          margin: #{$itemGapBase * 0.5} #{$itemGapBase * 1.5} #{$itemGapBase * 0.5} -#{$itemGapBase * 0.5};
+
+          position: relative;
+          text-shadow: 0 0 5px white;
+          border-radius: $borderRadius;
+
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: stretch;
+
+          > .title {
+            flex: 1;
+            margin-bottom: .5rem;
+
+            .icon {
+              width: 1.75em;
+              text-align: right;
+              margin-right: .5rem;
+            }
+          }
+
+          > .detail-text {
+            p:first-child {
+              margin: 0;
+            }
+            p:not(:first-child) {
+              display: none;
+            }
+          }
+
+          &.nav-item-arrival {
+            > .detail-include {
+              .mini-map {
+                filter: grayscale(1) contrast(0.3) brightness(1.5);
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                z-index: -1;
+                overflow: hidden;
+                border-radius: $borderRadius;
+              }
+            }
+          }
+
+          > a, > span, > .icon {
+            font-size: 140%;
+            font-weight: bold;
+          }
+
+          > ul {
+            display: flex;
+            flex-flow: row nowrap;
+            overflow-x: auto;
+
+            > li {
+              margin-right: 1rem;
+              white-space: nowrap;
+
+              &:last-child {
+                margin-right: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+body.event-subpage {
+  ul[role=nav] {
+    li.item-missing-page {
+      .title:after {
+        content: "(TBA)";
+        margin-left: .25rem;
+        font-size: 80%;
+      }
+    }
+  }
+
+  > .map {
+    margin-top: 2rem;
+    height: 22rem;
+    width: 100%;
+
+    &.map-focused {
+      box-shadow: rgba(black, 0.2) 0 0 2rem;
+      background: white;
+      position: fixed;
+      margin-top: 0;
+      height: 38vh;
+      bottom: 0;
+      z-index: 4;
+    }
+  }
+  &.map-focused {
+    padding-bottom: 38vh;
+  }
+
+  .page-body {
+    .page-content {
+      @include asciidoc-markup();
+
+      h2 {
+        font-size: 120%;
+        font-weight: bold;
+      }
+      h3 {
+        font-size: 110%;
+        text-transform: uppercase;
+        font-weight: normal;
+      }
+
+      > div.sect1 {
+        padding: .75rem 1rem;
+        background: white;
+        margin-bottom: 1rem;
+
+        > h2 {
+          margin-top: 0;
+        }
+      }
+    }
+    .page-toc {
+      h2 {
+        font-size: 100%;
+      }
+
+      &.summoned {
+        // This class can be toggled when in narrow viewport only
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        padding: 0 2rem;
+        background: $lightBackgroundColor;
+      }
+
+      // Menus
+      ul, li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      li.selected span {
+        font-weight: bold;
+
+        &:after {
+          content: "←";
+          vertical-align: text-bottom;
+          color: lighten($textColor, 40);
+          font-size: 80%;
+        }
+      }
+      > ul {
+        > li {
+          margin-bottom: .5rem;
+          > .title {
+            @include major-section-title;
+          }
+          > ul {
+            padding: .5rem .75rem .5rem .5rem;
+            margin-bottom: 1rem;
+            margin-left: -.2rem;
+
+            > li {
+              > .title {
+                font-size: 120%;
+                .icon {
+                  width: 1.5rem;
+                  margin-right: .5rem;
+                  text-align: right;
+                  overflow: hidden;
+                }
+              }
+              > ul {
+                margin-left: 2rem;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      display: flex;
+      flex-flow: row-reverse nowrap;
+
+      .page-toc {
+        > .page-toc-title {
+          display: none;
+        }
+        margin-right: 2rem;
+      }
+      .page-content {
+        flex: 1;
+      }
+    }
+  }
+
+  div.place-list {
+    > ul {
+      padding: 0 0 0 1rem;
+
+      > li {
+        margin-bottom: 1rem;
+        list-style: square;
+
+        > p:first-child {
+          margin-bottom: .5rem;
+        }
+
+        font-size: 80%;
+
+        .title {
+          font-size: 130%;
+          font-weight: normal;
+        }
+
+        .quoteblock {
+          padding: 0 .5rem .5rem 1rem;
+          margin: 0 .5rem .5rem 0;
+          position: relative;
+
+          blockquote {
+            margin-left: 1rem; 
+
+            &:before {
+              content: "“";
+              z-index: -1;
+              position: absolute;
+              top: 0;
+              left: 0;
+              transform: translateX(-10%) translateY(-10%);
+              color: $lightBackgroundColor;
+              font-size: 10em;
+              line-height: 1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+body.layout--event_accommodation, body.layout--event_places {
+  .accommodation-option-list {
+    .accommodation-option {
+      box-sizing: border-box;
+      margin-bottom: 1rem;
+      position: relative;
+      background: white;
+
+      > * {
+        margin-left: 1rem;
+        margin-right: 1rem;
+      }
+
+      > header {
+        padding-top: .75rem;
+        margin-bottom: .5rem;
+
+        .title {
+          margin: 0;
+          margin-right: 1rem;
+        }
+        .address {
+          font-size: 80%;
+        }
+        .feature {
+          position: absolute;
+          top: 0;
+          right: 2rem;
+          transform-origin: center center;
+          transform: translateY(-100%);
+
+          @media screen and (min-width: $bigscreenBreakpoint) {
+            right: auto;
+            left: 0;
+            transform: translateX(-50%) translateY(-50%) rotate(-90deg) translateY(-50%) translateX(-50%);
+            border-radius: .5em .5em 0 0;
+          }
+
+          white-space: nowrap;
+          font-size: 70%;
+          text-transform: uppercase;
+          letter-spacing: .07em;
+          padding: .2em .5em .1em .5em;
+          background: $primaryColor;
+          color: white;
+        }
+      }
+      > footer.actions {
+        margin-left: 0;
+        margin-right: 0;
+        margin-top: 1rem;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: hidden;
+
+        .action {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding-left: .75rem;
+          padding-right: .75rem;
+          padding-top: .25rem;
+          padding-bottom: .25rem;
+          background: $primaryColor;
+          color: white;
+          font-weight: bold;
+
+          a {
+            &, &:link, &:hover, &:visited {
+              color: inherit;
+            }
+          }
+
+          &.disabled {
+            background: lighten($textColor, 40);
+            &.with-description {
+              cursor: help;
+            }
+          }
+        }
+      }
+    }
+  }
+}