just-the-hm-docs 1.0.0.rc1

data/_sass/content.scss

@@ -0,0 +1,239 @@
+@charset "UTF-8";
+
+// Styles for rendered markdown in the .main-content container
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
+
+.main-content {
+  line-height: $content-line-height;
+
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5em;
+  }
+
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
+  ol {
+    list-style-type: none;
+    counter-reset: step-counter;
+
+    > li {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0.2em;
+        left: -1.6em;
+        color: $grey-dk-000;
+        content: counter(step-counter);
+        counter-increment: step-counter;
+        @include fs-3;
+
+        @include mq(sm) {
+          top: 0.11em;
+        }
+      }
+
+      ol {
+        counter-reset: sub-counter;
+
+        > li {
+          &::before {
+            content: counter(sub-counter, lower-alpha);
+            counter-increment: sub-counter;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+
+    > li {
+      &::before {
+        position: absolute;
+        margin-left: -1.4em;
+        color: $grey-dk-000;
+        content: "•";
+      }
+    }
+  }
+
+  .task-list-item {
+    &::before {
+      content: "";
+    }
+  }
+
+  .task-list-item-checkbox {
+    margin-right: 0.6em;
+    margin-left: -1.4em;
+
+    // The same margin-left is used above for ul > li::before
+  }
+
+  hr + * {
+    margin-top: 0;
+  }
+
+  h1:first-of-type {
+    margin-top: 0.5em;
+  }
+
+  dl {
+    display: grid;
+    grid-template: auto / 10em 1fr;
+  }
+
+  dt,
+  dd {
+    margin: 0.25em 0;
+  }
+
+  dt {
+    grid-column: 1;
+    font-weight: 500;
+    text-align: right;
+
+    &::after {
+      content: ":";
+    }
+  }
+
+  dd {
+    grid-column: 2;
+    margin-bottom: 0;
+    margin-left: 1em;
+
+    blockquote,
+    div,
+    dl,
+    dt,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    li,
+    ol,
+    p,
+    pre,
+    table,
+    ul,
+    .table-wrapper {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  dd,
+  ol,
+  ul {
+    dl:first-child {
+      dt:first-child,
+      dd:nth-child(2) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .anchor-heading {
+    position: absolute;
+    right: -$sp-4;
+    width: $sp-5;
+    height: 100%;
+    padding-right: $sp-1;
+    padding-left: $sp-1;
+    overflow: visible;
+
+    @include mq(md) {
+      right: auto;
+      left: -$sp-5;
+    }
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      color: $link-color;
+      visibility: hidden;
+    }
+  }
+
+  .anchor-heading:hover,
+  .anchor-heading:focus,
+  h1:hover > .anchor-heading,
+  h2:hover > .anchor-heading,
+  h3:hover > .anchor-heading,
+  h4:hover > .anchor-heading,
+  h5:hover > .anchor-heading,
+  h6:hover > .anchor-heading {
+    svg {
+      visibility: visible;
+    }
+  }
+
+  summary {
+    cursor: pointer;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  #toctitle {
+    position: relative;
+    margin-top: 1.5em;
+    margin-bottom: 0.25em;
+
+    + table,
+    + .table-wrapper,
+    + .code-example,
+    + .highlighter-rouge,
+    + .sectionbody .listingblock {
+      margin-top: 1em;
+    }
+
+    + p:not(.label) {
+      margin-top: 0;
+    }
+  }
+
+  > h1:first-child,
+  > h2:first-child,
+  > h3:first-child,
+  > h4:first-child,
+  > h5:first-child,
+  > h6:first-child,
+  > .sect1:first-child > h2,
+  > .sect2:first-child > h3,
+  > .sect3:first-child > h4,
+  > .sect4:first-child > h5,
+  > .sect5:first-child > h6 {
+    margin-top: $sp-2;
+  }
+}

data/_sass/custom/custom.scss

@@ -0,0 +1,30 @@
+// stylelint-disable scss/at-extend-no-missing-placeholder
+// Just the HM Docs styles
+@import "hm-branding";
+@import "hm-code";
+@import "hm-colors";
+@import "hm-notes";
+
+// Overrides
+iframe {
+  max-width: 100%;
+}
+
+details {
+  @extend .mb-4;
+}
+
+.main-content {
+  dl {
+    display: block;
+  }
+
+  dt {
+    font-weight: 700;
+    text-align: start;
+  }
+
+  dd + dt {
+    margin-top: 1em;
+  }
+}

data/_sass/custom/hm-branding.scss

@@ -0,0 +1,259 @@
+html {
+  font-size: $font-size-5 !important;
+}
+
+a {
+  outline-color: $link-color;
+}
+
+a:not([class]) {
+  text-decoration-color: $link-color;
+
+  &:hover {
+    background: $base-button-color-hover;
+    color: darken($link-color, 10%);
+    text-decoration-color: darken($link-color, 10%);
+  }
+}
+
+input::placeholder,
+.search-label .search-icon {
+  color: $link-color;
+}
+
+input::placeholder {
+  @include fs-4;
+}
+
+hr {
+  margin: $sp-7 0;
+}
+
+h1,
+h2,
+h3,
+h5,
+h6 {
+  font-weight: 700;
+}
+
+h1 {
+  @include fs-9;
+
+  .main-content & {
+    margin-bottom: $sp-3;
+  }
+}
+
+h2 {
+  @include fs-7;
+
+  .main-content & {
+    margin-bottom: $sp-5;
+  }
+}
+
+h3 {
+  @include fs-6;
+}
+
+h4 {
+  @include fs-5;
+}
+
+h5 {
+  @include fs-5;
+}
+
+h6 {
+  @include fs-4;
+}
+
+.btn {
+  background-image: none;
+  border-radius: 3rem;
+  box-shadow: none;
+  align-items: center;
+  display: inline-flex;
+  font-weight: 700;
+  padding: $sp-3 $sp-4;
+
+  &:not(.btn-primary, .btn-purple, .btn-blue, .btn-green, .btn-outline) {
+    box-shadow: inset 0 0 0 2px $link-color;
+  }
+
+  &::after {
+    content: "\2192";
+    font-size: 144%;
+    font-weight: 400;
+    line-height: 0.8;
+    margin-left: $sp-2;
+    transition: transform ease 200ms;
+  }
+
+  &:hover {
+    &:not(.btn-primary, .btn-purple, .btn-blue, .btn-green) {
+      background: $base-button-color-hover;
+    }
+
+    &::after {
+      transform: translateX($sp-1);
+    }
+  }
+
+  &:focus,
+  &:focus:hover,
+  &.selected:focus {
+    box-shadow: 0 0 0 3px rgba($link-color, 0.4);
+
+    &:not(.btn-primary, .btn-purple, .btn-blue, .btn-green, .btn-outline) {
+      box-shadow: inset 0 0 0 2px $link-color, 0 0 0 3px rgba($link-color, 0.4);
+    }
+  }
+}
+
+.btn-primary:hover {
+  background: $btn-primary-color-hover;
+}
+
+.btn-outline {
+  &,
+  &:hover {
+    box-shadow: inset 0 0 0 2px $body-heading-color;
+    color: $body-heading-color;
+  }
+
+  &:focus,
+  &:focus:hover,
+  &.selected:focus {
+    box-shadow: inset 0 0 0 2px $body-heading-color,
+      0 0 0 3px rgba($link-color, 0.4);
+  }
+}
+
+.label {
+  padding: $sp-1 $sp-2;
+}
+
+.site-title,
+.site-button {
+  outline-offset: -1px;
+
+  &:hover {
+    background: $sidebar-color;
+  }
+}
+
+.site-header,
+.main-header,
+.side-bar {
+  border-color: $border-color-lt;
+}
+
+.side-bar {
+  background-color: $white;
+}
+
+.site-title,
+.nav-list .nav-list-item .nav-list-link,
+.site-footer {
+  @include mq(md) {
+    padding-left: $gutter-spacing-sm;
+  }
+}
+
+.site-title {
+  @include mq(md) {
+    font-size: rem(21px) !important;
+    padding-bottom: $gutter-spacing-sm;
+    padding-top: $gutter-spacing-sm;
+  }
+}
+
+.site-logo {
+  align-items: center;
+  display: flex;
+  font-weight: 700;
+
+  &::after {
+    content: "Documentation";
+    padding-left: rem(62px);
+
+    @include mq(md) {
+      padding-left: rem(53px);
+    }
+  }
+}
+
+.site-nav {
+  margin-bottom: $gutter-spacing-sm;
+}
+
+.nav-list .nav-list-item {
+  font-size: $font-size-5 !important;
+
+  .nav-list-expander,
+  .nav-list-link {
+    color: $nav-child-link-color;
+
+    &:hover,
+    &.active {
+      background: $sidebar-color;
+    }
+  }
+
+  .nav-list-link {
+    outline-offset: -1px;
+    text-decoration: underline;
+    text-underline-offset: rem(3px);
+
+    .nav-list .nav-list-item > &:hover,
+    &:hover,
+    &.active {
+      color: $link-color;
+      text-decoration: underline;
+    }
+
+    &.active {
+      font-weight: 700;
+    }
+
+    &.external {
+      padding-right: 1rem;
+    }
+  }
+}
+
+.search {
+  padding: $gutter-spacing-sm;
+  padding-bottom: 0;
+
+  @include mq(md) {
+    padding: 0;
+  }
+}
+
+.search-input {
+  padding-left: #{$gutter-spacing-sm + $sp-6};
+
+  html:not(.search-active) &:focus-visible {
+    box-shadow: inset 0 0 1em $grey-lt-100;
+  }
+
+  @include mq(md) {
+    padding-left: #{$gutter-spacing + $sp-6};
+  }
+}
+
+.search-label .search-icon {
+  height: rem(22px);
+  width: rem(22px);
+}
+
+.search-result {
+  outline-offset: -1px;
+}
+
+.aux-nav {
+  @include fs-4;
+}

data/_sass/custom/hm-code.scss

@@ -0,0 +1,153 @@
+// HM styling just for code blocks and snippets.
+:not(pre, figure) > code {
+  padding: $sp-1 $sp-2;
+}
+
+div.highlighter-rouge,
+div.listingblock > div.content,
+figure.highlight,
+.highlight .table-wrapper td,
+.highlight .table-wrapper pre {
+  background-color: $code-block-background-color;
+  color: $code-block-color;
+}
+
+code,
+.highlight .table-wrapper td,
+.highlight .table-wrapper pre {
+  font-size: $font-size-4 !important;
+}
+
+div.highlighter-rouge,
+div.listingblock {
+  div.highlight {
+    padding: $sp-5;
+  }
+}
+
+// Mostly taken from OneDarkJekyll - Vivid.
+// https://github.com/mgyongyosi/OneDarkJekyll/blob/master/syntax-one-dark-vivid.css
+.highlight {
+  .c, // comment
+  .cm, // comment.multiline
+  .cp, // comment.preproc
+  .c1, // comment.single
+  .cs, // comment.special
+  .gu // generic.subheading
+  {
+    color: #989fae;
+    font-style: italic;
+  }
+
+  .err // error
+  {
+    color: #960050;
+    background-color: #1e0010;
+  }
+
+  .k, // keyword
+  .kc, // keyword.constant
+  .kd, // keyword.declaration
+  .kn, // keyword.namespace
+  .kp, // keyword.pseudo
+  .kr, // keyword.reserved
+  .kt // keyword.type
+  {
+    color: #e19ef5;
+  }
+
+  .l, // literal
+  .ld, // literal.date
+  .s, // literal.string
+  .sb, // literal.string.backtick
+  .sc, // literal.string.char
+  .sd, // literal.string.doc
+  .s1, // literal.string.single
+  .s2, // literal.string.double
+  .se, // literal.string.escape
+  .sh, // literal.string.heredoc
+  .si, // literal.string.interpol
+  .sx // literal.string.other
+  {
+    color: #a3eea0;
+  }
+
+  .n, // name
+  .nf, // name.function
+  .nn, // name.namespace
+  .nx, // name.other
+  .o, // operator
+  .p // punctuation
+  {
+    color: #dee2f7;
+  }
+
+  .ge // generic.emph
+  {
+    font-style: italic;
+  }
+
+  .gs // generic.strong
+  {
+    font-weight: 700;
+  }
+
+  .m, // literal.number
+  .il, // literal.number.integer.long
+  .mf, // literal.number.float
+  .mh, // literal.number.hex
+  .mi, // literal.number.integer
+  .mo, // literal.number.oct
+  .na // name.attribute
+  {
+    color: #eddc96;
+  }
+
+  .bp, // name.builtin.pseudo
+  .nb, // name.builtin
+  .nc, // name.class
+  .no, // name.constant
+  .nd, // name.decorator
+  .ni, // name.entity
+  .ne, // name.exception
+  .nl, // name.label
+  .nv, // name.variable
+  .py, // name.property
+  .vc, // name.variable.class
+  .vg // name.variable.global
+  {
+    color: #fdce68;
+  }
+
+  .nt, // name.tag
+  .vi // name.variable.instance
+  {
+    color: #f9867b;
+  }
+
+  .ow // operator.word
+  {
+    font-weight: 700;
+  }
+
+  .w // text.whitespace
+  {
+    color: #f8f8f2;
+  }
+
+  .sr, // literal.string.regex
+  .ss // literal.string.symbol
+  {
+    color: #7be2f9;
+  }
+
+  .gd // generic.deleted
+  {
+    color: #f92672;
+  }
+
+  .gi // generic.inserted
+  {
+    color: #a6e22e;
+  }
+}

data/_sass/custom/hm-colors.scss

@@ -0,0 +1,15 @@
+// Utility classes for HM colors.
+
+// Text colors
+@each $name, $color in $hm-colors {
+  .text-#{$name} {
+    color: $color !important;
+  }
+}
+
+// Background colors
+@each $name, $color in $hm-colors {
+  .bg-#{$name} {
+    background-color: $color !important;
+  }
+}

data/_sass/custom/hm-notes.scss

@@ -0,0 +1,38 @@
+// HM styling just for callouts, notes, and warnings.
+blockquote {
+  border-left: 0 none;
+}
+
+p,
+blockquote {
+  &.highlight,
+  &.important,
+  &.important-title,
+  &.new,
+  &.note,
+  &.note-title,
+  &.warning {
+    border-left: 0 none;
+    box-shadow: none;
+    margin-bottom: $sp-7;
+    margin-top: $sp-7;
+    padding: $sp-5;
+
+    & > &,
+    & > div.opaque > & {
+      margin-bottom: $sp-4;
+      margin-top: $sp-4;
+    }
+
+    &::before,
+    &:is(.important-title) > p:first-child,
+    &:is(.note-title) > p:first-child {
+      @include fs-3;
+      letter-spacing: 1px;
+    }
+  }
+}
+
+div.opaque {
+  border-radius: $border-radius;
+}