13 files changed, 1172 insertions, 0 deletions
diff --git a/examples/snowpack/public/css/components/_button.scss b/examples/snowpack/public/css/components/_button.scss
new file mode 100644
index 000000000..8c865d0dd
--- /dev/null
+++ b/examples/snowpack/public/css/components/_button.scss
@@ -0,0 +1,42 @@
+@use '../var' as *;
+@use '../animations' as *;
+
+.button {
+  box-sizing: border-box;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  padding: 0.3em 1.5em;
+  font-weight: bold;
+  font-size: 100%;
+  font-size: 22px;
+  font-family: inherit;
+  font-family: 'Overpass', sans-serif;
+  white-space: nowrap;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  background-color: #fefefe;
+  border: 1px solid #666;
+  border-radius: 4px;
+  cursor: pointer;
+  text-decoration: none !important;
+  user-select: none;
+  @include animation-hover-pop;
+
+  &-primary {
+    color: #fff;
+    background: linear-gradient(45deg, #24bf62, #267dd6, #b224d0);
+  }
+}
+
+a.button {
+  text-decoration: none !important;
+  &-primary {
+    color: #fff;
+  }
+}
+
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/examples/snowpack/public/css/components/_card-grid.scss b/examples/snowpack/public/css/components/_card-grid.scss
new file mode 100644
index 000000000..5bfb8eee4
--- /dev/null
+++ b/examples/snowpack/public/css/components/_card-grid.scss
@@ -0,0 +1,105 @@
+.card-grid {
+  display: grid;
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  grid-auto-flow: dense;
+}
+
+.card-grid-3 {
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+.card-grid-4 {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+.discord-banner {
+  grid-column: 1 / -1;
+  border: 1px solid #2e2077;
+  background-color: #545eec;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: white;
+  font-weight: 500;
+  padding: 1.25rem;
+  margin: 1.5rem 0 1rem;
+  background: #545eec;
+  box-shadow: 6px 6px 20px #4750c966, -6px -6px 20px #616cff66;
+}
+.discord-banner > * {
+  display: block;
+}
+
+@media (max-width: 700px) {
+  .discord-banner {
+    flex-direction: column;
+  }
+  .discord-banner > div {
+    margin-top: 1rem;
+  }
+}
+
+.card {
+  display: flex;
+  grid-column: span 1;
+  overflow: hidden;
+  font-family: Open Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+    Roboto, sans-serif;
+  color: #1a202c;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+}
+.card:hover {
+  border-color: #2a85ca;
+  box-shadow: 0 2px 2px 0 rgba(46, 94, 130, 0.4);
+}
+.card:hover .card-image {
+  opacity: 0.9;
+}
+
+.card-image {
+  width: 100%;
+  object-fit: cover;
+  opacity: 0.8;
+}
+
+
+.card-image-small {
+  flex-grow: 1;
+  height: 120px;
+}
+
+.card-image-large {
+ height: 200px;
+}
+.card-text {
+  padding: 1rem;
+}
+.card-title {
+  margin: 0 0 0.25rem 0;
+  font-weight: 600;
+  font-size: 20px;
+  font-family: 'Overpass';
+  line-height: 1.1;
+}
+.content-title {
+  font-family: 'Overpass';
+}
+
+.card:nth-child(4n + 0) .card-image {
+  background: #f2709c;
+  background: linear-gradient(30deg, #ff9472, #f2709c);
+}
+.card:nth-child(4n + 1) .card-image {
+  background: #fbd3e9;
+  background: linear-gradient(30deg, #bb377d, #fbd3e9);
+}
+.card:nth-child(4n + 2) .card-image {
+  background: #b993d6;
+  background: linear-gradient(30deg, #8ca6db, #b993d6);
+}
+
+.card:nth-child(4n + 3) .card-image {
+  background: #00d2ff;
+  background: linear-gradient(30deg, #3a7bd5, #00d2ff);
+}
diff --git a/examples/snowpack/public/css/components/_container.scss b/examples/snowpack/public/css/components/_container.scss
new file mode 100644
index 000000000..a009bad5a
--- /dev/null
+++ b/examples/snowpack/public/css/components/_container.scss
@@ -0,0 +1,5 @@
+.container {
+  max-width: 1400px;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+}
diff --git a/examples/snowpack/public/css/components/_copy-button.scss b/examples/snowpack/public/css/components/_copy-button.scss
new file mode 100644
index 000000000..3a27b9087
--- /dev/null
+++ b/examples/snowpack/public/css/components/_copy-button.scss
@@ -0,0 +1,48 @@
+@use '../var' as *;
+@use '../animations' as *;
+
+.copy-button {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 292px;
+  padding: 0.75rem 1.25rem;
+  padding-bottom: 0.75rem;
+  font-size: 100%;
+  font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+  line-height: 1.5rem;
+  background-color: white;
+  border: 1px solid #0006;
+  border-radius: 4px;
+  cursor: pointer;
+  @include animation-copy-button;
+
+  svg,
+  .faded {
+    color: #ccc;
+    transition: color 0.1s ease-out;
+  }
+}
+
+// I don't think this is used
+.copy-button.active {
+  animation: pulse 0.5s;
+  animation-iteration-count: 1;
+
+  svg {
+    color: #ccc;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    color: #2a85ca;
+    border-color: #2a85ca;
+  }
+
+  100% {
+  }
+}
diff --git a/examples/snowpack/public/css/components/_feature-list.scss b/examples/snowpack/public/css/components/_feature-list.scss
new file mode 100644
index 000000000..f1a164774
--- /dev/null
+++ b/examples/snowpack/public/css/components/_feature-list.scss
@@ -0,0 +1,46 @@
+@use '../var' as *;
+// A long feature list in columns
+.feature-list {
+  
+  &-top {
+    text-align: left;
+  }
+
+  &-bullets {
+    display: grid;
+    grid-row-gap: 1em;
+    grid-column-gap: 2em;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    margin: 2.5em 0 !important;
+    padding: .1em !important;
+    list-style: none;
+
+    h3 {
+      margin: 0 0 .25em 0;
+      font-size: 1.25em;
+    }
+
+  }
+  &-bullet {
+    display: list-item;
+    padding: 0.25em;
+    border-radius: 4px;
+
+    &::before {
+      display: block;
+      float: left;
+      margin-right: 6px;
+      color: green !important;
+      content: '✅';
+
+    }
+  }
+  &-buttons {
+    margin: 2em 0;
+    text-align: center;
+  }
+  &-button {
+    display: inline-block;
+    margin: 0.5em;
+  }
+}
diff --git a/examples/snowpack/public/css/components/_hero.scss b/examples/snowpack/public/css/components/_hero.scss
new file mode 100644
index 000000000..daa2a1f27
--- /dev/null
+++ b/examples/snowpack/public/css/components/_hero.scss
@@ -0,0 +1,108 @@
+@use '../var' as *;
+
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50vh;
+  min-height: 20rem;
+  max-height: 30rem;
+  color: #111;
+  line-height: 1.5;
+  background: #2a85ca40;
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' title='mountain' class='logo' fill='%23FFFB'%3E%3Cpath d='M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z' /%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: calc(100% + 100px) calc(100% + 64px);
+  background-size: 50%;
+  border-bottom: 1px solid #0003;
+  //margin-top: $nav-height;
+
+  @media (min-width: $breakpoint-l) {
+    margin: 0;
+  }
+
+  a {
+    color: white;
+  }
+
+  > svg {
+    display: block;
+    margin: auto;
+    opacity: 0.9;
+  }
+
+  .logo {
+    position: absolute;
+    right: 0;
+    width: 100%;
+  }
+  .logo path {
+    fill: #fff;
+  }
+
+  .section {
+    padding: 1rem * 2;
+  }
+}
+
+.hero-cta {
+  display: flex;
+  justify-content: center;
+  margin: 1.5rem auto 0;
+}
+.header-link {
+  padding-left: 2px;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  float: left;
+  margin: 0 -20px 0 0;
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 1;
+
+  @media (min-width: $breakpoint-m) {
+    margin: 0 20px 0 0;
+  }
+
+  svg {
+    width: 31px;
+    height: 31px;
+    margin-right: 8px;
+    margin-left: 2px;
+    padding: 0;
+    color: #fff;
+  }
+}
+
+.header-snowpack {
+  margin: 0 auto 0.75rem;
+  font-weight: 900;
+  font-size: 3.5rem;
+  line-height: 1;
+  letter-spacing: -0.045em;
+  text-align: center;
+  opacity: 0.9;
+
+  @media (min-width: $breakpoint-m) {
+    max-width: none;
+    font-size: 5.75rem;
+    opacity: 1;
+  }
+}
+
+.header-snowpack-subtitle {
+  margin: 0;
+  margin: auto;
+  font-weight: 500;
+  font-size: 2rem;
+  line-height: 1;
+  letter-spacing: -1px;
+  text-align: center;
+
+  @media (min-width: $breakpoint-m) {
+    font-size: 3rem;
+  }
+}
diff --git a/examples/snowpack/public/css/components/_icon.scss b/examples/snowpack/public/css/components/_icon.scss
new file mode 100644
index 000000000..ac08b9337
--- /dev/null
+++ b/examples/snowpack/public/css/components/_icon.scss
@@ -0,0 +1,21 @@
+/**
+ * Icon
+ * SVG icons and the like
+ */
+
+.snow-icon {
+  display: block;
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+
+  // ----------
+  //  Modifiers
+  // ----------
+
+  // note: this is just an example; make others!
+  &__lg {
+    width: 2em;
+    height: 2em;
+  }
+}
diff --git a/examples/snowpack/public/css/components/_logo.scss b/examples/snowpack/public/css/components/_logo.scss
new file mode 100644
index 000000000..92e139fd4
--- /dev/null
+++ b/examples/snowpack/public/css/components/_logo.scss
@@ -0,0 +1,29 @@
+@use '../var' as *;
+
+/**
+ * Snowpack Logo
+ * That iconic mountain you know and love
+ */
+
+.snow-logo {
+  display: inline-flex;
+  align-items: center;
+
+  // -----------
+  //  Components
+  // -----------
+
+  &-icon {
+    display: block;
+    width: 1em;
+    height: 1em;
+    margin-right: 0.25em;
+    fill: currentColor;
+  }
+
+  &-type {
+    font-weight: 700;
+    font-family: $heading;
+    letter-spacing: -0.03em;
+  }
+}
diff --git a/examples/snowpack/public/css/components/_nav.scss b/examples/snowpack/public/css/components/_nav.scss
new file mode 100644
index 000000000..7220b38e2
--- /dev/null
+++ b/examples/snowpack/public/css/components/_nav.scss
@@ -0,0 +1,118 @@
+@use '../var' as *;
+
+/**
+ * Top nav
+ * The thing at the top
+ */
+
+.snow-nav {
+  position: sticky;
+  top: 0;
+  z-index: map-get($map: $layers, $key: 'nav');
+  display: grid;
+  grid-template-areas: 
+  'mobile logo version'
+  'search search search';
+  grid-template-rows: $nav-height $nav-height;
+  grid-template-columns: 1fr 2fr 1fr;
+  align-items: center;
+  height: $nav-height;
+  padding-right: 0.5rem;
+  padding-left: 0.625rem;
+  color: $white;
+  background-color: $dark-blue;
+
+  body.is-nav-open & {
+    height: $nav-height * 2;
+  }
+
+  @media (min-width: $breakpoint-m) {
+    display: flex;
+    height: $nav-height;
+    padding-left: 0;
+  }
+
+  // -----------
+  //  Components
+  // -----------
+
+  &-link {
+    display: inline-block;
+    padding: 0.5em;
+    color: $white;
+    font-weight: 500;
+    text-decoration: none;
+    opacity: 0.7;
+    transition: opacity 150ms linear;
+
+    &:focus,
+    &:hover {
+      opacity: 1;
+    }
+
+    &__desktop {
+      display: none;
+
+      @media (min-width: $breakpoint-m) {
+        display: block;
+      }
+    }
+  }
+
+  &-logo {
+    display: flex;
+    grid-area: logo;
+    justify-content: center;
+    padding: 0.5rem;
+    color: $white;
+    font-size: 24px;
+    text-decoration: none;
+
+    @media (min-width: $breakpoint-m) {
+      justify-content: flex-start;
+      padding: 0.5rem 1.25rem;
+    }
+  }
+
+  &-mobile-open {
+    display: flex;
+    grid-area: mobile;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    color: $white;
+    font-size: 16px;
+    background: none;
+    border: none;
+    appearance: none;
+
+    @media (min-width: $breakpoint-m) {
+      display: none;
+    }
+  }
+
+  &-version {
+    grid-area: version;
+    margin-left: 0.5em;
+    font-size: 0.8em;
+    font-family: $code;
+    text-align: right;
+
+    @media (min-width: $breakpoint-m) {
+      text-align: left;
+
+      &::after {
+        display: inline-block;
+        width: 1px;
+        height: 1.5em;
+        margin-left: 0.5em;
+        vertical-align: -25%;
+        background-color: rgba($white, 0.25);
+        content: '';
+      }
+    }
+  }
+}
+
diff --git a/examples/snowpack/public/css/components/_old.scss b/examples/snowpack/public/css/components/_old.scss
new file mode 100644
index 000000000..a39d1a4b5
--- /dev/null
+++ b/examples/snowpack/public/css/components/_old.scss
@@ -0,0 +1,247 @@
+@use '../var' as *;
+
+body {
+  &.is-nav-open {
+    overflow: hidden;
+  }
+}
+
+// Notification
+
+.notification {
+  padding: 0.5rem;
+  color: white;
+  font-weight: bold;
+  background-color: #b224d0;
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+}
+
+// Stub
+.stub {
+  padding: 0.5rem;
+  font-weight: bold;
+  background-color: #f0db4f;
+  a {
+    text-decoration: underline;
+  }
+}
+
+
+
+// Company logos
+img.company-logo {
+  flex: 100%;
+  height: 56px;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.company-logos {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: -4px;
+  margin-bottom: 24px;
+
+  > a {
+    flex-shrink: 0;
+    margin: 0 4px;
+    padding: 10px;
+    color: #e74c3c;
+    text-decoration: none;
+    opacity: 0.8;
+    filter: grayscale(0.1);
+
+    &:hover {
+      font-weight: normal;
+      text-decoration: underline;
+      opacity: 1;
+      filter: grayscale(0);
+    }
+  }
+
+  > .add-company-button,
+  > .add-star-button {
+    display: flex;
+    align-items: center;
+    color: #555;
+    font-weight: normal;
+    opacity: 1;
+    filter: grayscale(0);
+  }
+
+  > .add-company-button {
+    color: #e74c3c;
+    border-color: #e74c3c;
+  }
+}
+
+// github button
+
+.github-button {
+  display: none;
+}
+
+// grid list
+.grid-list ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  font-size: 18px;
+  font-family: Overpass;
+  font-style: italic;
+  list-style: none;
+}
+
+// highlight
+.highlight,
+.highlight-container {
+  position: relative;
+  font-weight: bold;
+}
+
+.highlight-container {
+  display: inline-block;
+}
+
+.highlight-1 {
+  color: #2ecc71;
+}
+
+.highlight-2 {
+  color: #be2edd;
+}
+
+.highlight-3 {
+  color: #0c8cec;
+}
+
+.highlight-red {
+  color: #2ecc71;
+}
+.highlight-yellow {
+  color: #be2edd;
+}
+.highlight-green {
+  color: #0c8cec;
+}
+
+// Img banner
+.img-banner {
+  display: block;
+  margin: -3rem -1.5rem 0;
+  text-align: center;
+  background: #f0db4f;
+  border-radius: 4px;
+
+  @media (min-width: $breakpoint-m) {
+    height: 100px;
+    margin: 0;
+  }
+
+  img {
+    height: 74px;
+    border: none;
+    box-shadow: none;
+
+    @media (min-width: $breakpoint-m) {
+      height: 100px;
+    }
+  }
+}
+
+//
+.content-title {
+  font-family: $heading;
+  line-height: 1em;
+  letter-spacing: -0.05em;
+}
+h2.content-title {
+  font-size: 3em;
+}
+h3.content-title {
+  font-size: 2em;
+}
+
+// Search form
+.search-form {
+  flex-grow: 1;
+}
+
+// Hidden mobile
+@media (max-width: $breakpoint-m - 1) {
+  .hidden-mobile {
+    display: none !important;
+  }
+  .version-tag {
+    display: none;
+  }
+}
+
+// Frame
+
+.frame {
+  position: relative;
+  margin: 1rem 0;
+  padding: 34px 17px 10px 17px;
+  background-color: #0a5e9d;
+  border-radius: 10px;
+
+  &::before {
+    position: absolute;
+    top: 5px;
+    display: block;
+    content: url(/img/guides/react/buttons.svg);
+  }
+
+  &::after {
+    position: absolute;
+    top: 5px;
+    right: 17px;
+    display: block;
+    content: url(/img/guides/react/snowpack-logo-tiny.svg);
+  }
+}
+
+// Diff markdown blocks
+
+.language-diff .deleted-sign,
+.language-diff .inserted-sign .inserted {
+  user-select: none;
+}
+
+.token.inserted {
+  color: #b5cea8;
+}
+
+.token.deleted {
+  color: #ce9178;
+}
+
+// Anchor links on hover
+.content {
+  h2,
+  h3,
+  h4 {
+    .header-link {
+      margin-left: 0.25rem;
+      color: #2e5e82;
+      font-weight: 100;
+      opacity: 1;
+      transition: opacity 100ms ease-in-out;
+
+      @media (min-width: $breakpoint-m) {
+        opacity: 0;
+      }
+    }
+  }
+
+  h2,
+  h3,
+  h4 {
+    &:hover .header-link {
+      opacity: 1;
+    }
+  }
+}
diff --git a/examples/snowpack/public/css/components/_search.scss b/examples/snowpack/public/css/components/_search.scss
new file mode 100644
index 000000000..8d84816b6
--- /dev/null
+++ b/examples/snowpack/public/css/components/_search.scss
@@ -0,0 +1,119 @@
+@use '../var' as *;
+
+.search-form {
+  position: relative;
+  z-index: 1000;
+  display: flex;
+  flex-grow: 1;
+  grid-area: search;
+  margin: 0 6px;
+  > * {
+    flex-grow: 1;
+  }
+
+  @media (min-width: $breakpoint-m) {
+    max-width: 600px;
+  }
+
+  @media (max-width: $breakpoint-m - 1) {
+    & {
+      display: none;
+    }
+    body.is-nav-open & {
+      display: flex;
+    }
+  }
+
+  & .sr-only {
+    display: none;
+  }
+
+  &-hint {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+    padding: 6px 12px;
+    color: #c2ced9;
+    font-size: 16px;
+    pointer-events: none;
+
+    & * {
+      font-family: $code;
+    }
+
+    &::before {
+      display: inline-block;
+      width: 1px;
+      height: 1.5em;
+      margin-right: 0.5em;
+      vertical-align: -35%;
+      background-color: rgba($white, 0.25);
+      content: '';
+    }
+
+    @media (min-width: $breakpoint-m) {
+      display: block;
+    }
+  }
+
+  &-input {
+    flex-grow: 1;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding-top: 0.5rem;
+    padding-right: 1rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    overflow: visible;
+    color: #fff;
+    font-weight: 500;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: inherit;
+    background-color: #446e8f;
+    border-color: rgba($white, 0.25);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 0.25rem;
+    outline: 0;
+    transition-timing-function: ease-in-out;
+    transition-duration: 0.2s;
+    transition-property: border-color, color;
+    -webkit-font-smoothing: antialiased;
+
+    &:focus {
+      color: white;
+      border-color: rgba($white, 0.75);
+
+      &::placeholder {
+        color: rgba($white, 0.8);
+      }
+    }
+    &::placeholder {
+      color: #c2ced9;
+    }
+
+    &__desktop {
+      display: none;
+
+      @media (min-width: $breakpoint-m) {
+        display: block;
+      }
+    }
+  }
+}
+
+.algolia-autocomplete .ds-dropdown-menu {
+  @media (max-width: $breakpoint-m - 1) {
+    width: 100%;
+    min-width: inherit;
+    max-width: inherit;
+    margin-top: 0.5rem;
+  }
+}
+
+.algolia-autocomplete .ds-dropdown-menu::before {
+  display: none !important;
+}
diff --git a/examples/snowpack/public/css/components/_toc.scss b/examples/snowpack/public/css/components/_toc.scss
new file mode 100644
index 000000000..8e23b358f
--- /dev/null
+++ b/examples/snowpack/public/css/components/_toc.scss
@@ -0,0 +1,132 @@
+@use '../var' as *;
+
+/**
+ * Table of Contents (toc)
+ * The left-hand sidebar
+ */
+
+$top-padding: 24px;
+
+%toc-link {
+  position: relative;
+  display: block;
+  color: $white;
+  text-decoration: none;
+  border: none;
+  transition: color 0.3s;
+
+  @media (min-width: $breakpoint-m) {
+    color: $grey;
+  }
+
+  &::before {
+      position: absolute;
+      top: -2px;
+      left: -19px;
+      font-weight: 400;
+      font-size: 26px;
+      line-height: 1;
+      opacity: 0;
+      transition: left .14s ease-out;
+      content: "▸";
+  }
+
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &.active {
+    color: #0c8cec;
+    text-decoration: underline;
+
+    &::before {
+      left: -17px;
+      opacity: 1;
+  }
+  }
+}
+
+.snow-toc {
+  transition: padding 0.2s ease-out, opacity 0.2s ease-in-out;
+
+  // -----------
+  //  Components
+  // -----------
+
+  &-contents {
+    margin: 0;
+    padding: 0;
+    line-height: 1.8;
+    list-style: none;
+  }
+
+  &-link {
+    @extend %toc-link;
+  }
+
+  &-section {
+    + .snow-toc-section {
+      margin-top: 1.5rem;
+    }
+
+    &-header {
+      margin-top: 0;
+      margin-bottom: 8px;
+      color: rgba($white, 0.6);
+      font-weight: 600;
+      font-size: 20px;
+      font-family: $heading;
+      line-height: 1.2em;
+
+      @media (min-width: $breakpoint-m) {
+        color: $dark-grey;
+      }
+    }
+
+    &-items {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+
+  // ----------
+  //  Modifiers
+  // ----------
+
+  &__subnav {
+    position: static;
+    z-index: 1;
+    padding-top: 2rem;
+    
+    .snow-toc-section-header {
+      color: $dark-grey;
+    }
+
+    hr {
+      display: block;
+      height: 1px;
+      margin: 1rem 0;
+      background-color: $light-grey;
+      border: none;
+      appearance: none;
+    }
+
+    ol {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      line-height: 1.8;
+    }
+
+    a {
+      @extend %toc-link;
+
+      color: $grey;
+    }
+  }
+}
diff --git a/examples/snowpack/public/css/components/_view.scss b/examples/snowpack/public/css/components/_view.scss
new file mode 100644
index 000000000..a18509054
--- /dev/null
+++ b/examples/snowpack/public/css/components/_view.scss
@@ -0,0 +1,152 @@
+@use '../var' as *;
+
+/**
+ * Main document view
+ */
+
+$top-padding: 24px;
+
+// Document view
+.snow-view__docs {
+  grid-gap: 1.5rem;
+  grid-template-areas: 'subnav' 'main';
+  grid-template-columns: auto;
+
+  @media (min-width: $breakpoint-m) {
+    display: grid;
+    grid-template-areas:
+      'nav subnav'
+      'nav main';
+    grid-template-columns: 16rem minmax(auto, $breakpoint-m);
+  }
+
+  @media (min-width: $breakpoint-l) {
+    display: grid;
+    grid-template-areas: 'nav main subnav';
+    grid-template-columns: 16rem auto 20rem;
+  }
+
+  &.is-home {
+    margin-top: 1.5rem;
+    margin-bottom: 3rem;
+
+    .snow-view-nav {
+      padding-top: 1.5rem;
+      @media (min-width: $breakpoint-m) {
+        position: static;
+        max-height: inherit;
+      }
+    }
+  }
+  &.is-full {
+    .snow-view-main {
+      grid-row-start: main;
+      grid-row-end: main;
+      grid-column-start: main;
+      grid-column-end: subnav;
+    }
+  }
+
+  &.has-subnav {
+    .snow-view-main .content-title {
+      display: block;
+      @media (max-width: $breakpoint-l) {
+        display: none;
+      }
+    }
+  }
+
+  .content-body {
+    h2,
+    h3 {
+      margin-top: -50px;
+      padding-top: 80px;
+      margin-bottom: 20px;
+    }
+  }
+
+  // -----------
+  //  Components
+  // -----------
+
+  .snow-view-nav {
+    position: fixed;
+    top: $nav-height * 2;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: map-get($map: $layers, $key: 'nav-view');
+    display: none;
+    grid-area: nav;
+    width: 100%;
+    padding: 1rem 1.5rem;
+    overflow: auto;
+    color: $white;
+    background: $dark-blue;
+
+    body.is-nav-open & {
+      display: block;
+    }
+  }
+
+  .snow-view-main {
+    grid-area: main;
+    min-width: 0;
+    padding: $top-padding 0 $top-padding 0;
+  }
+
+  .snow-view-subnav {
+    grid-area: subnav;
+    padding: 90px 0 $top-padding 0;
+    overflow: auto;
+
+    @media (max-width: $breakpoint-l) {
+      padding-top: $top-padding;
+    }
+
+    .content-title {
+      display: none;
+      @media (max-width: $breakpoint-l) {
+        display: block;
+      }
+    }
+  }
+
+  .snow-view-nav {
+    @media (min-width: $breakpoint-m) {
+      position: sticky;
+      top: $nav-height;
+      z-index: 1;
+      display: block;
+      max-height: calc(100vh - #{$nav-height});
+      color: inherit;
+      background: none;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    @media (max-width: $breakpoint-m - 1) {
+      padding-bottom: 2rem;
+
+      &.is-mobile-hidden {
+        overflow: hidden;
+      }
+      &.is-mobile-hidden .snow-toc {
+        padding-top: 0.5rem;
+        opacity: 0;
+      }
+    }
+  }
+
+  .snow-view-subnav {
+    @media (min-width: $breakpoint-l) {
+      position: sticky;
+      top: $nav-height;
+      z-index: 1;
+      display: block;
+      max-height: calc(100vh - #{$nav-height});
+      color: inherit;
+      background: none;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}