calyx 0.17.1 → 0.18.0

data/docs/_styles/menu.scss

@@ -0,0 +1,54 @@
+.menu {
+  width: 100%;
+  padding-top: $scale-p0;
+
+  .menu-label,
+  .menu-list li {
+    @include at-least-tablet {
+      font-size: $scale-p0;
+    }
+
+    @include until-tablet {
+      font-size: $scale-p1;
+    }
+  }
+
+  .menu-label {
+    margin: $scale-p0 0 0 0;
+    font-weight: 700;
+    font-family: $font-display-family;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    a {
+      display: block;
+      padding: $scale-m1 $scale-p0;
+    }
+  }
+
+  .menu-list {
+    a {
+      display: block;
+      padding: $scale-m1 $scale-p0;
+    }
+  }
+
+  .menu-label, .menu-list {
+    a {
+      color: $color-sidebar-link;
+
+      &.is-active {
+        color: $color-white;
+        background-color: $color-eucalyptus;
+      }
+
+      &:hover {
+        &:not(.is-active) {
+          background-color: $color-sidebar-link-background-hover;
+        }
+      }
+    }
+  }
+}

data/docs/_styles/modifiers.scss

@@ -0,0 +1,3 @@
+.is-hidden {
+  display: none;
+}

data/docs/_styles/navbar.scss

