summaryrefslogtreecommitdiff
path: root/examples/snowpack/src
diff options
context:
space:
mode:
Diffstat (limited to 'examples/snowpack/src')
-rw-r--r--examples/snowpack/src/components/Banner.astro16
-rw-r--r--examples/snowpack/src/components/BaseHead.astro2
-rw-r--r--examples/snowpack/src/components/BaseLayout.astro3
-rw-r--r--examples/snowpack/src/components/Button.astro56
-rw-r--r--examples/snowpack/src/components/Hero.astro43
-rw-r--r--examples/snowpack/src/components/MainLayout.astro2
-rw-r--r--examples/snowpack/src/components/Menu.astro45
-rw-r--r--examples/snowpack/src/components/Nav.astro99
-rw-r--r--examples/snowpack/src/components/PokemonLookup.astro10
-rw-r--r--examples/snowpack/src/components/Subnav.astro5
-rw-r--r--examples/snowpack/src/layouts/content-with-cover.astro4
-rw-r--r--examples/snowpack/src/layouts/content.astro90
-rw-r--r--examples/snowpack/src/layouts/post.astro152
-rw-r--r--examples/snowpack/src/pages/index.astro202
14 files changed, 449 insertions, 280 deletions
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>
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-12 15:03:50 +0000