just-the-docs-altair 0.2.3

data/_sass/navigation.scss

@@ -0,0 +1,148 @@
+//
+// Main nav, breadcrumb, etc...
+//
+
+.site-title {
+  display: block;
+  flex: 1 1 auto;
+  color: $body-heading-color;
+  background-color: $sidebar-color;
+
+  @include mq(md) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 101;
+    height: 60px;
+    padding-top: $sp-4;
+    border-bottom: $border $border-color;
+  }
+}
+
+.navigation-list {
+  padding: 0;
+  margin-top: $sp-4;
+  margin-bottom: 0;
+  list-style: none;
+
+  @include mq(md) {
+    margin-top: 0;
+  }
+}
+
+.navigation-list-child-list {
+  padding-left: $sp-3;
+  list-style: none;
+
+  .navigation-list-link {
+    color: $nav-child-link-color;
+  }
+
+  .navigation-list-item {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      margin-top: 0.3em;
+      margin-left: -0.8em;
+      color: rgba($body-text-color, 0.3);
+      content: "- ";
+    }
+
+    &.active {
+      &::before {
+        color: $body-text-color;
+      }
+    }
+  }
+}
+
+.navigation-list-item {
+  @include fs-4;
+  margin: 0;
+
+  @include mq(md) {
+    @include fs-3;
+  }
+
+  .navigation-list-child-list {
+    display: none;
+  }
+
+  &.active {
+    .navigation-list-child-list {
+      display: block;
+    }
+  }
+}
+
+.navigation-list-link {
+  display: block;
+  padding-top: $sp-1;
+  padding-bottom: $sp-1;
+
+  &.active {
+    font-weight: 600;
+    color: $body-heading-color;
+    text-decoration: none;
+  }
+}
+
+// Small screen nav
+
+.main-nav,
+.aux-nav {
+  display: none;
+
+  &.nav-open {
+    display: block;
+  }
+  @include mq(md) {
+    display: block;
+  }
+}
+
+.navigation-list-toggle {
+  position: absolute;
+  right: $sp-4;
+
+  @include mq(md) {
+    display: none !important;
+  }
+}
+
+// Breadcrumb nav
+.breadcrumb-nav {
+  @include mq(md) {
+    margin-top: -$sp-4;
+  }
+}
+
+.breadcrumb-nav-list {
+  padding-left: 0;
+  margin-bottom: $sp-3;
+  list-style: none;
+}
+
+.breadcrumb-nav-list-item {
+  display: table-cell;
+  @include fs-2;
+
+  &::before {
+    display: none;
+  }
+
+  &::after {
+    display: inline-block;
+    margin-right: $sp-2;
+    margin-left: $sp-2;
+    color: $grey-dk-000;
+    content: "/";
+  }
+
+  &:last-child {
+    &::after {
+      content: "";
+    }
+  }
+}

data/_sass/search.scss

