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'; {title} - + 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 similarity index 82% rename from examples/snowpack/public/css/_animations.scss rename to 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 similarity index 100% rename from examples/snowpack/public/css/_github-markdown.scss rename to examples/snowpack/public/styles/_github-markdown.scss diff --git a/examples/snowpack/public/css/_globals.scss b/examples/snowpack/public/styles/_globals.scss similarity index 58% rename from examples/snowpack/public/css/_globals.scss rename to 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 similarity index 100% rename from examples/snowpack/public/css/_prism.scss rename to 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 similarity index 95% rename from examples/snowpack/public/css/_var.scss rename to 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 @@ + +
-
+
Snowpack 3.0 is out now! 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; - + 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'; --- - 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(); ---
-
- Pokemon #{number} is: {pokemonData.name} -
+
+ Pokemon #{number} is: {pokemonData.name} +
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; --- -
-
- -