Improve Snowpack docs styling (#180)
This commit is contained in:
Drew Powers
GitHub
parent
87ab4c6927
commit
820012ea16
32 changed files with 593 additions and 927 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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';
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.container {
|
||||
max-width: 1400px;
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
89
examples/snowpack/public/styles/_typography.scss
Normal file
89
examples/snowpack/public/styles/_typography.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
35
examples/snowpack/public/styles/_utils.scss
Normal file
35
examples/snowpack/public/styles/_utils.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
5
examples/snowpack/public/styles/global.scss
Normal file
5
examples/snowpack/public/styles/global.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@use './_github-markdown';
|
||||
@use './_prism';
|
||||
@use './_globals';
|
||||
@use './_typography';
|
||||
@use './utils';
|
||||
|
|
@ -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 →
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import Banner from './Banner.astro';
|
|||
import Nav from './Nav.astro';
|
||||
---
|
||||
|
||||
<Banner />
|
||||
<Nav />
|
||||
|
||||
<slot></slot>
|
||||
|
|
|
|||
56
examples/snowpack/src/components/Button.astro
Normal file
56
examples/snowpack/src/components/Button.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,45 @@
|
|||
<style lang="scss">
|
||||
@use '../../public/css/var' as *;
|
||||
@use '../../public/styles/var' as *;
|
||||
|
||||
.toc {
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
||||
:global(body.is-nav-open) & {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
display: flex;
|
||||
width: 600px;
|
||||
max-width: 600px;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-m - 1) {
|
||||
& {
|
||||
display: none;
|
||||
}
|
||||
body.is-nav-open & {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
& .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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
<style lang="scss">
|
||||
@use '../../public/styles/var' as *;
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.hero {
|
||||
background: linear-gradient(45deg, $rainbow-green, $rainbow-blue, $rainbow-purple);
|
||||
color: white;
|
||||
border-bottom: 1px solid #555;
|
||||
padding: 3rem;
|
||||
|
||||
.markdown-body img,
|
||||
.markdown-body video,
|
||||
.markdown-body iframe {
|
||||
min-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: -2rem;
|
||||
&-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3rem;
|
||||
background: rgba(white, 0.2);
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body table td:nth-child(1) {
|
||||
white-space: nowrap;
|
||||
.title {
|
||||
font-weight: 900;
|
||||
font-size: 4em;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body,
|
||||
.fbody-header {
|
||||
max-width: 840px;
|
||||
.tagline {
|
||||
margin: 1rem 0;
|
||||
font-weight: 400;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20vh;
|
||||
.meta {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.8em;
|
||||
.content :global(p) {
|
||||
font-size: 1.2em;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.markdown-body,
|
||||
.toc {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.header-snowpack {
|
||||
font-size: 3.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.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,12 +96,13 @@ 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue