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">
|
<meta charset="UTF-8">
|
||||||
<title>{title}</title>
|
<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 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">
|
<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-medium: 500ms;
|
||||||
$transition-slow: 1s;
|
$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 {
|
@keyframes pulse {
|
||||||
0% {
|
0% {
|
||||||
color: #2a85ca;
|
color: #2a85ca;
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
@use './var' as *;
|
@use './var' as *;
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -10,13 +14,18 @@ body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img,
|
||||||
|
video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 1.25;
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
max-width: calc(100vw - 4rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretty-font,
|
.pretty-font,
|
||||||
|
|
@ -24,3 +33,8 @@ p {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-family: $heading;
|
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;
|
$breakpoint-l: 1240px;
|
||||||
|
|
||||||
// nav bar height mobile
|
// nav bar height mobile
|
||||||
$nav-height: 56px;
|
$nav-height: 3.5rem;
|
||||||
|
$algolia-height: 4rem;
|
||||||
|
|
||||||
// colors
|
// colors
|
||||||
$blue: #0a5e9d;
|
$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">
|
<section class="grid-banner">
|
||||||
<div class="notification">
|
<div class="notification">
|
||||||
<div class="container">
|
<div class="wrapper">
|
||||||
Snowpack 3.0 is out now!
|
Snowpack 3.0 is out now!
|
||||||
<a href="/posts/2021-01-13-snowpack-3-0">
|
<a href="/posts/2021-01-13-snowpack-3-0">
|
||||||
Read the announcement post →
|
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" />
|
<meta property="twitter:image" content="https://www.snowpack.dev/img/social-2.jpg" />
|
||||||
|
|
||||||
<!-- Global Stylesheets -->
|
<!-- 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" />
|
<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';
|
import Nav from './Nav.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Banner />
|
|
||||||
<Nav />
|
<Nav />
|
||||||
|
|
||||||
<slot></slot>
|
<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">
|
<style lang="scss">
|
||||||
@use '../../public/css/var' as *;
|
@use '../../public/styles/var' as *;
|
||||||
@use '../../public/css/animations' as *;
|
@use '../../public/styles/animations' as *;
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
min-height: 20rem;
|
max-height: 24rem;
|
||||||
max-height: 30rem;
|
|
||||||
color: #111;
|
color: #111;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
background: #2a85ca40;
|
background: #2a85ca40;
|
||||||
|
|
@ -21,6 +24,8 @@
|
||||||
|
|
||||||
@media (min-width: $breakpoint-l) {
|
@media (min-width: $breakpoint-l) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
min-height: 24rem;
|
||||||
|
max-height: 30rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -84,10 +89,10 @@
|
||||||
margin: 0 auto 0.75rem;
|
margin: 0 auto 0.75rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
font-weight: 700;
|
font-weight: 900;
|
||||||
font-family: $heading;
|
font-family: $heading;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -0.045em;
|
letter-spacing: -0.07em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
|
|
||||||
|
|
@ -105,7 +110,7 @@
|
||||||
font-family: $heading;
|
font-family: $heading;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -1px;
|
letter-spacing: -0.05em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
@media (min-width: $breakpoint-m) {
|
||||||
|
|
@ -114,17 +119,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-button {
|
.copy-button {
|
||||||
display: flex;
|
display: none;
|
||||||
flex: none;
|
flex: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-width: 292px;
|
min-width: 292px;
|
||||||
padding: 0.75rem 1.25rem;
|
padding: 0.5em 1em;
|
||||||
padding-bottom: 0.75rem;
|
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
|
font-family: "Menlo", "ui-monospace", "SFMono-Regular", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
|
||||||
Liberation Mono, Courier New, monospace;
|
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid #0006;
|
border: 1px solid #0006;
|
||||||
|
|
@ -132,22 +135,16 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@include animation-copy-button;
|
@include animation-copy-button;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
svg,
|
svg,
|
||||||
.faded {
|
.faded {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
transition: color 0.1s ease-out;
|
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>
|
</style>
|
||||||
|
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
|
|
@ -156,7 +153,7 @@
|
||||||
<p class="header-snowpack-subtitle">The faster frontend build tool.</p>
|
<p class="header-snowpack-subtitle">The faster frontend build tool.</p>
|
||||||
|
|
||||||
<div class="hero-cta">
|
<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>
|
<div style="margin: 0.5rem"></div>
|
||||||
<button id="copy-button" class="copy-button hidden-mobile" data-clipboard-text="npm install snowpack">
|
<button id="copy-button" class="copy-button hidden-mobile" data-clipboard-text="npm install snowpack">
|
||||||
<span class="faded" style="margin-right: 0.75rem;">$</span>
|
<span class="faded" style="margin-right: 0.75rem;">$</span>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import Menu from './Menu.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<div class="container">
|
<div class="wrapper">
|
||||||
<section class="snow-view__docs is-full">
|
<section class="snow-view__docs is-full">
|
||||||
|
|
||||||
<aside id="nav-primary" class="snow-view-nav">
|
<aside id="nav-primary" class="snow-view-nav">
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,45 @@
|
||||||
<style lang="scss">
|
<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;
|
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 {
|
.contents {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
height: calc(100vh - #{$nav-height + $algolia-height});
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding: 0 0 2rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
|
|
@ -19,13 +49,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
display: block;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.75rem;
|
||||||
color: rgba($white, 0.6);
|
color: rgba($white, 0.6);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-family: $heading;
|
font-family: $heading;
|
||||||
line-height: 1.2em;
|
line-height: 1.2;
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
@media (min-width: $breakpoint-m) {
|
||||||
color: $dark-grey;
|
color: $dark-grey;
|
||||||
|
|
@ -79,7 +110,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<nav class="toc">
|
<nav class="nav">
|
||||||
<ol class="contents">
|
<ol class="contents">
|
||||||
<li class="section">
|
<li class="section">
|
||||||
<span class="header">Concepts</span>
|
<span class="header">Concepts</span>
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,12 @@ export let version: string = '3.1.2';
|
||||||
---
|
---
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@use '../../public/css/var' as *;
|
@use '../../public/styles/var' as *;
|
||||||
|
|
||||||
/**
|
|
||||||
* Top nav
|
|
||||||
* The thing at the top
|
|
||||||
*/
|
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: map-get($map: $layers, $key: 'nav');
|
z-index: map-get($map: $layers, $key: 'nav') + 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'mobile logo version'
|
'mobile logo version'
|
||||||
|
|
@ -27,17 +22,19 @@ export let version: string = '3.1.2';
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $dark-blue;
|
background-color: $dark-blue;
|
||||||
|
|
||||||
:global(body.is-nav-open) & {
|
|
||||||
height: $nav-height * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
@media (min-width: $breakpoint-m) {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: $nav-height;
|
height: $nav-height;
|
||||||
padding-left: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
|
@ -113,12 +110,16 @@ export let version: string = '3.1.2';
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
|
display: none;
|
||||||
|
background: $dark-blue;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
grid-area: search;
|
grid-area: search;
|
||||||
margin: 0 6px;
|
max-width: calc(100vw - 1.25rem);
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
padding-right: 0.7rem;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -127,30 +128,34 @@ export let version: string = '3.1.2';
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(body.is-nav-open) & {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
@media (min-width: $breakpoint-m) {
|
||||||
|
display: flex;
|
||||||
|
width: 600px;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: $breakpoint-m - 1) {
|
.sr-only {
|
||||||
& {
|
position: absolute;
|
||||||
display: none;
|
right: 1000px;
|
||||||
}
|
|
||||||
body.is-nav-open & {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .sr-only {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-hint {
|
.search-hint {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0.75rem;
|
||||||
display: none;
|
display: none;
|
||||||
padding: 6px 12px;
|
height: 100%;
|
||||||
|
width: 3.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
letter-spacing: 0.125em;
|
||||||
color: #c2ced9;
|
color: #c2ced9;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
@ -163,14 +168,14 @@ export let version: string = '3.1.2';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.625em;
|
||||||
vertical-align: -35%;
|
vertical-align: -35%;
|
||||||
background-color: rgba($white, 0.25);
|
background-color: rgba($white, 0.25);
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
@media (min-width: $breakpoint-m) {
|
||||||
display: block;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -235,19 +240,25 @@ export let version: string = '3.1.2';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
margin-left: 0.5em;
|
margin-left: 1em;
|
||||||
vertical-align: -25%;
|
vertical-align: -25%;
|
||||||
background-color: rgba($white, 0.25);
|
background-color: rgba($white, 0.25);
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.social {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<button id="toc-drawer-button" class="mobile-open" type="button" aria-expanded="false"
|
<button id="toc-drawer-button" class="mobile-open" type="button" aria-expanded="false"
|
||||||
aria-controls="nav-primary">
|
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>
|
<title>Toggle mobile menu</title>
|
||||||
<path
|
<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">
|
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 class="sr-only"> to search</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex-grow: 1"></div>
|
|
||||||
<a href="https://github.com/snowpackjs/snowpack/releases" target="_blank" class="link version">
|
<a href="https://github.com/snowpackjs/snowpack/releases" target="_blank" class="link version">
|
||||||
{`v${version}`}
|
{`v${version}`}
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/snowpackjs/snowpack" target="_blank" class="link link__desktop">
|
<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"
|
<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>
|
||||||
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>
|
|
||||||
</a>
|
</a>
|
||||||
<a href="https://twitter.com/snowpackjs" target="_blank" class="link link__desktop">
|
<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"
|
<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>
|
||||||
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>
|
|
||||||
</a>
|
</a>
|
||||||
<a href="https://discord.gg/snowpack" target="_blank" class="link link__desktop">
|
<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"
|
<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>
|
||||||
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>
|
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,13 @@ const pokemonData = await pokemonDataReq.json();
|
||||||
---
|
---
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.mb1 { margin-bottom: 1rem; }
|
.mb1 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="notification mb1">
|
<div class="notification mb1">
|
||||||
<div class="container">
|
<div class="wrapper">
|
||||||
Pokemon #{number} is: {pokemonData.name}
|
Pokemon #{number} is: {pokemonData.name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ export let headers: string;
|
||||||
---
|
---
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@use "../../public/css/var" as *;
|
@use "../../public/styles/var" as *;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -14,7 +14,7 @@ export let headers: string;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-family: $heading;
|
font-family: $heading;
|
||||||
line-height: 1.2em;
|
line-height: 1.2;
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
@media (min-width: $breakpoint-m) {
|
||||||
color: $dark-grey;
|
color: $dark-grey;
|
||||||
|
|
@ -24,7 +24,6 @@ export let headers: string;
|
||||||
.subnav {
|
.subnav {
|
||||||
position: static;
|
position: static;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding-top: 2rem;
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
color: $dark-grey;
|
color: $dark-grey;
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@ export let content: any;
|
||||||
<img class="cover" src={content.cover} alt=""/>
|
<img class="cover" src={content.cover} alt=""/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="wrapper">
|
||||||
<section class="snow-view__docs has-subnav">
|
<section class="snow-view__docs has-subnav">
|
||||||
|
|
||||||
<aside id="nav-primary" class="snow-view-nav">
|
<aside id="nav-primary" class="snow-view-nav">
|
||||||
|
|
|
||||||
|
|
@ -12,20 +12,96 @@ export let content: any;
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<BaseHead title={content.title} description={content.description} permalink="TODO" />
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<div class="container">
|
<div class="wrapper">
|
||||||
<section class="snow-view__docs has-subnav">
|
<section class="layout">
|
||||||
|
<aside id="nav-primary" class="layout-nav pt4">
|
||||||
<aside id="nav-primary" class="snow-view-nav">
|
|
||||||
<Menu />
|
<Menu />
|
||||||
</aside>
|
</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">
|
<div class="content">
|
||||||
<h2 class="content-title">
|
<h2 class="content-title">
|
||||||
{content.title}
|
{content.title}
|
||||||
|
|
|
||||||
|
|
@ -10,112 +10,83 @@ export let content: any;
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<style>
|
<style lang="scss">
|
||||||
.markdown-body img,
|
@use '../../public/styles/var' as *;
|
||||||
.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) {
|
.hero {
|
||||||
|
background: linear-gradient(45deg, $rainbow-green, $rainbow-blue, $rainbow-purple);
|
||||||
|
color: white;
|
||||||
|
border-bottom: 1px solid #555;
|
||||||
|
padding: 3rem;
|
||||||
|
|
||||||
.markdown-body img,
|
&-inner {
|
||||||
.markdown-body video,
|
display: flex;
|
||||||
.markdown-body iframe {
|
flex-direction: column;
|
||||||
min-width: 100%;
|
justify-content: center;
|
||||||
margin-left: 0;
|
align-items: center;
|
||||||
margin-right: 0;
|
padding: 3rem;
|
||||||
margin-bottom: -2rem;
|
background: rgba(white, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body table td:nth-child(1) {
|
.title {
|
||||||
white-space: nowrap;
|
font-weight: 900;
|
||||||
|
font-size: 4em;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body,
|
.tagline {
|
||||||
.fbody-header {
|
margin: 1rem 0;
|
||||||
max-width: 840px;
|
font-weight: 400;
|
||||||
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body {
|
.meta {
|
||||||
font-size: 18px;
|
font-size: 1em;
|
||||||
margin-bottom: 20vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body h2 {
|
.content :global(p) {
|
||||||
font-size: 1.8em;
|
font-size: 1.2em;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 860px) {
|
.content :global(li) {
|
||||||
.markdown-body,
|
font-size: 1.2em;
|
||||||
.toc {
|
line-height: 1.4;
|
||||||
padding: 1em;
|
margin-top: 1rem;
|
||||||
}
|
margin-bottom: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<BaseHead title={content.title} description={content.description} permalink="TODO" />
|
<BaseHead title={content.title} description={content.description} permalink="TODO" />
|
||||||
<link rel="stylesheet" href="/css/legacy-post.css" />
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
|
<header class="hero">
|
||||||
<div class="grid-extra-space">
|
<div class="hero-inner">
|
||||||
<div class="grid-body-header">
|
|
||||||
<svg height="80px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
<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">
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
<g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
||||||
<g id="mountain-solid" transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
|
<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>
|
||||||
<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>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<h1 class="header-snowpack">{content.title}</h1>
|
<h1 class="title">{content.title}</h1>
|
||||||
|
|
||||||
|
<h2 class="tagline">
|
||||||
<div>
|
|
||||||
{content.tagline && <div style="margin-bottom: 1rem;">{content.tagline}</div>}
|
{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>
|
Published <a href='#published-at'>{formatDate(parseISO(content.date), 'MMMM d, yyyy')}</a>
|
||||||
by <a href="https://twitter.com/FredKSchott">Fred K. Schott</a>
|
by <a href="https://twitter.com/FredKSchott">Fred K. Schott</a>
|
||||||
</div>
|
</small>
|
||||||
</div>
|
</h2>
|
||||||
|
|
||||||
<!-- Place this tag where you want the button to render. -->
|
<!-- 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);">
|
<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. -->
|
<!-- Place this tag in your head or just before your close body tag. -->
|
||||||
<script defer src="https://buttons.github.io/buttons.js"></script>
|
<script defer src="https://buttons.github.io/buttons.js"></script>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<div class="grid-body">
|
|
||||||
<article class="markdown-body">
|
<main class="wrapper wrapper__readable pt6 pb6">
|
||||||
|
<article class="content markdown-body">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</main>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
---
|
---
|
||||||
|
import Button from '../components/Button.astro';
|
||||||
import Menu from '../components/Menu.astro';
|
import Menu from '../components/Menu.astro';
|
||||||
import Hero from '../components/Hero.astro';
|
import Hero from '../components/Hero.astro';
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
|
|
@ -12,12 +13,40 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<style lang="scss">
|
<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 {
|
.top {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.img-banner {
|
||||||
|
background: #f0db4f;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 32rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.bullets {
|
.bullets {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-row-gap: 1em;
|
grid-row-gap: 1em;
|
||||||
|
|
@ -34,27 +63,30 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
||||||
}
|
}
|
||||||
|
|
||||||
.bullet {
|
.bullet {
|
||||||
display: list-item;
|
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
&::before {
|
h3 {
|
||||||
display: block;
|
display: flex;
|
||||||
float: left;
|
align-items: center;
|
||||||
margin-right: 6px;
|
|
||||||
color: green !important;
|
&::before {
|
||||||
content: '✅';
|
content: "✅";
|
||||||
|
font-size: 0.75em;
|
||||||
|
display: block;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
margin: 2em 0;
|
margin: 2em 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
|
||||||
|
|
||||||
.feature-button {
|
> * {
|
||||||
display: inline-block;
|
margin-left: 0.5rem;
|
||||||
margin: 0.5em;
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<BaseHead title={title} description={description} permalink="TODO" />
|
<BaseHead title={title} description={description} permalink="TODO" />
|
||||||
|
|
@ -63,84 +95,80 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
||||||
<body>
|
<body>
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<Hero bar="{title}" />
|
<Hero bar="{title}" />
|
||||||
<div foo="{title}" class="container" style="margin: 0 auto">
|
<div foo="{title}" class="wrapper" style="margin: 0 auto">
|
||||||
<section class="snow-view__docs is-full is-home">
|
<section class="layout pt6 pb6">
|
||||||
<aside id="nav-primary" class="snow-view-nav">
|
<aside id="nav-primary" class="layout-nav">
|
||||||
<Menu></Menu>
|
<Menu></Menu>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<article class="snow-view-main">
|
<article class="layout-main">
|
||||||
<div class="content">
|
<a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
|
||||||
<article class="grid-body">
|
rel="noopener noreferrer">
|
||||||
<a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
|
<img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
|
||||||
rel="noopener noreferrer">
|
</a>
|
||||||
<img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="content markdown-body feature-list">
|
<div class="markdown-body feature-list">
|
||||||
<div class={'t' + 'o' + 'p'}>
|
<div class={'t' + 'o' + 'p'}>
|
||||||
<h2 id="what-is-snowpack%3F">What is Snowpack?</h2>
|
<h2 id="what-is-snowpack%3F">What is Snowpack?</h2>
|
||||||
<p>
|
<p>
|
||||||
<strong>Snowpack is a lightning-fast frontend build tool, designed
|
<strong>Snowpack is a lightning-fast frontend build tool, designed
|
||||||
for the modern web.</strong>
|
for the modern web.</strong>
|
||||||
It is an alternative to heavier, more complex bundlers like
|
It is an alternative to heavier, more complex bundlers like
|
||||||
webpack or Parcel in your development workflow. Snowpack
|
webpack or Parcel in your development workflow. Snowpack
|
||||||
leverages JavaScript's native module system (<a
|
leverages JavaScript's native module system (<a
|
||||||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
|
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
|
||||||
as
|
as
|
||||||
ESM</a>) to avoid unnecessary work and stay fast no matter how big
|
ESM</a>) to avoid unnecessary work and stay fast no matter how big
|
||||||
your project grows.
|
your project grows.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Once you try it, it's impossible to go back to anything else.
|
Once you try it, it's impossible to go back to anything else.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="bullets">
|
<ul class="bullets">
|
||||||
<li class="bullet">
|
<li class="bullet">
|
||||||
<h3 class="bullet-heading">Instant startup</h3>
|
<h3 class="bullet-heading">Instant startup</h3>
|
||||||
Snowpack's unbundled web development server
|
Snowpack's unbundled web development server
|
||||||
<strong>starts up in 50ms or less</strong>
|
<strong>starts up in 50ms or less</strong>
|
||||||
and stays fast in large projects.
|
and stays fast in large projects.
|
||||||
</li>
|
</li>
|
||||||
<li class="bullet">
|
<li class="bullet">
|
||||||
<h3 class="bullet-heading">Build once, cache forever</h3>
|
<h3 class="bullet-heading">Build once, cache forever</h3>
|
||||||
Snowpack never builds the same file twice. Powered by
|
Snowpack never builds the same file twice. Powered by
|
||||||
JavaScript’s native module system (ESM) in the browser.
|
JavaScript’s native module system (ESM) in the browser.
|
||||||
</li>
|
</li>
|
||||||
<li class="bullet">
|
<li class="bullet">
|
||||||
<h3 class="bullet-heading">HMR feat. Fast Refresh</h3>
|
<h3 class="bullet-heading">HMR feat. Fast Refresh</h3>
|
||||||
No refresh required. See changes reflected instantly in the
|
No refresh required. See changes reflected instantly in the
|
||||||
browser with
|
browser with
|
||||||
<a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
|
<a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
|
||||||
for React, Preact & Svelte.
|
for React, Preact & Svelte.
|
||||||
</li>
|
</li>
|
||||||
<li class="bullet">
|
<li class="bullet">
|
||||||
<h3 class="bullet-heading">Out-of-the-box support</h3>
|
<h3 class="bullet-heading">Out-of-the-box support</h3>
|
||||||
Enjoy Snowpack's built-in support for JSX, TypeScript, React,
|
Enjoy Snowpack's built-in support for JSX, TypeScript, React,
|
||||||
Preact, CSS Modules
|
Preact, CSS Modules
|
||||||
<a href="/reference/supported-files">and more.</a>
|
<a href="/reference/supported-files">and more.</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="bullet">
|
<li class="bullet">
|
||||||
<h3 class="bullet-heading">Optimize for production</h3>
|
<h3 class="bullet-heading">Optimize for production</h3>
|
||||||
Build for production with built-in optimizations and plugin
|
Build for production with built-in optimizations and plugin
|
||||||
support for your favorite bundlers.
|
support for your favorite bundlers.
|
||||||
</li>
|
</li>
|
||||||
<li class="bullet">
|
<li class="bullet">
|
||||||
<h3 class="bullet-heading">Plugins? Plugins!</h3>
|
<h3 class="bullet-heading">Plugins? Plugins!</h3>
|
||||||
Babel? Sass? MDX? Browse the entire
|
Babel? Sass? MDX? Browse the entire
|
||||||
<a href="/plugins">Snowpack Plugin Catalog</a>
|
<a href="/plugins">Snowpack Plugin Catalog</a>
|
||||||
to connect your favorite build tool (or
|
to connect your favorite build tool (or
|
||||||
<a href="/reference/plugins">create your own!</a>)
|
<a href="/reference/plugins">create your own!</a>)
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<a href="/tutorials/quick-start" class="button button-primary feature-button">Get started</a>
|
<a href="/tutorials/quick-start"><Button style="primary">Get started</Button></a>
|
||||||
<a href="/concepts/how-snowpack-works" class="button feature-button">Learn more</a>
|
<a href="/concepts/how-snowpack-works"><Button>Learn more</Button></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue