jekyll-geolexica 1.0.0

data/_sass/concepts.scss

@@ -0,0 +1,18 @@
+body.concepts {
+  > main > header > h1 {
+    font-weight: normal;
+  }
+
+  .all-concepts {
+    table {
+      @include concept-table();
+    }
+  }
+}
+
+body.concepts > main {
+  > * {
+    padding-left: $sideOffsetBase;
+    padding-right: $sideOffsetBase;
+  }
+}

data/_sass/expandable-nav.scss

@@ -0,0 +1,187 @@
+// This style is enabled by nav.js.
+
+$expandTransitionTime: .08s;
+$expandTransitionFunc: ease-out;
+
+body.with-expandable-nav {
+  > header {
+    will-change: background, opacity, box-shadow, height;
+    transition:
+      color $expandTransitionTime $expandTransitionFunc 0s,
+      background $expandTransitionTime $expandTransitionFunc 0s,
+      padding-bottom $expandTransitionTime $expandTransitionFunc 0s,
+      box-shadow $expandTransitionTime $expandTransitionFunc 0s,
+      height $expandTransitionTime $expandTransitionFunc 0s;
+
+    position: relative;
+    overflow: hidden;
+
+    padding-bottom: 0;  // JS relies on this value
+
+    .committee-widget {
+      .widget-item {
+        will-change: color, background, border;
+        transition:
+          color $expandTransitionTime $expandTransitionFunc 0s,
+          background $expandTransitionTime $expandTransitionFunc 0s,
+          border $expandTransitionTime $expandTransitionFunc 0s;
+      }
+
+      @media screen and (max-width: $bigscreenBreakpoint - 1) {
+        .committee-name {
+          display: none;
+        }
+      }
+
+      .widget-group.committee-menu {
+        display: none;
+      }
+    }
+  }
+
+  > main {
+    will-change: transform;
+    transition:
+      transform $expandTransitionTime $expandTransitionFunc;
+  }
+
+  nav.expandable-nav {
+    transition: none;
+    opacity: 0;
+    display: block;
+    position: absolute;
+    bottom: 20px;
+    display: none;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      li {
+        padding: 0;
+        margin-bottom: 1em;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        p.desc {
+          margin: 0;
+          font-size: 80%;
+          opacity: .8;
+        }
+
+        @media screen and (min-width: $bigscreenBreakpoint) {
+          margin-bottom: 0;
+          margin-right: 1em;
+          margin-left: 2px;
+          max-width: 10em;
+          padding-left: 1em;
+          border-left: 1px solid white;
+        }
+      }
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+      }
+    }
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      left: 15vw;
+    }
+  }
+
+  button.nav-expand-trigger {
+    border: none;
+    background: none;
+    color: white;
+
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    height: 1.8em;
+    width: $stripeWidth;
+    display: flex;
+
+    position: absolute;
+    left: 0;
+    top: .5em;
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      top: 3.3em;
+    }
+
+    .fa-times { display: none; }
+  }
+
+  &.with-expanded-nav {
+    > header {
+      box-shadow: 0 5px 50px -20px rgba(black, 0.4);
+      background: $isoTCColor;
+      color: white;
+      padding-bottom: 1.5em;
+      z-index: 2;
+
+      .parent-org-reference {
+        .logo-link img {
+          -webkit-filter: invert(1);
+          filter: invert(1);
+        }
+      }
+
+      nav.priority-nav {
+        opacity: 0;
+      }
+      nav.expandable-nav {
+        will-change: opacity;
+        transition: opacity $expandTransitionTime $expandTransitionFunc;
+        transition-delay: 0s;
+        display: block;
+        opacity: 1;
+      }
+
+      .committee-widget {
+        .widget-item {
+          background: none;
+          box-shadow: none;
+          border: 1px solid white;
+
+          &.committee-id {
+            background: white;
+            color: $isoTCColor;
+          }
+          &.parent-org-reference {
+            background: #e30b1f;
+            border-color: white;
+            color: white;
+          }
+        }
+        .committee-name {
+          display: inline;
+          flex-basis: 100%;
+        }
+        .widget-group {
+          flex-basis: 100%;
+          @media screen and (min-width: $bigscreenBreakpoint) {
+            flex-basis: unset;
+          }
+        }
+        .widget-group.committee-menu {
+          display: flex;
+
+          .widget-item {
+            background: rgba(black, 0.2);
+            border-color: rgba(black, 0.2);
+          }
+        }
+      }
+    }
+    button.nav-expand-trigger {
+      .fa-times { display: inline-block; }
+      .fa-bars { display: none; }
+    }
+  }
+}

data/_sass/geolexica_home.scss

@@ -0,0 +1,174 @@
+body.home {
+  > main {
+    > .browse-concepts {
+      flex-shrink: 0;
+
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: flex-start;
+
+      input.search-string,
+      a.browse-concepts {
+        background-color: #f7f7f7;
+        padding: .5em .75em;
+        border-radius: .5em;
+        border: 0;
+        cursor: pointer;
+      }
+
+      .section-title {
+        span {
+          white-space: nowrap;
+          margin-right: 1em;
+        }
+        a {
+          white-space: nowrap;
+          text-transform: none;
+          font-size: 90%;
+        }
+      }
+
+      a.browse-concepts {
+        text-decoration: none;
+        background: $linkColor;
+        color: $linkColorInverse;
+
+        margin-top: 1em;
+        margin-bottom: 1.5em;
+      }
+
+      .search-controls {
+        flex-shrink: 0;
+
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        margin-top: 1em;
+        margin-bottom: 1.5em;
+
+        input.search-string {
+          margin-right: 1em;
+          margin-left: -.5em;
+        }
+
+        .refine {
+          display: flex;
+          flex-flow: row wrap;
+          align-items: center;
+
+          > * {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+          }
+
+          label {
+            padding-left: 1em;
+          }
+          input[type=checkbox], label {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .search-results {
+        flex: 1;
+        align-self: stretch;
+        overflow: auto;
+
+        box-shadow: 0 0 20px -10px rgba(black, 0.3);
+
+        padding-bottom: 1em;
+        background: white;
+
+        table {
+          @include concept-table();
+        }
+      }
+    }
+  }
+
+  &.browser-expandable {
+    > main {
+      > .browse-concepts {
+        .section-title {
+          display: flex;
+          flex-flow: row wrap;
+          align-items: center;
+
+          &:before {
+            display: none;
+          }
+
+          button.toggle {
+            background: transparent;
+            border: 0;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  &.browser-expanded {
+    > header {
+      margin-top: -1em;
+      padding-bottom: 0;
+
+      .site-title .description {
+        transition: width .5s linear;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        display: inline-block;
+      }
+    }
+    > main {
+      flex-shrink: 1;
+      min-height: 300px;
+      // ^^ value out of thin air approximating minimally acceptable main height,
+      // otherwise on very short viewports footer overlaps main due to its flex-shrink: 1,
+      // which we want to restrict main height to viewport so that search results
+      // can be scrolled within their own div.
+      // Another (better?) solution could be to scope flex-shrink: 1
+      // to tall enough viewports with a media query.
+
+      > section.browse-concepts {
+        flex-shrink: 1;
+        min-height: 256px;
+        padding-bottom: 0;
+      }
+      > section.news {
+        display: none;
+      }
+    }
+  }
+}
+
+body.home.browser-expandable > main > section.browse-concepts {
+  .section-title {
+    margin-left: 15vw;
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      margin-left: calc(#{$sideOffsetBase} - #{$logoOffset});
+
+      button.toggle {
+        width: $logoOffset;
+      }
+    }
+  }
+}
+
+body.home > main > section.browse-concepts {
+  .section-title, .search-controls {
+    margin-left: $sideOffsetBase;
+    margin-right: $sideOffsetBase;
+  }
+  > a.browse-concepts {
+    margin-left: calc(#{$sideOffsetBase} - .75em);
+    display: block;
+  }
+  .search-results.status-message {
+    padding-left: $sideOffsetBase;
+  }
+}

data/_sass/home.scss

@@ -0,0 +1,87 @@
+body.home {
+  > footer {
+    box-shadow: none;
+  }
+
+  > main {
+    padding-bottom: 0;
+
+    > .section > h2 {
+      @extend .section-title;
+    }
+
+    > .news {
+
+      // Assuming it goes right before footer
+      flex: 1;
+      border-bottom: 0;
+      background: $headerFooterBackgroundColor;
+      box-shadow: 0 10px 20px -20px $mainShadowColor inset;
+
+      .items {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+        align-items: stretch;
+        padding-top: 1em;
+        padding-bottom: 1em;
+      }
+
+      .news-item-card {
+        max-width: 90vw;
+        border-radius: .5em;
+        padding: 0 $homeSectionItemSidePadding;
+        background: #fff;
+        margin-right: 1em;
+        margin-bottom: 1em;
+        box-shadow: 1px 1px 20px -5px rgba(black, 0.3);
+
+        min-width: 320px;
+        @media screen and (min-width: $bigscreenBreakpoint) {
+          min-width: unset;
+          flex-basis: 20em;
+        }
+
+        &.news-item--with-illustration {
+          position: relative;
+
+          .title, .excerpt, .meta {
+            margin-left: 155px;
+          }
+
+          .illustration-container {
+            position: absolute;
+            top: 0; left: 0; bottom: 0;
+            display: block;
+            width: 155px;
+            overflow: hidden;
+            background-size: cover;
+            background-position: center center;
+          }
+        }
+
+        .title {
+          font-weight: normal;
+          margin-top: .75em;
+          margin-bottom: .4em;
+          font-size: 110%;
+          line-height: 1.3;
+
+          a {
+            text-decoration: none;
+          }
+        }
+
+        .meta {
+          font-size: 80%;
+          color: lighten($textColor, 50);
+        }
+
+        div.excerpt p {
+          font-size: 90%;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+}