Improve Snowpack docs styling (#180)

author: Drew Powers <1369770+drwpow@users.noreply.github.com> 2021-05-07 10:38:38 -0600
committer: GitHub <noreply@github.com> 2021-05-07 10:38:38 -0600
commit: 820012ea16ed44de2293fda09edde14d32514098 (patch)
tree: 04f8782c606dd595e6c04b89d683e275275d7922
parent: 87ab4c6927abb9adaeb846687092e5dab78e2d7f (diff)
download: astro-820012ea16ed44de2293fda09edde14d32514098.tar.gz
astro-820012ea16ed44de2293fda09edde14d32514098.tar.zst
astro-820012ea16ed44de2293fda09edde14d32514098.zip
32 files changed, 597 insertions, 931 deletions
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index 668b374b3..c400b34e6 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -4,6 +4,6 @@ export let title = 'Jeanine White: Personal Site';
 
 <meta charset="UTF-8">
 <title>{title}</title>
-<link rel="stylesheet" type="text/css" href="/app.css">
+<link rel="stylesheet" type="text/css" href="/global.css">
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
diff --git a/examples/snowpack/public/css/_typography.scss b/examples/snowpack/public/css/_typography.scss
deleted file mode 100644
index 67b7d0d22..000000000
--- a/examples/snowpack/public/css/_typography.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@use './var' as *;
-
-.content {
-  a {
-    color: #0366d6;
-    text-decoration: none;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 600;
-    font-family: $heading;
-    line-height: 1.2;
-  }
-
-  h1 {
-    font-size: 3em;
-
-    @media (min-width: 600px) {
-      font-size: 3.25em;
-    }
-  }
-
-  h2 {
-    font-size: 2.75em;
-
-    @media (min-width: 600px) {
-      font-size: 3em;
-    }
-  }
-
-  h3 {
-    font-size: 2em;
-
-    @media (min-width: 600px) {
-      font-size: 2.25em;
-    }
-  }
-
-  h4 {
-    font-size: 1em;
-
-    @media (min-width: 600px) {
-      font-size: 1.2em;
-    }
-  }
-
-  ul li,
-  ol li {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    line-height: 1.6;
-  }
-
-  p {
-    margin-top: 1.5em;
-    margin-bottom: 1.5em;
-    line-height: 1.7;
-  }
-
-  blockquote {
-    margin: 0;
-    padding: 1rem 2rem;
-    color: #2e5e82;
-    font-weight: 300;
-    font-size: 1.1em;
-    background: linear-gradient(-30deg, #c9efd8, #f9ddff);
-    border-left: none;
-
-    @media (min-width: $breakpoint-m) {
-      border-radius: 0.5rem;
-      box-shadow: 0 1px 2px rgba(50, 127, 177, 0.1),
-        0 1.5rem 3rem rgba(50, 125, 177, 0.1);
-    }
-
-    & *:first-child {
-      margin-top: 0;
-    }
-    & *:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
diff --git a/examples/snowpack/public/css/app.scss b/examples/snowpack/public/css/app.scss
deleted file mode 100644
index c8aec8837..000000000
--- a/examples/snowpack/public/css/app.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// GitHub markdown styles
-@use './_github-markdown';
-
-// Syntax highlighting
-@use './_prism';
-
-// Global styles
-@use './_globals';
-
-// Typography
-@use './_typography';
-
-// Components
-@use './components/button';
-@use './components/card-grid';
-@use './components/container';
-@use './components/icon';
-@use './components/old';
-@use './components/view';
-
-// @import 'docsearch.js/dist/cdn/docsearch.min.css';
diff --git a/examples/snowpack/public/css/components/_button.scss b/examples/snowpack/public/css/components/_button.scss
deleted file mode 100644
index 8c865d0dd..000000000
--- a/examples/snowpack/public/css/components/_button.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@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
deleted file mode 100644
index 5b0d25da8..000000000
--- a/examples/snowpack/public/css/components/_card-grid.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.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;
-  }
-}
-
-.content-title {
-  font-family: 'Overpass';
-}
diff --git a/examples/snowpack/public/css/components/_container.scss b/examples/snowpack/public/css/components/_container.scss
deleted file mode 100644
index a009bad5a..000000000
--- a/examples/snowpack/public/css/components/_container.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  max-width: 1400px;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-}
diff --git a/examples/snowpack/public/css/components/_icon.scss b/examples/snowpack/public/css/components/_icon.scss
deleted file mode 100644
index ac08b9337..000000000
--- a/examples/snowpack/public/css/components/_icon.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * 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/_old.scss b/examples/snowpack/public/css/components/_old.scss
deleted file mode 100644
index a39d1a4b5..000000000
--- a/examples/snowpack/public/css/components/_old.scss
+++ /dev/null
@@ -1,247 +0,0 @@
-@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/_view.scss b/examples/snowpack/public/css/components/_view.scss
deleted file mode 100644
index a18509054..000000000
--- a/examples/snowpack/public/css/components/_view.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-@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;
-    }
-  }
-}
diff --git a/examples/snowpack/public/css/legacy-post.css b/examples/snowpack/public/css/legacy-post.css
deleted file mode 100644
index 1afbbcbb9..000000000
--- a/examples/snowpack/public/css/legacy-post.css
+++ /dev/null
@@ -1,18 +0,0 @@
-@charset "UTF-8";
-/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}.markdown-body .anchor{float:left;line-height:1;margin-left:-20px;padding-right:4px}.markdown-body .anchor:focus{outline:none}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#24292e;line-height:1.6;word-wrap:break-word}.markdown-body .pl-c{color:#6a737d}.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:#005cc5}.markdown-body .pl-e,.markdown-body .pl-en{color:#6f42c1}.markdown-body .pl-s .pl-s1,.markdown-body .pl-smi{color:#24292e}.markdown-body .pl-ent{color:#22863a}.markdown-body .pl-k{color:#d73a49}.markdown-body .pl-pds,.markdown-body .pl-s,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sra,.markdown-body .pl-sr .pl-sre{color:#032f62}.markdown-body .pl-smw,.markdown-body .pl-v{color:#e36209}.markdown-body .pl-bu{color:#b31d28}.markdown-body .pl-ii{background-color:#b31d28;color:#fafbfc}.markdown-body .pl-c2{background-color:#d73a49;color:#fafbfc}.markdown-body .pl-c2:before{content:"^M"}.markdown-body .pl-sr .pl-cce{color:#22863a;font-weight:700}.markdown-body .pl-ml{color:#735c0f}.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{color:#005cc5;font-weight:700}.markdown-body .pl-mi{color:#24292e;font-style:italic}.markdown-body .pl-mb{color:#24292e;font-weight:700}.markdown-body .pl-md{background-color:#ffeef0;color:#b31d28}.markdown-body .pl-mi1{background-color:#f0fff4;color:#22863a}.markdown-body .pl-mc{background-color:#ffebda;color:#e36209}.markdown-body .pl-mi2{background-color:#005cc5;color:#f6f8fa}.markdown-body .pl-mdr{color:#6f42c1;font-weight:700}.markdown-body .pl-ba{color:#586069}.markdown-body .pl-sg{color:#959da5}.markdown-body .pl-corl{color:#032f62;text-decoration:underline}.markdown-body details{display:block}.markdown-body summary{display:list-item}.markdown-body a{background-color:transparent}.markdown-body a:active,.markdown-body a:hover{outline-width:0}.markdown-body strong{font-weight:inherit;font-weight:bolder}.markdown-body h1{margin:.67em 0}.markdown-body img{border-style:none}.markdown-body hr{box-sizing:content-box;overflow:visible}.markdown-body input{font:inherit;margin:0;overflow:visible}.markdown-body [type=checkbox]{box-sizing:border-box;padding:0}.markdown-body *{box-sizing:border-box}.markdown-body input{font-family:inherit;font-size:inherit;line-height:inherit}.markdown-body a{color:#0366d6;text-decoration:none}.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:600}.markdown-body hr{background:transparent;border-bottom:1px solid #dfe2e5;height:0;margin:15px 0;overflow:hidden}.markdown-body hr:after,.markdown-body hr:before{content:"";display:table}.markdown-body hr:after{clear:both}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto}.markdown-body table td,.markdown-body table th{padding:6px 13px}.markdown-body table tr{background-color:#fff}.markdown-body table tr:nth-child(2n){background-color:#f6f8fa}.markdown-body details summary{cursor:pointer}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-bottom:0;margin-top:0}.markdown-body h1{font-size:32px}.markdown-body h1,.markdown-body h2{font-weight:600}.markdown-body h2{font-size:24px}.markdown-body h3{font-size:20px}.markdown-body h3,.markdown-body h4{font-weight:600}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:14px}.markdown-body h5,.markdown-body h6{font-weight:600}.markdown-body h6{font-size:12px}.markdown-body p{margin-bottom:10px;margin-top:0}.markdown-body blockquote{margin:0}.markdown-body ol,.markdown-body ul{margin-bottom:0;margin-top:0;padding-left:0}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body dd{margin-left:0}.markdown-body input::-webkit-inner-spin-button,.markdown-body input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.markdown-body .border{border:1px solid #e1e4e8!important}.markdown-body .border-0{border:0!important}.markdown-body .border-bottom{border-bottom:1px solid #e1e4e8!important}.markdown-body .rounded-1{border-radius:3px!important}.markdown-body .bg-white{background-color:#fff!important}.markdown-body .bg-gray-light{background-color:#fafbfc!important}.markdown-body .text-gray-light{color:#6a737d!important}.markdown-body .mb-0{margin-bottom:0!important}.markdown-body .my-2{margin-bottom:8px!important;margin-top:8px!important}.markdown-body .pl-0{padding-left:0!important}.markdown-body .py-0{padding-bottom:0!important;padding-top:0!important}.markdown-body .pl-1{padding-left:4px!important}.markdown-body .pl-2{padding-left:8px!important}.markdown-body .py-2{padding-bottom:8px!important;padding-top:8px!important}.markdown-body .pl-3,.markdown-body .px-3{padding-left:16px!important}.markdown-body .px-3{padding-right:16px!important}.markdown-body .pl-4{padding-left:24px!important}.markdown-body .pl-5{padding-left:32px!important}.markdown-body .pl-6{padding-left:40px!important}.markdown-body .f6{font-size:12px!important}.markdown-body .lh-condensed{line-height:1.25!important}.markdown-body .text-bold{font-weight:600!important}.markdown-body:after,.markdown-body:before{content:"";display:table}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body table,.markdown-body ul{margin-bottom:16px;margin-top:0}.markdown-body hr{background-color:#e1e4e8;border:0;height:.25em;margin:24px 0;padding:0}.markdown-body blockquote{border-left:.25em solid #dfe2e5;color:#6a737d;padding:0 1em}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body kbd{background-color:#fafbfc;border:1px solid #c6cbd1;border-bottom-color:#959da5;border-radius:3px;box-shadow:inset 0 -1px 0 #959da5;color:#444d56;display:inline-block;font-size:11px;line-height:10px;padding:3px 5px;vertical-align:middle}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:42px}.markdown-body h1{font-size:2em}.markdown-body h1,.markdown-body h2{padding-bottom:.3em}.markdown-body h1{font-size:4em;margin-bottom:0;padding-bottom:0}.markdown-body h2{font-size:2.6em}.markdown-body h3{font-size:1.8em}.markdown-body h4{font-size:1.12em}.markdown-body h5{font-size:.875em}.markdown-body h6{color:#6a737d;font-size:.85em}.markdown-body ol,.markdown-body ul{padding-left:2em}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-bottom:0;margin-top:0}.markdown-body li{word-wrap:break-all}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body img{background-color:#fff;box-sizing:content-box;max-width:100%}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body iframe{max-width:100%}code,pre{color:#d4d4d4;font-size:14px;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code::-moz-selection,pre::-moz-selection{text-shadow:none;background:#b3d4fc}code::selection,pre::selection{text-shadow:none;background:#b3d4fc}@media print{code,pre{text-shadow:none}}pre{padding:.8rem 1rem .9rem;margin:.5rem 0 16px;overflow:auto;background:#282a36;border-radius:4px}:not(pre)>code{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#f9f2f4}.namespace{opacity:.7}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6a9955}.token.punctuation{color:#d4d4d4}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#b5cea8}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#ce9178}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#d4d4d4;background:#2d3748}.token.atrule,.token.attr-value,.token.keyword{color:#c586c0}.token.function{color:#dcdcaa}.token.important,.token.regex,.token.variable{color:#d16969}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.constant{color:#9cdcfe}.token.class-name{color:#4ec9b0}.token.interpolation,.token.parameter{color:#9cdcfe}.token.boolean,.token.punctuation.interpolation-punctuation{color:#569cd6}.token.property{color:#9cdcfe}.token.selector{color:#d7ba7d}.token.tag{color:#569cd6}.token.attr-name{color:#9cdcfe}.token.attr-value{color:#ce9178}.token.entity{color:#4ec9b0;cursor:unset}.token.namespace,code[class*=language-javascript],pre[class*=language-javascript]{color:#4ec9b0}code[class*=language-css],pre[class*=language-css]{color:#ce9178}code[class*=language-html],pre[class*=language-html]{color:#d4d4d4}.language-html .token.punctuation{color:grey}pre>code,pre[data-line]{position:relative}pre>code{z-index:1}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#f7ebc6;box-shadow:inset 5px 0 0 #f7d87c;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}pre[class*=language-bash] .token.function{color:#d4d4d4}.token.comment{color:hsla(0,0%,100%,.46667)}.markdown-body,body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}*{position:relative;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}p{line-height:1.5}.header-logo,.header-snowpack,.header-snowpack-subtitle,.markdown-body h1,.markdown-body h2,.markdown-body h3,.pretty-font,.toc,.version-number{font-family:Overpass,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;font-family:inherit;font-size:100%;padding:.5em 1.5em;margin-bottom:1rem;text-decoration:none;border-radius:2px;color:#fff;font-size:22px;background:linear-gradient(45deg,#24bf62,#267dd6,#b224d0);font-family:Overpass,sans-serif;font-weight:700;box-shadow:0 1px 3px 0 #2e5e82;width:100%}img.company-logo{box-shadow:none!important;border:none!important;flex:100%;height:56px}.company-logos{display:flex;flex-wrap:wrap;margin-top:-4px;margin-bottom:24px}.company-logos>a{flex-shrink:0;text-decoration:none;color:#e74c3c;margin:0 4px;padding:10px;filter:grayscale(.1);opacity:.8}.company-logos>a:hover{text-decoration:underline;font-weight:400;filter:grayscale(0);opacity:1}.company-logos>.add-company-button,.company-logos>.add-star-button{display:flex;align-items:center;color:#555;font-weight:400;filter:grayscale(0);opacity:1}.company-logos>.add-company-button{border-color:#e74c3c;color:#e74c3c}.container{margin:auto}.github-button{display:none}.grid-body{overflow:hidden;padding-top:52px}@media (min-width:860px){.grid-body{background:#fff;flex-grow:1;min-width:0;overflow:auto;padding-top:0}}
-.grid-body-header{
-    background: #FFF3;
-    color: white;
-    text-align: center;
-    font-size: 18px;
-    padding: 3rem;
-}
-@media (max-width:860px){.grid-body-header{padding: 3rem 1rem;}}.grid-body-header a{color:#fff}.grid-body-header>svg{margin:auto;display:block;opacity:.9}
-
-.grid-extra-space{background: linear-gradient(45deg, #24bf62, #267dd6, #b224d0);
-    border-bottom: 1px solid #555;
-        padding: 3rem;
-    }
-    @media (max-width:860px){.grid-extra-space{padding:1rem 0;}}
-
-.grid-list ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));list-style:none;font-family:Overpass;font-size:18px;font-style:italic}.grid-nav{display:flex;align-items:center;justify-content:space-between;background:#457396;background:#2e5e82;padding:.5rem 1rem}@media (min-width:860px){.grid-nav{justify-content:left}}.grid-nav img,.grid-nav svg{height:24px;width:24px;display:inline-block;color:hsla(0,0%,100%,.73333)}.grid-nav svg:hover{color:#fff}.grid-nav a{color:#fff;text-decoration:none;line-height:1}.grid-nav .grid-nav-link{line-height:22px;height:22px;font-weight:700;color:#fff;margin:0 0 0 auto;text-transform:uppercase;color:hsla(0,0%,100%,.73333);border-bottom:2px solid hsla(0,0%,100%,.33333)}@media (min-width:860px){.grid-nav .grid-nav-link{margin:0 12px 0 0}}.grid-nav .grid-nav-link:hover{color:#fff;border-bottom:2px solid hsla(0,0%,100%,.53333)}.grid-nav a.version-number{font-size:22px;font-weight:700;line-height:1;color:#fff;margin:0 12px;color:hsla(0,0%,100%,.73333)}.grid-nav a.version-number:hover{color:#fff}.grid-nav .icon-link{height:24px;margin-left:8px}.grid-nav-container{position:fixed;top:0;z-index:100;width:100%}@media (min-width:860px){.grid-nav-container{position:-webkit-sticky;position:sticky}}.grid-toc{position:fixed;top:44px;left:0;right:0;bottom:0;width:100vw;padding:0;flex-shrink:0;flex-grow:0;overflow:auto;z-index:100}@media (min-width:860px){.grid-toc{position:-webkit-sticky;position:sticky;top:52px;width:360px;max-height:calc(100vh - 52px);overflow-y:scroll;-webkit-overflow-scrolling:touch}}.grid-toc-buttons{height:44px;flex-grow:1;background:#457396;background:#2e5e82;padding:.5rem}.grid-toc-buttons img,.grid-toc-buttons svg{height:28px;width:28px;padding:4px;display:inline-block;color:hsla(0,0%,100%,.73333)}.grid-toc-buttons svg:hover{color:#fff}.grid-toc-buttons img{filter:grayscale(90%)}.grid-toc-buttons img:hover{filter:none}.grid-toc-buttons a{float:right;color:#fff;text-decoration:none}.grid-toc-buttons .header-logo{float:left;display:flex;align-items:center;font-weight:700;font-size:22px;line-height:1}.grid-toc-buttons .header-logo svg{color:#fff;padding:0;margin-left:2px;margin-right:8px}.header-link{padding-left:2px}.header-logo{float:left;display:flex;align-items:center;font-weight:700;font-size:36px;line-height:1;margin:0 -20px 0 0}@media (min-width:860px){.header-logo{margin:0 20px 0 0}}.header-logo svg{color:#fff;padding:0;margin-left:2px;margin-right:8px;height:31px;width:31px}.header-snowpack{font-size:4rem;text-align:center;letter-spacing:-.045em;line-height:1;font-weight:900;margin:0 auto .75rem;opacity:.9}@media (min-width:860px){.header-snowpack{opacity:1}}.header-snowpack-subtitle{text-align:center;font-size:2.1rem;font-weight:700;line-height:1;letter-spacing:-1px;max-width:460px;margin:auto;opacity:.6}.highlight,.highlight-container{position:relative;font-weight:700}.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{display:block;background:#f0db4f;text-align:center}.img-banner img{height:74px;box-shadow:none;border:none}@media (min-width:860px){.img-banner img{height:100px}}.content,.markdown-body{padding:0 1em;margin-bottom:20vh;margin-left:auto;margin-right:auto;max-width:1000px}@media (min-width:860px){.content,.markdown-body{padding:0 3em}}.markdown-body h2 .header-link,.markdown-body h3 .header-link{margin-left:8px;opacity:1;transition:opacity .1s ease-in-out}@media (min-width:860px){.markdown-body h2 .header-link,.markdown-body h3 .header-link{opacity:0}}.markdown-body h2 code,.markdown-body h3 code,.markdown-body h4 code{font-size:inherit}.markdown-body h2{font-size:3em}.markdown-body h2,.markdown-body h3{margin-top:-12px;padding-top:60px}.markdown-body h3:hover .header-link{opacity:1}.markdown-body h4{margin-top:-36px;padding-top:60px;text-transform:uppercase;text-decoration:none;font-weight:700;letter-spacing:1px}.markdown-body iframe,.markdown-body img{box-shadow:0 5px 12px 0 #ccc;border:1px solid #aaa;border-radius:3px}.markdown-body pre{padding:2rem}.markdown-body ul{list-style:disc outside none;list-style:initial}.markdown-body h3 .markdown-body .markdown-body ul>li>ul{list-style:none;padding:.5rem 1rem .6rem;margin:.5rem 0;border-left:6px solid #2e5e82;background:rgba(37,138,214,.13333)}.toc{background:#2e5e82;min-height:100%;padding:1rem}@media (min-width:860px){.toc{padding:2rem 3rem .25rem}}.toc a{position:relative;text-decoration:none;color:hsla(0,0%,100%,.73333)}.toc a:before{content:"▸";position:absolute;opacity:0;left:-19px;top:-4px;font-weight:400;transition:left .14s ease-out}.toc a.active,.toc a:hover{text-decoration:underline}.toc a.active{color:#fff;font-weight:700}.toc a.active:before{opacity:1;left:-17px}.toc ol{list-style:none;line-height:1.8;margin-bottom:0}@media (min-width:860px){.toc ol{margin-bottom:3rem}}.toc>ol>li{font-weight:700;text-transform:uppercase;padding-bottom:3rem}@media (min-width:860px){.toc>ol>li{padding-bottom:0}}.toc>ol>li>a{color:#fff}.toc>ol>li>ol{padding:0 1em;font-weight:400;text-transform:none}#toc-logo{display:none}@media (min-width:860px){#toc-logo{display:inline-block}}#toc-drawer-button{display:inline-block;margin:0 auto 0 0}@media (min-width:860px){#toc-drawer-button{display:none;margin:0 12px 0 0}}.search-form{flex-grow:1}@media (max-width:859px){.hidden-mobile,.version-tag{display:none}}.language-diff .deleted-sign,.language-diff .inserted-sign .inserted{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.token.inserted{color:#b5cea8}.token.deleted{color:#ce9178}.markdown-body img.screenshot{box-shadow:none;border:none;border-radius:0}.markdown-body embed{background-color:#fff;box-sizing:content-box;max-width:100%;width:100%}.frame{background-color:#0a5e9d;padding:34px 17px 10px;border-radius:10px;position:relative;margin:1rem 0}.frame:before{content:url(/img/guides/react/buttons.svg)}.frame:after,.frame:before{display:block;position:absolute;top:5px}.frame:after{content:url(/img/guides/react/snowpack-logo-tiny.svg);right:17px}@media (min-width:600px){.guide .markdown-body{font-size:1.1em}}.guide .markdown-body blockquote,.guide .markdown-body ol,.guide .markdown-body p,.guide .markdown-body pre,.guide .markdown-body ul{margin-top:2em;margin-bottom:2em}.guide .markdown-body p{line-height:1.6}.guide .markdown-body ul{margin-top:2em;margin-bottom:2em}.guide .markdown-body li{margin-top:.5em;margin-bottom:.5em;line-height:1.6}.guide .markdown-body h2{font-size:2.5em;line-height:1.2}.guide .markdown-body blockquote{margin-left:-1rem;margin-right:-1rem;padding:1.5rem 1rem;color:#2e5e82;font-size:1.1em;font-weight:300;background:linear-gradient(-30deg,#c9efd8,#f9ddff);border-left:none}@media (min-width:860px){.guide .markdown-body blockquote{margin-left:-2rem;margin-right:-2rem;padding:2rem;border-radius:.5rem;box-shadow:0 1px 2px rgba(50,127,177,.1),0 1.5rem 3rem rgba(50,125,177,.1)}}.guide .markdown-body blockquote :first-child{margin-top:0}.guide .markdown-body blockquote :last-child{margin-bottom:0}.markdown-body iframe.twitter-share-button{box-shadow:none;border:0}.pluginPage-count{margin-bottom:1.5rem;color:rgba(0,0,0,.6);font-weight:300;font-size:1em;font-style:italic;text-align:center}@media (min-width:600px){.pluginPage-count{font-size:1.2em}}.pluginPage-intro{margin-top:1rem;margin-bottom:1rem;text-align:center;line-height:1.5}.pluginPage-intro a{color:#2e5e82}.pluginPage-search{display:flex;width:100%}.pluginPage-search-input{font-size:1em;box-sizing:border-box;padding:.25em .75em;flex-shrink:0;flex-grow:1;border-radius:4px 0 0 4px;border-width:1px 0 1px 1px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 2px rgba(46,94,130,0);transition:box-shadow .15s linear}.pluginPage-search-input:focus{border-color:#2e5e82;box-shadow:0 0 0 2px #2e5e82;outline:none}.pluginPage-search-input:focus+.pluginPage-search-submit{box-shadow:0 0 0 2px #2e5e82}.pluginPage-search-submit{padding:.5em 1em;color:#fff;font-weight:700;font-size:1em;font-family:Overpass,sans-serif;background-color:#2e5e82;border-radius:0 4px 4px 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:0 0 0 2px rgba(46,94,130,0);transition:box-shadow .15s linear}.pluginPage-subheading{margin-top:2rem;margin-bottom:1.5rem;color:#2e5e82;font-size:1em;font-family:Overpass,sans-serif;letter-spacing:-.02em;text-align:center}@media (min-width:600px){.pluginPage-subheading{font-size:1.3em}}.pluginPage-zero-heading{margin-top:1.5rem;margin-bottom:1.5rem;font-weight:700;font-size:1.4em;text-align:center}@media (min-width:600px){.pluginPage-zero-heading{font-size:1.5em}}
-\ No newline at end of file
diff --git a/examples/snowpack/public/css/_animations.scss b/examples/snowpack/public/styles/_animations.scss
index 182f88ec4..f3b03abaf 100644
--- a/examples/snowpack/public/css/_animations.scss
+++ b/examples/snowpack/public/styles/_animations.scss
@@ -13,15 +13,6 @@ $transition-fast: 40ms;
 $transition-medium: 500ms;
 $transition-slow: 1s;
 
-@mixin animation-hover-pop {
-  transition: transform $transition-fast $easeInExpo,
-    box-shadow $transition-fast linear;
-  &:hover {
-    box-shadow: 0 2px 2px 0 #2e5e82aa;
-    transform: translateY(-1px);
-  }
-}
-
 @keyframes pulse {
   0% {
     color: #2a85ca;
diff --git a/examples/snowpack/public/css/_github-markdown.scss b/examples/snowpack/public/styles/_github-markdown.scss
index a5d45be5b..a5d45be5b 100644
--- a/examples/snowpack/public/css/_github-markdown.scss
+++ b/examples/snowpack/public/styles/_github-markdown.scss
diff --git a/examples/snowpack/public/css/_globals.scss b/examples/snowpack/public/styles/_globals.scss
index 2843a427a..2f9482a93 100644
--- a/examples/snowpack/public/css/_globals.scss
+++ b/examples/snowpack/public/styles/_globals.scss
@@ -1,5 +1,9 @@
 @use './var' as *;
 
+body {
+  min-height: 100vh;
+}
+
 html,
 body {
   margin: 0;
@@ -10,13 +14,18 @@ body {
   box-sizing: border-box;
 }
 
-img {
+img,
+video {
   max-width: 100%;
   height: auto;
 }
 
 p {
-  line-height: 1.25;
+  line-height: 1.3;
+}
+
+pre {
+  max-width: calc(100vw - 4rem);
 }
 
 .pretty-font,
@@ -24,3 +33,8 @@ p {
   font-weight: 600;
   font-family: $heading;
 }
+
+body.is-nav-open {
+  height: 100%;
+  overflow: hidden;
+}
diff --git a/examples/snowpack/public/css/_prism.scss b/examples/snowpack/public/styles/_prism.scss
index 29a3cf5d8..29a3cf5d8 100644
--- a/examples/snowpack/public/css/_prism.scss
+++ b/examples/snowpack/public/styles/_prism.scss
diff --git a/examples/snowpack/public/styles/_typography.scss b/examples/snowpack/public/styles/_typography.scss
new file mode 100644
index 000000000..5874b6fdd
--- /dev/null
+++ b/examples/snowpack/public/styles/_typography.scss
@@ -0,0 +1,89 @@
+@use './var' as *;
+
+a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  font-family: $heading;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: 3em;
+  letter-spacing: -0.025em;
+
+  @media (min-width: 600px) {
+    font-size: 3.25em;
+  }
+}
+
+h2 {
+  font-size: 2.75em;
+  letter-spacing: -0.02em;
+
+  @media (min-width: 600px) {
+    font-size: 3em;
+  }
+}
+
+h3 {
+  font-size: 2em;
+  letter-spacing: -0.0125em;
+
+  @media (min-width: 600px) {
+    font-size: 2.25em;
+  }
+}
+
+h4 {
+  font-size: 1em;
+  letter-spacing: -0.0125em;
+
+  @media (min-width: 600px) {
+    font-size: 1.2em;
+  }
+}
+
+ul li,
+ol li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.6;
+}
+
+p {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  line-height: 1.7;
+}
+
+blockquote {
+  margin: 0;
+  padding: 1rem 2rem;
+  color: #2e5e82;
+  font-weight: 300;
+  font-size: 1.1em;
+  background: linear-gradient(-30deg, #c9efd8, #f9ddff);
+  border-left: none;
+
+  @media (min-width: $breakpoint-m) {
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px rgba(50, 127, 177, 0.1),
+      0 1.5rem 3rem rgba(50, 125, 177, 0.1);
+  }
+
+  & *:first-child {
+    margin-top: 0;
+  }
+  & *:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/examples/snowpack/public/styles/_utils.scss b/examples/snowpack/public/styles/_utils.scss
new file mode 100644
index 000000000..d61627ddb
--- /dev/null
+++ b/examples/snowpack/public/styles/_utils.scss
@@ -0,0 +1,35 @@
+/**
+ * Utils
+ */
+
+// margin & padding
+@for $i from 0 through 36 {
+  .ma#{$i} { margin: #{0.5 * $i}rem; }
+  .mt#{$i} { margin-top: #{0.5 * $i}rem; }
+  .mr#{$i} { margin-right: #{0.5 * $i}rem; }
+  .mb#{$i} { margin-bottom: #{0.5 * $i}rem; }
+  .ml#{$i} { margin-left: #{0.5 * $i}rem; }
+  .pa#{$i} { padding: #{0.5 * $i}rem; }
+  .pt#{$i} { padding-top: #{0.5 * $i}rem; }
+  .pr#{$i} { padding-right: #{0.5 * $i}rem; }
+  .pb#{$i} { padding-bottom: #{0.5 * $i}rem; }
+  .pl#{$i} { padding-left: #{0.5 * $i}rem; }
+}
+
+// text align
+.tac { text-align: center; }
+.tal { text-align: left; }
+.tar { text-align: right; }
+
+// wrapper
+.wrapper {
+  max-width: 80em;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.wrapper__readable {
+  max-width: 55em;
+}
+\ No newline at end of file
diff --git a/examples/snowpack/public/css/_var.scss b/examples/snowpack/public/styles/_var.scss
index 9cac21ecd..a73083bf1 100644
--- a/examples/snowpack/public/css/_var.scss
+++ b/examples/snowpack/public/styles/_var.scss
@@ -9,7 +9,8 @@ $breakpoint-m: 800px;
 $breakpoint-l: 1240px;
 
 // nav bar height mobile
-$nav-height: 56px;
+$nav-height: 3.5rem;
+$algolia-height: 4rem;
 
 // colors
 $blue: #0a5e9d;
diff --git a/examples/snowpack/public/styles/global.scss b/examples/snowpack/public/styles/global.scss
new file mode 100644
index 000000000..350460f52
--- /dev/null
+++ b/examples/snowpack/public/styles/global.scss
@@ -0,0 +1,5 @@
+@use './_github-markdown';
+@use './_prism';
+@use './_globals';
+@use './_typography';
+@use './utils';
diff --git a/examples/snowpack/src/components/Banner.astro b/examples/snowpack/src/components/Banner.astro
index 565027678..3b08c117f 100644
--- a/examples/snowpack/src/components/Banner.astro
+++ b/examples/snowpack/src/components/Banner.astro
@@ -1,6 +1,20 @@
+<style lang="scss">
+.notification {
+  padding: .5rem;
+  color: #fff;
+  font-weight: bold;
+  background-color: #b224d0;
+  text-align: center;
+
+  a {
+    color: white;
+  }
+}
+</style>
+
 <section class="grid-banner">
   <div class="notification">
-    <div class="container">
+    <div class="wrapper">
       Snowpack 3.0 is out now!
       <a href="/posts/2021-01-13-snowpack-3-0">
         Read the announcement post →
diff --git a/examples/snowpack/src/components/BaseHead.astro b/examples/snowpack/src/components/BaseHead.astro
index a96fc7327..b74c0fa25 100644
--- a/examples/snowpack/src/components/BaseHead.astro
+++ b/examples/snowpack/src/components/BaseHead.astro
@@ -34,5 +34,5 @@ export let permalink: string;
 <meta property="twitter:image" content="https://www.snowpack.dev/img/social-2.jpg" />
 
 <!-- Global Stylesheets -->
-<link rel="stylesheet" href="/css/app.css" />
+<link rel="stylesheet" href="/styles/global.css" />
 <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700;900&display=swap" rel="stylesheet" />
diff --git a/examples/snowpack/src/components/BaseLayout.astro b/examples/snowpack/src/components/BaseLayout.astro
index 040739515..c10859789 100644
--- a/examples/snowpack/src/components/BaseLayout.astro
+++ b/examples/snowpack/src/components/BaseLayout.astro
@@ -3,7 +3,6 @@ import Banner from './Banner.astro';
 import Nav from './Nav.astro';
 ---
 
-<Banner />
 <Nav />
 
 <slot></slot>
@@ -17,4 +16,4 @@ import Nav from './Nav.astro';
   }
   gtag('js', new Date());
   gtag('config', 'UA-130280175-9', { page_path: location.pathname === '/' ? (location.pathname + location.hash) : (location.pathname) });
-</script>
-\ No newline at end of file
+</script>
diff --git a/examples/snowpack/src/components/Button.astro b/examples/snowpack/src/components/Button.astro
new file mode 100644
index 000000000..00e14f01b
--- /dev/null
+++ b/examples/snowpack/src/components/Button.astro
@@ -0,0 +1,56 @@
+---
+export let style;
+---
+
+<style lang="scss">
+@use '../../public/styles/var' as *;
+
+.btn {
+  box-sizing: border-box;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  display: inline-block;
+  padding: 0.6em 1em 0.4em;
+  line-height: 1;
+  font-weight: bold;
+  font-size: 1.3em;
+  font-family: inherit;
+  letter-spacing: -0.025em;
+  font-family: 'Overpass', sans-serif;
+  white-space: nowrap;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  background-color: #fefefe;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0);
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+  transition: transform 100ms cubic-bezier(0.7, 0, 0.84, 0), box-shadow 100ms linear, border-color 40ms linear;
+
+  &:hover,
+  &:focus {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    border-color: #bbb;
+    transform: translateY(-1px);
+  }
+
+  &:focus {
+    border-color: #00f;
+  }
+
+  &__primary {
+    color: #fff;
+    background: linear-gradient(45deg, $rainbow-green, $rainbow-blue, $rainbow-purple);
+    border-color: $rainbow-blue;
+
+    &:hover {
+      border-color: $rainbow-blue;
+    }
+  }
+}
+</style>
+
+<span class={`btn${style ? ` btn__${style}`: ''}`}><slot /></span>
diff --git a/examples/snowpack/src/components/Hero.astro b/examples/snowpack/src/components/Hero.astro
index 441f30f12..e0feb35f8 100644
--- a/examples/snowpack/src/components/Hero.astro
+++ b/examples/snowpack/src/components/Hero.astro
@@ -1,14 +1,17 @@
+---
+import Button from './Button.astro';
+---
+
 <style lang="scss">
-  @use '../../public/css/var' as *;
-  @use '../../public/css/animations' as *;
+  @use '../../public/styles/var' as *;
+  @use '../../public/styles/animations' as *;
 
   .hero {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 50vh;
-    min-height: 20rem;
-    max-height: 30rem;
+    max-height: 24rem;
     color: #111;
     line-height: 1.5;
     background: #2a85ca40;
@@ -21,6 +24,8 @@
 
     @media (min-width: $breakpoint-l) {
       margin: 0;
+      min-height: 24rem;
+      max-height: 30rem;
     }
 
     a {
@@ -84,10 +89,10 @@
     margin: 0 auto 0.75rem;
     font-weight: 900;
     font-size: 3.5rem;
-    font-weight: 700;
+    font-weight: 900;
     font-family: $heading;
     line-height: 1;
-    letter-spacing: -0.045em;
+    letter-spacing: -0.07em;
     text-align: center;
     opacity: 0.9;
 
@@ -105,7 +110,7 @@
     font-family: $heading;
     font-size: 2rem;
     line-height: 1;
-    letter-spacing: -1px;
+    letter-spacing: -0.05em;
     text-align: center;
 
     @media (min-width: $breakpoint-m) {
@@ -114,17 +119,15 @@
   }
 
   .copy-button {
-    display: flex;
+    display: none;
     flex: none;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     min-width: 292px;
-    padding: 0.75rem 1.25rem;
-    padding-bottom: 0.75rem;
+    padding: 0.5em 1em;
     font-size: 100%;
-    font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
-      Liberation Mono, Courier New, monospace;
+    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;
@@ -132,22 +135,16 @@
     cursor: pointer;
     @include animation-copy-button;
 
+    @media (min-width: $breakpoint-m) {
+      display: flex;
+    }
+
     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;
-    }
-  }
 </style>
 
 <div class="hero">
@@ -156,7 +153,7 @@
     <p class="header-snowpack-subtitle">The faster frontend build tool.</p>
 
     <div class="hero-cta">
-      <a href="/tutorials/quick-start" class="button button-primary">Get started</a>
+      <a href="/tutorials/quick-start"><Button style="primary">Get started</Button></a>
       <div style="margin: 0.5rem"></div>
       <button id="copy-button" class="copy-button hidden-mobile" data-clipboard-text="npm install snowpack">
         <span class="faded" style="margin-right: 0.75rem;">$</span>
diff --git a/examples/snowpack/src/components/MainLayout.astro b/examples/snowpack/src/components/MainLayout.astro
index c9ce65f08..19ed5ec60 100644
--- a/examples/snowpack/src/components/MainLayout.astro
+++ b/examples/snowpack/src/components/MainLayout.astro
@@ -4,7 +4,7 @@ import Menu from './Menu.astro';
 ---
 
 <BaseLayout>
-  <div class="container">
+  <div class="wrapper">
     <section class="snow-view__docs is-full">
 
       <aside id="nav-primary" class="snow-view-nav">
diff --git a/examples/snowpack/src/components/Menu.astro b/examples/snowpack/src/components/Menu.astro
index 120a8af86..c43df5732 100644
--- a/examples/snowpack/src/components/Menu.astro
+++ b/examples/snowpack/src/components/Menu.astro
@@ -1,15 +1,45 @@
 <style lang="scss">
-  @use '../../public/css/var' as *;
-
-  .toc {
+  @use '../../public/styles/var' as *;
+
+  .nav {
+    display: none;
+    position: fixed;
+    top: $nav-height;
+    left: 0;
+    width: 100%;
+    padding-top: $algolia-height;
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    overflow-y: scroll;
+    background: $dark-blue;
     transition: padding 0.2s ease-out, opacity 0.2s ease-in-out;
+    z-index: map-get($map: $layers, $key: 'nav');
+
+    @media (min-width: $breakpoint-m) {
+      display: block;
+      position: static;
+      padding-top: 0;
+      padding-right: 0;
+      padding-left: 0;
+      background: none;
+    }
+
+    :global(body.is-nav-open) & {
+      display: block;
+    }
   }
 
   .contents {
     margin: 0;
-    padding: 0;
+    height: calc(100vh - #{$nav-height + $algolia-height});
+    overflow-y: scroll;
+    padding: 0 0 2rem;
     line-height: 1.8;
     list-style: none;
+
+    @media (min-width: $breakpoint-m) {
+      overflow: auto;
+    }
   }
 
   .section {
@@ -19,13 +49,14 @@
   }
 
   .header {
+    display: block;
     margin-top: 0;
-    margin-bottom: 8px;
+    margin-bottom: 0.75rem;
     color: rgba($white, 0.6);
     font-weight: 600;
     font-size: 20px;
     font-family: $heading;
-    line-height: 1.2em;
+    line-height: 1.2;
 
     @media (min-width: $breakpoint-m) {
       color: $dark-grey;
@@ -79,7 +110,7 @@
   }
 </style>
 
-<nav class="toc">
+<nav class="nav">
   <ol class="contents">
     <li class="section">
       <span class="header">Concepts</span>
diff --git a/examples/snowpack/src/components/Nav.astro b/examples/snowpack/src/components/Nav.astro
index 0c97dd425..5305eaa78 100644
--- a/examples/snowpack/src/components/Nav.astro
+++ b/examples/snowpack/src/components/Nav.astro
@@ -3,17 +3,12 @@ export let version: string = '3.1.2';
 ---
 
 <style lang="scss">
-  @use '../../public/css/var' as *;
-
-  /**
-   * Top nav
-   * The thing at the top
-   */
+  @use '../../public/styles/var' as *;
 
   .nav {
     position: sticky;
     top: 0;
-    z-index: map-get($map: $layers, $key: 'nav');
+    z-index: map-get($map: $layers, $key: 'nav') + 1;
     display: grid;
     grid-template-areas:
       'mobile logo version'
@@ -27,17 +22,19 @@ export let version: string = '3.1.2';
     color: $white;
     background-color: $dark-blue;
 
-    :global(body.is-nav-open) & {
-      height: $nav-height * 2;
-    }
-
     @media (min-width: $breakpoint-m) {
       display: flex;
       height: $nav-height;
-      padding-left: 0;
+      padding-right: 0;
     }
   }
 
+  .hamburger {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+  }
+
   .link {
     display: inline-block;
     padding: 0.5em;
@@ -113,12 +110,16 @@ export let version: string = '3.1.2';
   }
 
   .search {
+    display: none;
+    background: $dark-blue;
     position: relative;
     z-index: 1000;
-    display: flex;
     flex-grow: 1;
     grid-area: search;
-    margin: 0 6px;
+    max-width: calc(100vw - 1.25rem);
+    padding-left: 0.75rem;
+    padding-right: 0.7rem;
+
     > * {
       flex-grow: 1;
     }
@@ -127,30 +128,34 @@ export let version: string = '3.1.2';
       width: 100%;
     }
 
-    @media (min-width: $breakpoint-m) {
-      max-width: 600px;
+    :global(body.is-nav-open) & {
+      display: flex;
     }
 
-    @media (max-width: $breakpoint-m - 1) {
-      & {
-        display: none;
-      }
-      body.is-nav-open & {
-        display: flex;
-      }
+    @media (min-width: $breakpoint-m) {
+      display: flex;
+      width: 600px;
+      max-width: 600px;
+      margin-right: auto;
     }
+  }
 
-    & .sr-only {
-      display: none;
-    }
+  .sr-only {
+    position: absolute;
+    right: 1000px;
   }
 
   .search-hint {
     position: absolute;
     top: 0;
-    right: 0;
+    right: 0.75rem;
     display: none;
-    padding: 6px 12px;
+    height: 100%;
+    width: 3.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    letter-spacing: 0.125em;
     color: #c2ced9;
     font-size: 16px;
     pointer-events: none;
@@ -163,14 +168,14 @@ export let version: string = '3.1.2';
       display: inline-block;
       width: 1px;
       height: 1.5em;
-      margin-right: 0.5em;
+      margin-right: 0.625em;
       vertical-align: -35%;
       background-color: rgba($white, 0.25);
       content: '';
     }
 
     @media (min-width: $breakpoint-m) {
-      display: block;
+      display: flex;
     }
   }
 
@@ -235,19 +240,25 @@ export let version: string = '3.1.2';
         display: inline-block;
         width: 1px;
         height: 1.5em;
-        margin-left: 0.5em;
+        margin-left: 1em;
         vertical-align: -25%;
         background-color: rgba($white, 0.25);
         content: '';
       }
     }
   }
+
+  .social {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+  }
 </style>
 
 <nav class="nav">
   <button id="toc-drawer-button" class="mobile-open" type="button" aria-expanded="false"
     aria-controls="nav-primary">
-    <svg focusable="false" class="snow-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
+    <svg focusable="false" class="hamburger" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
       <title>Toggle mobile menu</title>
       <path
         d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
@@ -276,34 +287,18 @@ export let version: string = '3.1.2';
       <span class="sr-only"> to search</span>
     </span>
   </div>
-  <div style="flex-grow: 1"></div>
+
   <a href="https://github.com/snowpackjs/snowpack/releases" target="_blank" class="link version">
     {`v${version}`}
   </a>
   <a href="https://github.com/snowpackjs/snowpack" target="_blank" class="link link__desktop">
-    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="snow-icon" role="img"
-      xmlns="http://www.w3.org/2000/svg" viewbox="0 0 496 512">
-      <path fill="currentColor"
-        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
-      </path>
-    </svg>
+    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="social" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
   </a>
   <a href="https://twitter.com/snowpackjs" target="_blank" class="link link__desktop">
-    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="snow-icon" role="img"
-      xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
-      <path fill="currentColor"
-        d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
-      </path>
-    </svg>
+    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="social" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
   </a>
   <a href="https://discord.gg/snowpack" target="_blank" class="link link__desktop">
-    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="snow-icon" role="img"
-      xmlns="http://www.w3.org/2000/svg" viewbox="0 0 210 240">
-      <path
-        d="M84.79 90.45c-6.45 0-11.55 5.66-11.55 12.57s5.21 12.57 11.55 12.57c6.45 0 11.55-5.66 11.55-12.57.11-6.91-5.09-12.57-11.55-12.57zm41.32 0c-6.45 0-11.55 5.66-11.55 12.57s5.21 12.57 11.55 12.57c6.45 0 11.55-5.66 11.55-12.57s-5.09-12.57-11.55-12.57z" />
-      <path fill="currentColor"
-        d="M185.4 0H24.6C11.04 0 0 11.04 0 24.72v162.24c0 13.68 11.04 24.72 24.6 24.72h136.08l-6.36-22.2 15.36 14.28 14.52 13.44L210 240V24.72C210 11.04 198.96 0 185.4 0zm-46.32 156.72s-4.32-5.16-7.92-9.72c15.72-4.44 21.72-14.28 21.72-14.28-4.92 3.24-9.6 5.52-13.8 7.08-6 2.52-11.76 4.2-17.4 5.16-11.52 2.16-22.08 1.56-31.08-.12-6.84-1.32-12.72-3.24-17.64-5.16-2.76-1.08-5.76-2.4-8.76-4.08-.36-.24-.72-.36-1.08-.6-.24-.12-.36-.24-.48-.36-2.16-1.2-3.36-2.04-3.36-2.04s5.76 9.6 21 14.16c-3.6 4.56-8.04 9.96-8.04 9.96-26.52-.84-36.6-18.24-36.6-18.24 0-38.64 17.28-69.96 17.28-69.96 17.28-12.96 33.72-12.6 33.72-12.6l1.2 1.44c-21.6 6.24-31.56 15.72-31.56 15.72s2.64-1.44 7.08-3.48c12.84-5.64 23.04-7.2 27.24-7.56.72-.12 1.32-.24 2.04-.24 7.32-.96 15.6-1.2 24.24-.24 11.4 1.32 23.64 4.68 36.12 11.52 0 0-9.48-9-29.88-15.24l1.68-1.92s16.44-.36 33.72 12.6c0 0 17.28 31.32 17.28 69.96 0 0-10.2 17.4-36.72 18.24z" />
-    </svg>
+    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="social" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 240"><path d="M84.79 90.45c-6.45 0-11.55 5.66-11.55 12.57s5.21 12.57 11.55 12.57c6.45 0 11.55-5.66 11.55-12.57.11-6.91-5.09-12.57-11.55-12.57zm41.32 0c-6.45 0-11.55 5.66-11.55 12.57s5.21 12.57 11.55 12.57c6.45 0 11.55-5.66 11.55-12.57s-5.09-12.57-11.55-12.57z"></path><path fill="currentColor" d="M185.4 0H24.6C11.04 0 0 11.04 0 24.72v162.24c0 13.68 11.04 24.72 24.6 24.72h136.08l-6.36-22.2 15.36 14.28 14.52 13.44L210 240V24.72C210 11.04 198.96 0 185.4 0zm-46.32 156.72s-4.32-5.16-7.92-9.72c15.72-4.44 21.72-14.28 21.72-14.28-4.92 3.24-9.6 5.52-13.8 7.08-6 2.52-11.76 4.2-17.4 5.16-11.52 2.16-22.08 1.56-31.08-.12-6.84-1.32-12.72-3.24-17.64-5.16-2.76-1.08-5.76-2.4-8.76-4.08-.36-.24-.72-.36-1.08-.6-.24-.12-.36-.24-.48-.36-2.16-1.2-3.36-2.04-3.36-2.04s5.76 9.6 21 14.16c-3.6 4.56-8.04 9.96-8.04 9.96-26.52-.84-36.6-18.24-36.6-18.24 0-38.64 17.28-69.96 17.28-69.96 17.28-12.96 33.72-12.6 33.72-12.6l1.2 1.44c-21.6 6.24-31.56 15.72-31.56 15.72s2.64-1.44 7.08-3.48c12.84-5.64 23.04-7.2 27.24-7.56.72-.12 1.32-.24 2.04-.24 7.32-.96 15.6-1.2 24.24-.24 11.4 1.32 23.64 4.68 36.12 11.52 0 0-9.48-9-29.88-15.24l1.68-1.92s16.44-.36 33.72 12.6c0 0 17.28 31.32 17.28 69.96 0 0-10.2 17.4-36.72 18.24z"></path></svg>
   </a>
 </nav>
 
diff --git a/examples/snowpack/src/components/PokemonLookup.astro b/examples/snowpack/src/components/PokemonLookup.astro
index 0de7713e3..b3866791e 100644
--- a/examples/snowpack/src/components/PokemonLookup.astro
+++ b/examples/snowpack/src/components/PokemonLookup.astro
@@ -6,11 +6,13 @@ const pokemonData = await pokemonDataReq.json();
 ---
 
 <style>
-.mb1 { margin-bottom: 1rem; }
+  .mb1 {
+    margin-bottom: 1rem;
+  }
 </style>
 
 <div class="notification mb1">
-    <div class="container">
-        Pokemon #{number} is: {pokemonData.name}
-    </div>
+  <div class="wrapper">
+    Pokemon #{number} is: {pokemonData.name}
+  </div>
 </div>
diff --git a/examples/snowpack/src/components/Subnav.astro b/examples/snowpack/src/components/Subnav.astro
index 69560cae1..1709235dc 100644
--- a/examples/snowpack/src/components/Subnav.astro
+++ b/examples/snowpack/src/components/Subnav.astro
@@ -5,7 +5,7 @@ export let headers: string;
 ---
 
 <style lang="scss">
-@use "../../public/css/var" as *;
+@use "../../public/styles/var" as *;
 
 .header {
   margin-top: 0;
@@ -14,7 +14,7 @@ export let headers: string;
   font-weight: 600;
   font-size: 20px;
   font-family: $heading;
-  line-height: 1.2em;
+  line-height: 1.2;
 
   @media (min-width: $breakpoint-m) {
     color: $dark-grey;
@@ -24,7 +24,6 @@ export let headers: string;
 .subnav {
   position: static;
   z-index: 1;
-  padding-top: 2rem;
 
   .header {
     color: $dark-grey;
diff --git a/examples/snowpack/src/layouts/content-with-cover.astro b/examples/snowpack/src/layouts/content-with-cover.astro
index 46006bdfb..0e91b406b 100644
--- a/examples/snowpack/src/layouts/content-with-cover.astro
+++ b/examples/snowpack/src/layouts/content-with-cover.astro
@@ -60,7 +60,7 @@ export let content: any;
       <img class="cover" src={content.cover} alt=""/>
     </div>
 
-    <div class="container">
+    <div class="wrapper">
       <section class="snow-view__docs has-subnav">
 
         <aside id="nav-primary" class="snow-view-nav">
@@ -86,4 +86,4 @@ export let content: any;
   </BaseLayout>
 </body>
 
-</html>
-\ No newline at end of file
+</html>
diff --git a/examples/snowpack/src/layouts/content.astro b/examples/snowpack/src/layouts/content.astro
index c8f9ca907..56832d551 100644
--- a/examples/snowpack/src/layouts/content.astro
+++ b/examples/snowpack/src/layouts/content.astro
@@ -12,20 +12,96 @@ export let content: any;
 
 <head>
   <BaseHead title={content.title} description={content.description} permalink="TODO" />
+  <style lang="scss">
+    @use "../../public/styles/var" as *;
+
+    $nav-height: 3.5rem; // height of top nav bar
+
+    $height: calc(100vh - #{$nav-height});
+
+    .layout {
+      display: grid;
+      grid-template-areas: "contents" "main";
+      grid-gap: 2rem;
+
+      @media (min-width: $breakpoint-m) {
+        grid-template-areas: "nav contents" "nav main";
+      }
+
+      @media (min-width: $breakpoint-l) {
+        grid-template-areas: "nav main contents";
+        grid-template-columns: 16rem auto 20rem;
+      }
+
+      // components
+      &-nav {
+        grid-area: nav;
+
+        @media (min-width: $breakpoint-m) {
+          position: sticky;
+          min-height: $height;
+          height: $height;
+          top: $nav-height;
+        }
+      }
+
+      &-main {
+        grid-area: main;
+      }
+
+      &-contents {
+        @media (min-width: $breakpoint-l) {
+          position: sticky;
+          min-height: $height;
+          height: $height;
+          top: $nav-height;
+        }
+      }
+    }
+
+    :global(h3) {
+      position: relative;
+    }
+
+    :global(.header-link) {
+      position: absolute;
+      top: 0;
+      right: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      font-size: 0.75em;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      color: $light-grey;
+      opacity: 0;
+      transition: opacity 100ms linear, color 100ms linear;
+    }
+
+    :global(.header-link:hover) {
+      color: $rainbow-blue;
+    }
+
+    :global(h3:hover .header-link) {
+      opacity: 1;
+    }
+  </style>
 </head>
 
 <body>
   <BaseLayout>
-    <div class="container">
-      <section class="snow-view__docs has-subnav">
-
-        <aside id="nav-primary" class="snow-view-nav">
+    <div class="wrapper">
+      <section class="layout">
+        <aside id="nav-primary" class="layout-nav pt4">
           <Menu />
         </aside>
 
-        <Subnav title={content.title} headers={content.headers} />
+        <div class="pt4">
+          <Subnav title={content.title} headers={content.headers} />
+        </div>
 
-        <article class="snow-view-main">
+        <article class="layout-main">
           <div class="content">
             <h2 class="content-title">
               {content.title}
@@ -43,4 +119,4 @@ export let content: any;
   </BaseLayout>
 </body>
 
-</html>
-\ No newline at end of file
+</html>
diff --git a/examples/snowpack/src/layouts/post.astro b/examples/snowpack/src/layouts/post.astro
index 05f28bf24..20dd4a287 100644
--- a/examples/snowpack/src/layouts/post.astro
+++ b/examples/snowpack/src/layouts/post.astro
@@ -10,112 +10,83 @@ export let content: any;
 <html>
 
 <head>
-  <style>
-    .markdown-body img,
-    .markdown-body video,
-    .markdown-body iframe {
-      box-shadow: 0px 5px 12px 0 #CCC;
-      border-radius: 3px;
-      min-width: 130%;
-      width: 130%;
-      margin-left: -15%;
-      margin-right: -15%;
-      margin-top: 4rem;
-      margin-bottom: -1rem;
-    }
-  
-    @media (max-width: 860px) {
-  
-      .markdown-body img,
-      .markdown-body video,
-      .markdown-body iframe {
-        min-width: 100%;
-        margin-left: 0;
-        margin-right: 0;
-        margin-bottom: -2rem;
+  <style lang="scss">
+    @use '../../public/styles/var' as *;
+
+    .hero {
+      background: linear-gradient(45deg, $rainbow-green, $rainbow-blue, $rainbow-purple);
+      color: white;
+      border-bottom: 1px solid #555;
+      padding: 3rem;
+
+      &-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 3rem;
+        background: rgba(white, 0.2);
       }
-    }
-  
-    .markdown-body table td:nth-child(1) {
-      white-space: nowrap;
-    }
-  
-    .markdown-body,
-    .fbody-header {
-      max-width: 840px;
-    }
-  
-    .markdown-body {
-      font-size: 18px;
-      margin-bottom: 20vh;
-    }
-  
-    .markdown-body h2 {
-      font-size: 1.8em;
-    }
-  
-    @media (max-width: 860px) {
-      .markdown-body,
-      .toc {
-        padding: 1em;
+
+      a {
+        color: white;
+        text-decoration: underline;
       }
     }
-  
-    @media (max-width: 740px) {
-      .markdown-body img,
-      .markdown-body iframe {
-        max-width: 108%;
-        margin-left: -4%;
-        margin-right: -4%;
-      }
-  
-      .grid-body {
-        padding: 20px 0 0 0;
-      }
+
+    .title {
+      font-weight: 900;
+      font-size: 4em;
+      line-height: 1.4;
+      margin: 0;
     }
-  
-    .header-snowpack {
-      font-size: 3.5rem;
-      text-align: center;
+
+    .tagline {
+      margin: 1rem 0;
+      font-weight: 400;
+      font-size: 1.25em;
     }
-  
-    .markdown-body h1 {
-      font-size: 3.5em;
+
+    .meta {
+      font-size: 1em;
+    }
+
+    .content :global(p) {
+      font-size: 1.2em;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      line-height: 1.7;
     }
-  
-    .markdown-body h3 .header-link {
-      opacity: 1;
+
+    .content :global(li) {
+      font-size: 1.2em;
+      line-height: 1.4;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
     }
   </style>
   <BaseHead title={content.title} description={content.description} permalink="TODO" />
-  <link rel="stylesheet" href="/css/legacy-post.css" />
 </head>
 
 <body>
   <BaseLayout>
-
-    <div class="grid-extra-space">
-      <div class="grid-body-header">
+    <header class="hero">
+      <div class="hero-inner">
         <svg height="80px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink">
-          <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
-            <g id="mountain-solid" transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
-              <path
-                d="M635.92,462.7 L347.92,14.7 C342.03,5.54 331.89,0 321,0 C310.11,0 299.97,5.54 294.08,14.7 L6.08,462.7 C-0.250773249,472.547007 -0.699487627,485.064987 4.91,495.34 C10.522069,505.612419 21.2945349,512 33,512 L609,512 C620.71,512 631.48,505.61 637.09,495.33 C642.699457,485.058495 642.250708,472.543372 635.92,462.7 Z M321,91.18 L406.39,224 L321,224 L257,288 L218.94,249.94 L321,91.18 Z"
-                id="Shape"></path>
-            </g>
+          <g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+            <g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero"><path d="M635.92,462.7 L347.92,14.7 C342.03,5.54 331.89,0 321,0 C310.11,0 299.97,5.54 294.08,14.7 L6.08,462.7 C-0.250773249,472.547007 -0.699487627,485.064987 4.91,495.34 C10.522069,505.612419 21.2945349,512 33,512 L609,512 C620.71,512 631.48,505.61 637.09,495.33 C642.699457,485.058495 642.250708,472.543372 635.92,462.7 Z M321,91.18 L406.39,224 L321,224 L257,288 L218.94,249.94 L321,91.18 Z"></path></g>
           </g>
         </svg>
-        <h1 class="header-snowpack">{content.title}</h1>
-
+        <h1 class="title">{content.title}</h1>
 
-        <div>
+        <h2 class="tagline">
           {content.tagline && <div style="margin-bottom: 1rem;">{content.tagline}</div>}
-          <div>
+          <small class="meta">
             Published <a href='#published-at'>{formatDate(parseISO(content.date), 'MMMM d, yyyy')}</a>
             by <a href="https://twitter.com/FredKSchott">Fred K. Schott</a>
-          </div>
-        </div>
+          </small>
+        </h2>
 
         <!-- Place this tag where you want the button to render. -->
         <div class="hidden-mobile" style="text-align: center; margin-top: 0.5rem; filter: scale(2);">
@@ -125,13 +96,14 @@ export let content: any;
         <!-- Place this tag in your head or just before your close body tag. -->
         <script defer src="https://buttons.github.io/buttons.js"></script>
       </div>
-    </div>
-    <div class="grid-body">
-      <article class="markdown-body">
+    </header>
+
+    <main class="wrapper wrapper__readable pt6 pb6">
+      <article class="content markdown-body">
         <slot></slot>
       </article>
-    </div>
+    </main>
   </BaseLayout>
 </body>
 
-</html>
-\ No newline at end of file
+</html>
diff --git a/examples/snowpack/src/pages/index.astro b/examples/snowpack/src/pages/index.astro
index aa5ee59b6..f2a8f7f26 100644
--- a/examples/snowpack/src/pages/index.astro
+++ b/examples/snowpack/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import Button from '../components/Button.astro';
 import Menu from '../components/Menu.astro';
 import Hero from '../components/Hero.astro';
 import BaseHead from '../components/BaseHead.astro';
@@ -12,12 +13,40 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
 <html>
 <head>
   <style lang="scss">
-    @use '../../public/css/var' as *;
+    @use '../../public/styles/var' as *;
+
+    .layout {
+      display: grid;
+      grid-template-areas: "main";
+
+      @media (min-width: $breakpoint-m) {
+        grid-template-areas: "nav main";
+        grid-template-columns: 16rem auto;
+      }
+
+      &-nav {
+        grid-area: nav;
+      }
+
+      &-main {
+        grid-area: main;
+      }
+    }
 
     .top {
       text-align: left;
     }
 
+    .img-banner {
+      background: #f0db4f;
+      display: block;
+      text-align: center;
+
+      img {
+        max-width: 32rem;
+      }
+    }
+
     .bullets {
       display: grid;
       grid-row-gap: 1em;
@@ -34,27 +63,30 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
     }
 
     .bullet {
-      display: list-item;
       padding: 0.25em;
       border-radius: 4px;
 
-      &::before {
-        display: block;
-        float: left;
-        margin-right: 6px;
-        color: green !important;
-        content: '✅';
+      h3 {
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: "✅";
+          font-size: 0.75em;
+          display: block;
+          margin-right: 0.5rem;
+        }
       }
     }
 
     .buttons {
       margin: 2em 0;
       text-align: center;
-    }
 
-    .feature-button {
-      display: inline-block;
-      margin: 0.5em;
+      > * {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+      }
     }
   </style>
   <BaseHead title={title} description={description} permalink="TODO" />
@@ -63,84 +95,80 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
 <body>
   <BaseLayout>
     <Hero bar="{title}" />
-    <div foo="{title}" class="container" style="margin: 0 auto">
-      <section class="snow-view__docs is-full is-home">
-        <aside id="nav-primary" class="snow-view-nav">
+    <div foo="{title}" class="wrapper" style="margin: 0 auto">
+      <section class="layout pt6 pb6">
+        <aside id="nav-primary" class="layout-nav">
           <Menu></Menu>
         </aside>
 
-        <article class="snow-view-main">
-          <div class="content">
-            <article class="grid-body">
-              <a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
-                rel="noopener noreferrer">
-                <img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
-              </a>
-
-              <div class="content markdown-body feature-list">
-                <div class={'t' + 'o' + 'p'}>
-                  <h2 id="what-is-snowpack%3F">What is Snowpack?</h2>
-                  <p>
-                    <strong>Snowpack is a lightning-fast frontend build tool, designed
-                      for the modern web.</strong>
-                    It is an alternative to heavier, more complex bundlers like
-                    webpack or Parcel in your development workflow. Snowpack
-                    leverages JavaScript's native module system (<a
-                      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
-                      as
-                      ESM</a>) to avoid unnecessary work and stay fast no matter how big
-                    your project grows.
-                  </p>
-                  <p>
-                    Once you try it, it's impossible to go back to anything else.
-                  </p>
-                </div>
-
-                <ul class="bullets">
-                  <li class="bullet">
-                    <h3 class="bullet-heading">Instant startup</h3>
-                    Snowpack's unbundled web development server
-                    <strong>starts up in 50ms or less</strong>
-                    and stays fast in large projects.
-                  </li>
-                  <li class="bullet">
-                    <h3 class="bullet-heading">Build once, cache forever</h3>
-                    Snowpack never builds the same file twice. Powered by
-                    JavaScript’s native module system (ESM) in the browser.
-                  </li>
-                  <li class="bullet">
-                    <h3 class="bullet-heading">HMR feat. Fast Refresh</h3>
-                    No refresh required. See changes reflected instantly in the
-                    browser with
-                    <a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
-                    for React, Preact & Svelte.
-                  </li>
-                  <li class="bullet">
-                    <h3 class="bullet-heading">Out-of-the-box support</h3>
-                    Enjoy Snowpack's built-in support for JSX, TypeScript, React,
-                    Preact, CSS Modules
-                    <a href="/reference/supported-files">and more.</a>
-                  </li>
-                  <li class="bullet">
-                    <h3 class="bullet-heading">Optimize for production</h3>
-                    Build for production with built-in optimizations and plugin
-                    support for your favorite bundlers.
-                  </li>
-                  <li class="bullet">
-                    <h3 class="bullet-heading">Plugins? Plugins!</h3>
-                    Babel? Sass? MDX? Browse the entire
-                    <a href="/plugins">Snowpack Plugin Catalog</a>
-                    to connect your favorite build tool (or
-                    <a href="/reference/plugins">create your own!</a>)
-                  </li>
-                </ul>
-
-                <div class="buttons">
-                  <a href="/tutorials/quick-start" class="button button-primary feature-button">Get started</a>
-                  <a href="/concepts/how-snowpack-works" class="button feature-button">Learn more</a>
-                </div>
-              </div>
-            </article>
+        <article class="layout-main">
+          <a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
+            rel="noopener noreferrer">
+            <img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
+          </a>
+
+          <div class="markdown-body feature-list">
+            <div class={'t' + 'o' + 'p'}>
+              <h2 id="what-is-snowpack%3F">What is Snowpack?</h2>
+              <p>
+                <strong>Snowpack is a lightning-fast frontend build tool, designed
+                  for the modern web.</strong>
+                It is an alternative to heavier, more complex bundlers like
+                webpack or Parcel in your development workflow. Snowpack
+                leverages JavaScript's native module system (<a
+                  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
+                  as
+                  ESM</a>) to avoid unnecessary work and stay fast no matter how big
+                your project grows.
+              </p>
+              <p>
+                Once you try it, it's impossible to go back to anything else.
+              </p>
+            </div>
+
+            <ul class="bullets">
+              <li class="bullet">
+                <h3 class="bullet-heading">Instant startup</h3>
+                Snowpack's unbundled web development server
+                <strong>starts up in 50ms or less</strong>
+                and stays fast in large projects.
+              </li>
+              <li class="bullet">
+                <h3 class="bullet-heading">Build once, cache forever</h3>
+                Snowpack never builds the same file twice. Powered by
+                JavaScript’s native module system (ESM) in the browser.
+              </li>
+              <li class="bullet">
+                <h3 class="bullet-heading">HMR feat. Fast Refresh</h3>
+                No refresh required. See changes reflected instantly in the
+                browser with
+                <a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
+                for React, Preact & Svelte.
+              </li>
+              <li class="bullet">
+                <h3 class="bullet-heading">Out-of-the-box support</h3>
+                Enjoy Snowpack's built-in support for JSX, TypeScript, React,
+                Preact, CSS Modules
+                <a href="/reference/supported-files">and more.</a>
+              </li>
+              <li class="bullet">
+                <h3 class="bullet-heading">Optimize for production</h3>
+                Build for production with built-in optimizations and plugin
+                support for your favorite bundlers.
+              </li>
+              <li class="bullet">
+                <h3 class="bullet-heading">Plugins? Plugins!</h3>
+                Babel? Sass? MDX? Browse the entire
+                <a href="/plugins">Snowpack Plugin Catalog</a>
+                to connect your favorite build tool (or
+                <a href="/reference/plugins">create your own!</a>)
+              </li>
+            </ul>
+
+            <div class="buttons">
+              <a href="/tutorials/quick-start"><Button style="primary">Get started</Button></a>
+              <a href="/concepts/how-snowpack-works"><Button>Learn more</Button></a>
+            </div>
           </div>
         </article>
       </section>
author	Drew Powers <1369770+drwpow@users.noreply.github.com>	2021-05-07 10:38:38 -0600
committer	GitHub <noreply@github.com>	2021-05-07 10:38:38 -0600
commit	820012ea16ed44de2293fda09edde14d32514098 (patch)
tree	04f8782c606dd595e6c04b89d683e275275d7922
parent	87ab4c6927abb9adaeb846687092e5dab78e2d7f (diff)
download	astro-820012ea16ed44de2293fda09edde14d32514098.tar.gz astro-820012ea16ed44de2293fda09edde14d32514098.tar.zst astro-820012ea16ed44de2293fda09edde14d32514098.zip