@@ -0,0 +1,161 @@
+$navbar-height: ($scale-p0 + $scale-m3) * 3;
+$navbar-transition-timing: 0.2s;
+$color-navbar-hover: darken($color-meadow, 6%);
+
+.navbar {
+  width: 100%;
+  height: $navbar-height;
+  background-color: $color-meadow;
+
+  @include until-tablet {
+    //transition: height $navbar-transition-timing ease-in;
+
+    .nav-menu {
+      visibility: hidden;
+    }
+
+    &.is-open {
+      height: 100vh;
+      //transition: height $navbar-transition-timing ease-in;
+      overflow-y: scroll;
+
+      .logo {
+        height: $navbar-height;
+        background-color: $color-navbar-hover;
+      }
+
+      .nav-menu {
+        visibility: visible;
+      }
+    }
+  }
+
+  @include at-least-tablet {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @include at-least-desktop {
+    justify-content: space-between;
+  }
+
+  .nav-toggle {
+    color: $color-white;
+    font-size: $scale-p2;
+    height: $navbar-height;
+    display: inline-block;
+    line-height: $scale-p2;
+
+    &:hover {
+      background-color: $color-navbar-hover;
+    }
+
+    @include at-least-tablet {
+      display: none;
+    }
+  }
+
+  &.is-fixed {
+    position: fixed;
+    top: 0px;
+    z-index: 2000;
+  }
+
+  .nav-brand {
+    @include at-least-tablet {
+      display: flex;
+      align-items: center;
+    }
+
+    @include until-tablet {
+      width: 100%;
+
+      .nav-menu ul {
+        justify-content: center;
+      }
+    }
+
+    .logo {
+      height: $navbar-height;
+      display: flex;
+      align-items: center;
+    }
+
+    .logo-mark {
+      width: 36px;
+      height: 36px;
+      padding: $scale-p0 $scale-m1 $scale-p0 $scale-p0;
+    }
+
+    .logo-type {
+      color: #fff;
+      font-family: $font-display-family;
+      font-weight: 800;
+      font-size: $scale-p1;
+      padding-right: $scale-p0;
+    }
+  }
+
+  .nav-menu {
+    @include at-least-desktop {
+      margin-left: $scale-p3;
+    }
+
+    &.is-meta {
+      margin-left: 0;
+    }
+
+    ul {
+      @include at-least-tablet {
+        display: flex;
+        align-items: center;
+      }
+
+      li {
+        font-size: $scale-p0;
+        line-height: 1.2;
+        height: $navbar-height;
+        font-family: $font-display-family;
+        font-weight: 700;
+        color: $color-white;
+
+        a {
+          display: block;
+          box-sizing: border-box;
+          padding: $scale-p0 + $scale-m3;
+          height: $navbar-height;
+          color: $color-white;
+
+          &:hover {
+            background-color: $color-navbar-hover;
+          }
+
+          svg {
+            display: inline;
+          }
+
+          span {
+            display: none;
+          }
+        }
+
+        @include until-tablet {
+          font-size: $scale-p2;
+          height: auto;
+
+          a {
+            height: auto;
+
+            svg {
+              display: none;
+            }
+
+            span {
+              display: inline;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/docs/_styles/pagebar.scss

@@ -0,0 +1,32 @@
+$pagebar-height: ($scale-p2 + $scale-p1 + $scale-m2 + $scale-m3);
+
+.pagebar {
+  background-color: $color-eucalyptus;
+  height: $pagebar-height;
+  color: $color-white;
+  padding: $scale-p0;
+
+  .breadcrumbs {
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-start;
+
+    li {
+      margin-right: $scale-m2;
+      font-size: $scale-m1;
+
+      &:not(:first-child) {
+        &:before {
+          content: "/";
+          margin-right: $scale-m2;
+        }
+      }
+    }
+  }
+
+  h1 {
+    margin-top: $scale-m3;
+    line-height: 1.2;
+    font-size: $scale-p2;
+  }
+}

data/docs/_styles/reset.scss

@@ -0,0 +1,92 @@
+// Via: https://github.com/maetl/highball
+
+html {
+  // Setting text-size-adjust to 100% means that fonts don't automatically zoom on mobile browsers
+  // (but pinch zoom still works).
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  // Remove default margins from the document.
+  margin: 0;
+
+  // Make the base font size consistent across all browsers.
+  font-size: 1rem;
+
+  // TODO: what is the best option here?
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+p,
+blockquote,
+figure,
+ol,
+ul {
+  // Remove margin and padding from content block elements. This makes it easier to style
+  // by adding margins and ratios, rather than resetting 0 all over the place.
+  margin: 0;
+  padding: 0;
+}
+
+main,
+li {
+  // Strangely, main isn't block level in certain versions of IE. Also, list items not being
+  // block by default leads to fiddly resets when they're used in nav bars or menus.
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  // Make font sizes reset
+  font-size: inherit;
+}
+
+strong {
+  // Bold, not bolder.
+  font-weight: bold;
+}
+
+a,
+button {
+  // fixes buttons not inheriting text color in most browsers
+  color: inherit;
+}
+
+a {
+  // This is what we want most of the time for apps. Content sites are a little different.
+  text-decoration: none;
+}
+
+button {
+  overflow: visible;
+  border: 0;
+  font: inherit;
+  -webkit-font-smoothing: inherit;
+  letter-spacing: inherit;
+  background: none;
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  // Fix a Firefox WTF.
+  padding: 0;
+  border: 0;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border: 0;
+}

data/docs/_styles/scale.scss

@@ -0,0 +1,23 @@
+// https://github.com/modularscale/modularscale-sass#ratios
+
+$unit-base: 1rem;
+
+$ratio-major-twelfth: 1.3;
+$ratio-fifth: 1.5;
+$ratio-minor-sixth: 1.6;
+$ratio-golden: 1.618;
+$ratio-augmented-fourth: 1.414;
+
+$ratio: $ratio-major-twelfth;
+
+$scale-p0: $unit-base;
+$scale-p1: $unit-base * $ratio;
+$scale-p2: $unit-base * ($ratio * 2);
+$scale-p3: $unit-base * ($ratio * 3);
+$scale-p4: $unit-base * ($ratio * 4);
+
+$scale-m0: $unit-base;
+$scale-m1: $unit-base / $ratio;
+$scale-m2: $unit-base / ($ratio * 2);
+$scale-m3: $unit-base / ($ratio * 3);
+$scale-m4: $unit-base / ($ratio * 4);

data/docs/_styles/spread.scss

@@ -0,0 +1,55 @@
+.spread {
+  //height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: $scale-p3 $scale-p3 $scale-p2 $scale-p3;
+  //justify-content: center;
+
+  &.spread-hero {
+    background-color: $color-eucalyptus;
+    color: $color-white;
+  }
+
+  &.spread-intro {
+    p {
+      font-size: $scale-p0;
+      font-weight: 700;
+      color: $color-stromboli;
+      padding-bottom: $scale-p0;
+      border-bottom: $scale-m4 solid $color-stromboli;
+    }
+  }
+
+  .identity {
+    width: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // img {
+    //   animation-name: logospin;
+    //   animation-duration: 5s;
+    //   animation-iteration-count: infinite;
+    //   transform-origin: 50% 50%;
+    // }
+    //
+    // @keyframes logospin {
+    //   0% {
+    //     transform: rotate(0deg);
+    //   }
+    //   100% {
+    //     transform: rotate(360deg);
+    //   }
+    // }
+  }
+
+  .lede {
+    width: 60%;
+
+    h2 {
+      margin-bottom: $scale-p1;
+      font-size: $scale-p2;
+      line-height: 1.2;
+    }
+  }
+}

data/docs/_styles/styleguide.scss

@@ -0,0 +1,52 @@
+.color-chip {
+  width: 100%;
+  height: 100px;
+}
+
+.color-aquamarine {
+  background-color: #76FABB;
+}
+
+.color-meadow {
+  background-color: #1BDE81;
+}
+
+.color-eucalyptus {
+  background-color: #218764;
+}
+
+.color-stromboli {
+  background-color: #2F5E52;
+}
+
+.p0 {
+  font-size: $scale-p0;
+  line-height: 1.125;
+  margin: 0;
+}
+
+.p1 {
+  font-size: $scale-p1;
+  line-height: 1.125;
+  margin: 0;
+}
+
+.p2 {
+  font-size: $scale-p2;
+  line-height: 1.125;
+  margin: 0;
+}
+
+.p3 {
+  font-size: $scale-p3;
+  line-height: 1.125;
+  margin: 0;
+}
+
+.p4 {
+  font-size: $scale-p4;
+  line-height: 1.125;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+}