@@ -0,0 +1,114 @@
+//
+// Search input and autocomplete
+//
+
+.search {
+  position: relative;
+  z-index: 99;
+  display: none;
+  flex-grow: 1;
+  padding: $sp-2;
+  margin-bottom: $sp-3;
+  background-color: $white;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
+
+  @include mq(md) {
+    display: block;
+    padding-top: $sp-1;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &.nav-open {
+    display: block;
+  }
+}
+
+.search-results-wrap {
+  display: none;
+
+  &.active {
+    position: absolute;
+    top: $sp-1;
+    z-index: 100;
+    display: block;
+    width: 300px;
+    margin-top: $gutter-spacing;
+    background: lighten($body-background-color, 1%);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+  }
+}
+
+.search-input-wrap {
+  display: flex;
+  background-color: $body-background-color;
+}
+
+.search-input {
+  width: 100%;
+  padding-top: $sp-1;
+  padding-bottom: $sp-1;
+  background-color: $body-background-color;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  order: 2;
+
+  &:focus {
+    outline: 0;
+    box-shadow: none;
+
+    + .search-icon {
+      fill: $link-color;
+    }
+  }
+
+  @include fs-5;
+
+  @include mq(sm) {
+    @include fs-3;
+  }
+
+  @include mq(md) {
+    @include fs-2;
+  }
+}
+
+.search-icon {
+  align-self: center;
+  margin-right: $sp-2;
+  fill: $grey-dk-000;
+  order: 1;
+}
+
+.search-results-list {
+  padding-left: 0;
+  margin-top: $sp-1;
+  margin-bottom: $sp-1;
+  list-style: none;
+  @include fs-3;
+}
+
+.search-results-list-item {
+  padding: 0;
+  margin: 0;
+}
+
+.search-results-link {
+  display: block;
+  padding-top: $sp-1;
+  padding-right: $sp-3;
+  padding-bottom: $sp-1;
+  padding-left: $sp-3;
+
+  &:hover {
+    color: $body-heading-color;
+    background-color: darken($body-background-color, 2%);
+  }
+}

data/_sass/support/_functions.scss

@@ -0,0 +1,10 @@
+@function rem($size, $unit:"") {
+  $remSize: $size / $root-font-size;
+
+  @if ($unit == false) {
+    @return #{$remSize};
+  }
+  @else {
+    @return #{$remSize}rem;
+  }
+}

data/_sass/support/_variables.scss

@@ -0,0 +1,130 @@
+//
+// Typography
+//
+
+$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
+$root-font-size: 16px !default;         // Base font-size for rems
+$body-line-height: 1.4 !default;
+$body-heading-line-height: 1.15 !default !default;
+
+//
+// Colors
+//
+
+$white: #fff !default;
+
+$grey-dk-000: #959396 !default;
+$grey-dk-100: #5c5962 !default;
+$grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
+$grey-dk-300: #27262b !default;
+
+$grey-lt-000: #f5f6fa !default;
+$grey-lt-100: #eeebee !default;
+$grey-lt-200: #ecebed !default;
+$grey-lt-300: #e6e1e8 !default;
+
+$purple-000: #7253ed !default;
+$purple-100: #5e41d0 !default;
+$purple-200: #4e26af !default;
+$purple-300: #381885 !default;
+
+$blue-000: #2c84fa !default;
+$blue-100: #2869e6 !default;
+$blue-200: #264caf !default;
+$blue-300: #183385 !default;
+
+$green-000: #41d693 !default;
+$green-100: #11b584 !default;
+$green-200: #009c7b !default;
+$green-300: #026e57 !default;
+
+$yellow-000: #ffeb82 !default;
+$yellow-100: #fadf50 !default;
+$yellow-200: #f7d12e !default;
+$yellow-300: #e7af06 !default;
+
+$red-000: #f77e7e !default;
+$red-100: #f96e65 !default;
+$red-200: #e94c4c !default;
+$red-300: #dd2e2e !default;
+
+$body-background-color: $white !default;
+$sidebar-color: $grey-lt-000 !default;
+$code-background-color: $grey-lt-000 !default;
+
+$body-text-color: $grey-dk-100 !default;
+$body-heading-color: $grey-dk-300 !default;
+$nav-child-link-color: $grey-dk-100 !default;
+$link-color: $purple-000 !default;
+$btn-primary-color: $purple-100 !default;
+$base-button-color: #f7f7f7 !default;
+
+//
+// Media queries in pixels
+//
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: 740px,
+  lg: 1120px,
+  xl: 1400px
+) !default;
+
+//
+// Spacing
+//
+
+$spacing-unit: 1rem; // 1rem == 16px
+
+$spacers: (
+  sp-0: 0,
+  sp-1: $spacing-unit * 0.25,
+  sp-2: $spacing-unit * 0.5,
+  sp-3: $spacing-unit * 0.75,
+  sp-4: $spacing-unit,
+  sp-5: $spacing-unit * 1.5,
+  sp-6: $spacing-unit * 2,
+  sp-7: $spacing-unit * 2.5,
+  sp-8: $spacing-unit * 3,
+  sp-9: $spacing-unit * 3.5,
+  sp-10: $spacing-unit * 4
+) !default;
+
+$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
+$sp-2: map-get($spacers, sp-2) !default; // 0.5  rem == 8px
+$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
+$sp-4: map-get($spacers, sp-4) !default; // 1    rem == 16px
+$sp-5: map-get($spacers, sp-5) !default; // 1.5  rem == 24px
+$sp-6: map-get($spacers, sp-6) !default; // 2    rem == 32px
+$sp-7: map-get($spacers, sp-7) !default; // 2.5  rem == 40px
+$sp-8: map-get($spacers, sp-8) !default; // 3    rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 4    rem == 48px
+$sp-10: map-get($spacers, sp-10) !default; // 4.5  rem == 48px
+
+//
+// Borders
+//
+
+$border: 1px solid !default;
+$border-radius: 4px !default;
+$border-color: $grey-lt-100 !default;
+
+//
+// Grid system
+//
+
+$gutter-spacing: $sp-6 !default;
+$gutter-spacing-sm: $sp-4 !default;
+$nav-width: 232px !default;
+$content-width: 800px !default;
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: 740px,
+  lg: 800px,
+  xl: 1316px
+) !default;

data/_sass/support/mixins/_buttons.scss

@@ -0,0 +1,27 @@
+// Colored button
+
+@mixin btn-color($fg, $bg) {
+  color: $fg;
+  background-color: darken($bg, 2%);
+  background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: $fg;
+    background-color: darken($bg, 4%);
+    background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: darken($bg, 5%);
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken($bg, 10%);
+  }
+}

data/_sass/support/mixins/_layout.scss

@@ -0,0 +1,36 @@
+// Media query
+
+// Media query mixin
+// Usage:
+// @include mq(md) {
+//   ..medium and up styles
+// }
+@mixin mq($name) {
+  // Retrieves the value from the key
+  $value: map-get($media-queries, $name);
+
+  // If the key exists in the map
+  @if $value != null {
+    // Prints a media query based on the value
+    @media (min-width: rem($value)) {
+      @content;
+    }
+  }
+
+  @else {
+    @warn "No value could be retrieved from `#{$media-query}`. "
+      + "Please make sure it is defined in `$media-queries` map.";
+  }
+}
+
+// Responsive container
+
+@mixin container {
+  padding-right: $gutter-spacing-sm;
+  padding-left: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-right: $gutter-spacing;
+    padding-left: $gutter-spacing;
+  }
+}