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