jekyll-theme-isotc154 0.0.1

data/_sass/jekyll-theme-isotc154.scss

@@ -0,0 +1,27 @@
+$widescreenBreakpoint: 1200px !default;
+$bigscreenBreakpoint: 900px !default;
+
+$primaryColor: #0061AD !default;
+$textColor: #222 !default;
+$linkColor: $primaryColor !default;
+
+$warningColor: red !default;
+$importantColor: orange !default;
+$accentColor: $primaryColor !default;
+
+$codeListingBorderColor: lighten($textColor, 70) !default;
+$codeListingBackgroundColor: rgba($textColor, 0.03) !default;
+
+$borderColor1: #F3F3F3 !default;
+$borderColor2: #EEEEEF !default;
+
+$lightBackgroundColor: #efeeee !default;
+
+$headerH: 100px !default;
+$logoSide: 80px !default;
+
+
+@import 'normalize';
+@import 'adoc-markup';
+@import 'main';
+@import 'events';

data/_sass/main.scss

@@ -0,0 +1,572 @@
+@mixin wideContainer() {
+  margin: 0 2em;
+
+  @media screen and (min-width: $bigscreenBreakpoint) {
+    width: $bigscreenBreakpoint - 100px;
+    margin: 0 auto;
+  }
+  @media screen and (min-width: $widescreenBreakpoint) {
+    width: $widescreenBreakpoint - 100px;
+    margin: 0 auto;
+  }
+}
+
+
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+a {
+  &:link, &:visited {
+    color: inherit;
+    text-decoration: none;
+
+    main &, aside & {
+      color: $linkColor;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &.anchor-link {
+        opacity: 0.2;
+        font-size: 80%;
+        margin-left: .5em;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+
+  td, th {
+    padding: 6px;
+    text-align: left;
+  }
+  th {
+    border-bottom: 1px solid $borderColor2;
+  }
+  tbody tr:nth-child(even) {
+    background-color: $borderColor1;
+  }
+}
+
+body {
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 100vh;
+}
+
+body > main,
+body > .with-aside {
+  @include wideContainer();
+  flex: 1;
+}
+
+
+body main,
+body > header,
+body main > header {
+  > .entity {
+    $entityGrey: lighten($textColor, 40);
+
+    margin: 0;
+    color: $entityGrey;
+    font-weight: normal;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+
+    > * {
+      white-space: nowrap;
+    }
+    > .meta {
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        &:hover {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      flex-flow: row nowrap;
+      .type, .meta {
+        margin-right: .25rem;
+      }
+    }
+
+    .id, .name {
+      margin-right: 1em;
+      margin-bottom: .25em;
+
+      // Entity name could be a link, if it’s an entity subpage.
+      &, &:link, &:visited {
+        color: inherit;
+      }
+    }
+    .type, .meta {
+      font-size: .8rem;
+      padding: .4em .8em;
+      margin-top: .05rem;
+      margin-bottom: .25rem;
+    }
+    .type {
+      text-transform: uppercase;
+      letter-spacing: .04em;
+      font-weight: bold;
+
+      background: $primaryColor;
+      color: white;
+    }
+    .meta {
+      background: $entityGrey;
+      color: white;
+      flex: 100%;
+
+      .icon:first-child {
+        width: 1.25em;
+        margin-right: .25em;
+        text-align: center;
+        overflow: hidden;
+      }
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        flex: unset;
+      }
+    }
+  }
+  > .headline {
+    margin-top: 0;
+    font-size: 160%;
+  }
+}
+body > header, body > main > header {
+  margin-bottom: 3em;
+}
+
+main {
+  > section {
+    margin-bottom: 3em;
+  }
+}
+
+body > .with-aside {
+  @media screen and (max-width: $bigscreenBreakpoint) {
+    main {
+      margin-bottom: 3em;
+    }
+  }
+
+  aside {
+    ul, li {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    li {
+      border-bottom: 1px solid $borderColor1;
+      padding-bottom: .7em;
+      margin-bottom: .7em;
+      font-size: 90%;
+
+      a {
+        color: $linkColor;
+      }
+      &:last-child {
+        border-bottom: 0;
+        padding-bottom: 0;
+        margin-bottom: 0;
+      }
+      &.active {
+        font-weight: bold;
+        position: relative;
+
+        &:before {
+          position: absolute;
+          left: -2em;
+          top: -.15em;
+          content: "→";
+          display: block;
+        }
+      }
+    }
+
+    section {
+      margin-bottom: 2em;
+
+      > .title {
+        letter-spacing: .1em;
+      }
+      ul li {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    section.tags {
+      font-size: 90%;
+
+      ul {
+        display: flex;
+        flex-flow: row wrap;
+      }
+      li {
+        padding: .2em .6em;
+        border-radius: 1em;
+        border: 1px solid $borderColor1;
+        margin-right: .5em;
+        margin-bottom: .5em;
+      }
+    }
+  }
+
+  @media screen and (min-width: $bigscreenBreakpoint) {
+    display: flex;
+    flex-flow: row nowrap;
+
+    aside {
+      flex-basis: 12rem;
+      min-width: 12rem;
+      flex: 0;
+      margin-left: 3vw;
+      border-left: 1px solid $borderColor1;
+      padding-left: 5vw;
+    }
+  }
+  @media screen and (min-width: $widescreenBreakpoint) {
+    aside {
+      flex-basis: 18rem;
+      min-width: 18rem;
+    }
+  }
+}
+
+
+header.top-bar {
+  background-color: $primaryColor;
+  color: white;
+
+  margin-bottom: 3em;
+
+  > .container {
+    @include wideContainer();
+
+    height: $headerH / 1.7;
+    margin-right: 0;
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      @include wideContainer();
+      height: $headerH;
+    }
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+  }
+
+  a, a:link, a:visited {
+    color: inherit;
+  }
+
+  .org-name {
+    display: none;
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      display: inline;
+    }
+  }
+
+  .iso-logo {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    margin-left: -.7em;
+
+    img {
+      display: block;
+
+      // White on primary color
+      -webkit-filter: invert(1);
+      filter: invert(1);
+
+      height: $logoSide / 1.5;
+      width: $logoSide / 1.5;
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        height: $logoSide;
+        width: $logoSide;
+      }
+    }
+  }
+
+  h1 {
+    flex: 1;
+    margin: 0;
+    white-space: nowrap;
+    font-size: 135%;
+  }
+
+  ul, li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .priority-nav {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+    align-self: stretch;
+    font-size: 90%;
+    letter-spacing: .02em;
+    overflow-x: auto;
+    margin-left: 1em;
+
+    li {
+      display: flex;
+      white-space: nowrap;
+      flex-flow: column nowrap;
+      justify-content: center;
+
+      &.featured-event {
+        .title {
+          border: .1rem white solid;
+          border-radius: .5rem;
+          margin: 0 .5em;
+          padding: .5em;
+        }
+      }
+
+      a, span {
+        text-transform: uppercase;
+        padding: 0 .4em;
+
+        @media screen and (min-width: $bigscreenBreakpoint) {
+          padding: 1em .7em;
+        }
+        @media screen and (min-width: $widescreenBreakpoint) {
+          padding: 1em 1.4em;
+        }
+      }
+      &.selected {
+        background-color: rgba(white, 0.2);
+      }
+    }
+  }
+}
+
+body > footer {
+  margin-top: 4em;
+
+  display: flex;
+  flex-flow: column nowrap;
+  font-size: 90%;
+
+  background: $lightBackgroundColor;
+
+  > .container {
+    @include wideContainer();
+  }
+
+  ul, li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .row1 {
+    border-bottom: 1px solid $borderColor2;
+
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      flex-flow: row nowrap;
+    }
+
+    .logo {
+      margin-left: -.7em;
+      position: relative;
+      z-index: 2;
+
+      img {
+        height: $logoSide;
+        width: $logoSide;
+      }
+    }
+
+    .links {
+      display: flex;
+      flex-flow: row wrap;
+      flex: 1;
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        flex-flow: row nowrap;
+        justify-content: center;
+        position: absolute;
+        left: 0;
+        right: 0;
+        text-align: center;
+        z-index: 1;
+      }
+
+      > * {
+        margin: 0 .5em;
+      }
+    }
+
+    .powered-by {
+      display: flex;
+      flex-flow: column nowrap;
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        flex-flow: row nowrap;
+      }
+
+      position: relative;
+      z-index: 2;
+
+      .powered-by__text {
+        margin-right: .5em;
+      }
+
+      img {
+        height: 1.2em;
+        vertical-align: text-bottom;
+      }
+    }
+  }
+
+  .row2 {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+
+    padding: 1em 0;
+
+    .copyright {
+      flex: 1;
+      white-space: nowrap;
+    }
+
+    .social-links {
+      display: flex;
+      flex-flow: row nowrap;
+
+      > * {
+        margin-left: .5em;
+      }
+    }
+  }
+}
+
+
+@mixin with-dropcap() {
+  > p:first-child::first-letter {
+    font-size: 3.2em;
+    float: left;
+    margin-top: -.1rem;
+    margin-right: .4rem;
+    line-height: 1;
+    font-weight: bold;
+    font-family: Georgia, serif;
+    color: $primaryColor;
+  }
+}
+
+
+$itemPicW: 14em / 2;
+$itemPicH: 16rem / 2;
+
+@mixin itemCard($picW, $picH) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+
+  &.item-card--no-pic {
+    .item-text {
+      padding-bottom: .5rem;
+    }
+  }
+
+  .item-pic {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+
+    width: $picW;
+    height: $picH;
+    overflow: hidden;
+
+    margin-right: 1rem;
+  }
+
+  .item-text {
+    padding-top: 0;
+
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    p, h3, h4 {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+@mixin itemList($compact: 0) {
+  @if $compact == 1 {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+  } @else {
+    @media screen and (min-width: $bigscreenBreakpoint) {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: flex-start;
+    }
+  }
+
+  .item-card {
+    margin: 0 .5rem .5rem 0;
+    overflow: hidden;
+
+    @if $compact == 1 {
+      @include itemCard($itemPicW / 2, $itemPicH / 2);
+
+    } @else {
+      @include itemCard($itemPicW, $itemPicH);
+
+      @media screen and (min-width: $bigscreenBreakpoint) {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 30%;
+      }
+    }
+  }
+}