diff options
Diffstat (limited to 'examples/snowpack/public/css')
22 files changed, 2372 insertions, 0 deletions
diff --git a/examples/snowpack/public/css/_animations.scss b/examples/snowpack/public/css/_animations.scss new file mode 100644 index 000000000..182f88ec4 --- /dev/null +++ b/examples/snowpack/public/css/_animations.scss @@ -0,0 +1,53 @@ +@use './var' as *; + +$easeOutSine: cubic-bezier(0.61, 1, 0.88, 1); +$easeInExpo: cubic-bezier(0.7, 0, 0.84, 0); +$easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1); +$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1); +$easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6); +$easeInCirc: cubic-bezier(0.55, 0, 1, 0.45); +$easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1); +$easeInQuad: cubic-bezier(0.11, 0, 0.5, 0); +$quintic: cubic-bezier(0.76, 0.05, 0.86, 0.06); +$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; + border-color: #2a85ca; + } + + 100% { + } +} + +@mixin animation-copy-button { + transition: transform $transition-fast $easeInExpo, + border-color $transition-fast linear, box-shadow $transition-fast linear; + + svg, + span { + transition: color $transition-fast linear; + } + + &:hover { + box-shadow: 0 2px 2px 0 #2e5e8266; + transform: translateY(-1px); + border-color: #2a85ca; + svg, + span { + color: #2a85ca; + } + } +} diff --git a/examples/snowpack/public/css/_github-markdown.scss b/examples/snowpack/public/css/_github-markdown.scss new file mode 100644 index 000000000..a5d45be5b --- /dev/null +++ b/examples/snowpack/public/css/_github-markdown.scss @@ -0,0 +1,616 @@ +.markdown-body .anchor { + float: left; + margin-left: -20px; + padding-right: 4px; + line-height: 1; +} + +.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 { + color: #fafbfc; + background-color: #b31d28; +} + +.markdown-body .pl-c2 { + color: #fafbfc; + background-color: #d73a49; +} + +.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 { + color: #b31d28; + background-color: #ffeef0; +} + +.markdown-body .pl-mi1 { + color: #22863a; + background-color: #f0fff4; +} + +.markdown-body .pl-mc { + color: #e36209; + background-color: #ffebda; +} + +.markdown-body .pl-mi2 { + color: #f6f8fa; + background-color: #005cc5; +} + +.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: 0.67em 0; + font-size: 2em; +} + +.markdown-body img { + border-style: none; +} + +.markdown-body hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +.markdown-body input { + margin: 0; + font: inherit; +} + +.markdown-body input { + overflow: visible; +} + +.markdown-body [type='checkbox'] { + box-sizing: border-box; + padding: 0; +} + +.markdown-body * { + box-sizing: border-box; +} + +.markdown-body input { + font-size: inherit; + font-family: 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 { + height: 0; + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #dfe2e5; +} + +.markdown-body hr::before { + display: table; + content: ''; +} + +.markdown-body hr::after { + display: table; + clear: both; + content: ''; +} + +.markdown-body table { + border-collapse: collapse; + border-spacing: 0; +} + +.markdown-body table { + 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-top: 0; + margin-bottom: 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-top: 0; + margin-bottom: 10px; +} + +.markdown-body blockquote { + margin: 0; +} + +.markdown-body ol, +.markdown-body ul { + margin-top: 0; + margin-bottom: 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 { + margin: 0; + -webkit-appearance: none; + appearance: none; +} + +.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-top: 8px !important; + margin-bottom: 8px !important; +} + +.markdown-body .pl-0 { + padding-left: 0 !important; +} + +.markdown-body .py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.markdown-body .pl-1 { + padding-left: 4px !important; +} + +.markdown-body .pl-2 { + padding-left: 8px !important; +} + +.markdown-body .py-2 { + padding-top: 8px !important; + padding-bottom: 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::before { + display: table; + content: ''; +} + +.markdown-body::after { + display: table; + clear: both; + content: ''; +} + +.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-top: 0; + margin-bottom: 16px; +} + +.markdown-body hr { + height: 0.25em; + margin: 24px 0; + padding: 0; + background-color: #e1e4e8; + border: 0; +} + +.markdown-body blockquote { + padding: 0 1em; + color: #6a737d; + border-left: 0.25em solid #dfe2e5; +} + +.markdown-body blockquote > :first-child { + margin-top: 0; +} + +.markdown-body blockquote > :last-child { + margin-bottom: 0; +} + +.markdown-body kbd { + display: inline-block; + padding: 3px 5px; + color: #444d56; + font-size: 11px; + line-height: 10px; + vertical-align: middle; + background-color: #fafbfc; + border: 1px solid #c6cbd1; + border-bottom-color: #959da5; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #959da5; +} + +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + margin-top: 42px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; +} + +.markdown-body h1 { + font-size: 2em; +} + +.markdown-body h1, +.markdown-body h2 { + /* border-bottom: 1px solid #eaecef; */ + + /* padding-bottom: 0.3em; */ +} + +.markdown-body h1 { + margin-bottom: 0; + padding-bottom: 0; + font-size: 4em; +} + +.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: 0.875em; +} + +.markdown-body h6 { + color: #6a737d; + font-size: 0.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-top: 0; + margin-bottom: 0; +} + +.markdown-body li { + word-wrap: break-all; +} + +.markdown-body li > p { + margin-top: 16px; +} + +.markdown-body li + li { + margin-top: 0.25em; +} + +.markdown-body img { + box-sizing: content-box; + max-width: 100%; + background-color: #fff; +} + +.markdown-body img[align='right'] { + padding-left: 20px; +} + +.markdown-body img[align='left'] { + padding-right: 20px; +} + +.markdown-body iframe { + max-width: 100%; +} diff --git a/examples/snowpack/public/css/_globals.scss b/examples/snowpack/public/css/_globals.scss new file mode 100644 index 000000000..960ff591c --- /dev/null +++ b/examples/snowpack/public/css/_globals.scss @@ -0,0 +1,29 @@ +@use './var' as *; + +html, +body { + margin: 0; + font-family: $body; +} + +* { + box-sizing: border-box; +} + +img { + max-width: 100%; + height: auto; +} + +p { + line-height: 1.25; +} + +.header-logo, +.header-snowpack, +.header-snowpack-subtitle, +.pretty-font, +.version-number { + font-weight: 600; + font-family: $heading; +} diff --git a/examples/snowpack/public/css/_prism.scss b/examples/snowpack/public/css/_prism.scss new file mode 100644 index 000000000..29a3cf5d8 --- /dev/null +++ b/examples/snowpack/public/css/_prism.scss @@ -0,0 +1,228 @@ +pre, +code { + color: #d4d4d4; + font-size: 14px; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + line-height: 1.5; + direction: ltr; + white-space: pre; + text-align: left; + text-shadow: none; + word-break: normal; + word-spacing: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre::selection, +code::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + pre, + code { + text-shadow: none; + } +} + +pre { + margin: 0.5rem 0 16px; + padding: 0.8rem 1rem 0.9rem; + overflow: auto; + background: #282a36; + border-radius: 4px; +} + +:not(pre) > code { + padding: 0.1em 0.3em; + color: #db4c69; + background: #f9f2f4; + border-radius: 0.3em; + white-space: pre-wrap; +} + +/********************************************************* +* Tokens +*/ +.namespace { + opacity: 0.7; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6a9955; +} + +.token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #ce9178; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #d4d4d4; + background: rgb(45, 55, 72); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #c586c0; +} + +.token.function { + color: #dcdcaa; +} + +.token.regex, +.token.important, +.token.variable { + color: #d16969; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name { + color: #4ec9b0; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + 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 { + color: #4ec9b0; +} + +/********************************************************* +* Language Specific +*/ +pre[class*='language-javascript'], +code[class*='language-javascript'] { + color: #4ec9b0; +} + +pre[class*='language-css'], +code[class*='language-css'] { + color: #ce9178; +} + +pre[class*='language-html'], +code[class*='language-html'] { + color: #d4d4d4; +} + +.language-html .token.punctuation { + color: #808080; +} + +/********************************************************* +* Line highlighting +*/ +pre[data-line] { + position: relative; +} + +pre > code { + position: relative; + z-index: 1; +} + +.line-highlight { + position: absolute; + right: 0; + left: 0; + z-index: 0; + margin-top: 1em; + padding: inherit 0; + line-height: inherit; + white-space: pre; + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + pointer-events: none; +} + +pre[class*='language-bash'] .token.function { + color: #d4d4d4; +} +.token.comment { + color: #fff7; +} diff --git a/examples/snowpack/public/css/_typography.scss b/examples/snowpack/public/css/_typography.scss new file mode 100644 index 000000000..67b7d0d22 --- /dev/null +++ b/examples/snowpack/public/css/_typography.scss @@ -0,0 +1,87 @@ +@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/_var.scss b/examples/snowpack/public/css/_var.scss new file mode 100644 index 000000000..9cac21ecd --- /dev/null +++ b/examples/snowpack/public/css/_var.scss @@ -0,0 +1,41 @@ +// typography +$body: -apple-system, 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', sans-serif; +$heading: 'Overpass', $body; +$code: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace; + +// breakpoints +$breakpoint-m: 800px; +$breakpoint-l: 1240px; + +// nav bar height mobile +$nav-height: 56px; + +// colors +$blue: #0a5e9d; +$dark-blue: #2e5e82; +$lightest-blue: #cfe2f2; +$orange: #fa6400; + +$color-primary: $dark-blue; +$color-secondary: $blue; +$color-light: $lightest-blue; +$color-strong-contrast: $orange; +$grey: #717171; +$dark-grey: #393939; +$light-grey: #c1c1c1; +$darkest-grey: #333; +$white: #fff; + +$light-rainbow-blue: #c9efd8; +$light-rainbow-pink: #f9ddff; +$rainbow-purple: #b224d0; +$rainbow-blue: #267dd6; +$rainbow-green: #24bf62; +$rainbow-yellow: #f0db4f; + +$layers: ( + 'base': 1, + 'nav-view': 9, + 'nav': 10, +); diff --git a/examples/snowpack/public/css/app.scss b/examples/snowpack/public/css/app.scss new file mode 100644 index 000000000..aa153320c --- /dev/null +++ b/examples/snowpack/public/css/app.scss @@ -0,0 +1,31 @@ +// GitHub markdown styles +@use './_github-markdown'; + +// Syntax highlighting +@use './_prism'; + +// Global styles +@use './_globals'; + +// Typography +@use './_typography'; + +// Components +@use './components/container'; +@use './components/hero'; +@use './components/icon'; +@use './components/logo'; +@use './components/nav'; +@use './components/old'; +@use './components/toc'; +@use './components/view'; +@use './components/search'; +@use './components/feature-list'; +@use './components/button'; +@use './components/copy-button'; +@use './components/card-grid'; + +// Pages +@use './pages/plugins'; + +@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 new file mode 100644 index 000000000..8c865d0dd --- /dev/null +++ b/examples/snowpack/public/css/components/_button.scss @@ -0,0 +1,42 @@ +@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 new file mode 100644 index 000000000..5bfb8eee4 --- /dev/null +++ b/examples/snowpack/public/css/components/_card-grid.scss @@ -0,0 +1,105 @@ +.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; + } +} + +.card { + display: flex; + grid-column: span 1; + overflow: hidden; + font-family: Open Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, + Roboto, sans-serif; + color: #1a202c; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + border: 1px solid #e2e8f0; +} +.card:hover { + border-color: #2a85ca; + box-shadow: 0 2px 2px 0 rgba(46, 94, 130, 0.4); +} +.card:hover .card-image { + opacity: 0.9; +} + +.card-image { + width: 100%; + object-fit: cover; + opacity: 0.8; +} + + +.card-image-small { + flex-grow: 1; + height: 120px; +} + +.card-image-large { + height: 200px; +} +.card-text { + padding: 1rem; +} +.card-title { + margin: 0 0 0.25rem 0; + font-weight: 600; + font-size: 20px; + font-family: 'Overpass'; + line-height: 1.1; +} +.content-title { + font-family: 'Overpass'; +} + +.card:nth-child(4n + 0) .card-image { + background: #f2709c; + background: linear-gradient(30deg, #ff9472, #f2709c); +} +.card:nth-child(4n + 1) .card-image { + background: #fbd3e9; + background: linear-gradient(30deg, #bb377d, #fbd3e9); +} +.card:nth-child(4n + 2) .card-image { + background: #b993d6; + background: linear-gradient(30deg, #8ca6db, #b993d6); +} + +.card:nth-child(4n + 3) .card-image { + background: #00d2ff; + background: linear-gradient(30deg, #3a7bd5, #00d2ff); +} diff --git a/examples/snowpack/public/css/components/_container.scss b/examples/snowpack/public/css/components/_container.scss new file mode 100644 index 000000000..a009bad5a --- /dev/null +++ b/examples/snowpack/public/css/components/_container.scss @@ -0,0 +1,5 @@ +.container { + max-width: 1400px; + padding-right: 1.5rem; + padding-left: 1.5rem; +} diff --git a/examples/snowpack/public/css/components/_copy-button.scss b/examples/snowpack/public/css/components/_copy-button.scss new file mode 100644 index 000000000..3a27b9087 --- /dev/null +++ b/examples/snowpack/public/css/components/_copy-button.scss @@ -0,0 +1,48 @@ +@use '../var' as *; +@use '../animations' as *; + +.copy-button { + display: flex; + flex: none; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 292px; + padding: 0.75rem 1.25rem; + padding-bottom: 0.75rem; + font-size: 100%; + 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; + border-radius: 4px; + cursor: pointer; + @include animation-copy-button; + + 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; + } +} + +@keyframes pulse { + 0% { + color: #2a85ca; + border-color: #2a85ca; + } + + 100% { + } +} diff --git a/examples/snowpack/public/css/components/_feature-list.scss b/examples/snowpack/public/css/components/_feature-list.scss new file mode 100644 index 000000000..f1a164774 --- /dev/null +++ b/examples/snowpack/public/css/components/_feature-list.scss @@ -0,0 +1,46 @@ +@use '../var' as *; +// A long feature list in columns +.feature-list { + + &-top { + text-align: left; + } + + &-bullets { + display: grid; + grid-row-gap: 1em; + grid-column-gap: 2em; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + margin: 2.5em 0 !important; + padding: .1em !important; + list-style: none; + + h3 { + margin: 0 0 .25em 0; + font-size: 1.25em; + } + + } + &-bullet { + display: list-item; + padding: 0.25em; + border-radius: 4px; + + &::before { + display: block; + float: left; + margin-right: 6px; + color: green !important; + content: '✅'; + + } + } + &-buttons { + margin: 2em 0; + text-align: center; + } + &-button { + display: inline-block; + margin: 0.5em; + } +} diff --git a/examples/snowpack/public/css/components/_hero.scss b/examples/snowpack/public/css/components/_hero.scss new file mode 100644 index 000000000..daa2a1f27 --- /dev/null +++ b/examples/snowpack/public/css/components/_hero.scss @@ -0,0 +1,108 @@ +@use '../var' as *; + +.hero { + display: flex; + align-items: center; + justify-content: center; + height: 50vh; + min-height: 20rem; + max-height: 30rem; + color: #111; + line-height: 1.5; + background: #2a85ca40; + background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' title='mountain' class='logo' fill='%23FFFB'%3E%3Cpath d='M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z' /%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: calc(100% + 100px) calc(100% + 64px); + background-size: 50%; + border-bottom: 1px solid #0003; + //margin-top: $nav-height; + + @media (min-width: $breakpoint-l) { + margin: 0; + } + + a { + color: white; + } + + > svg { + display: block; + margin: auto; + opacity: 0.9; + } + + .logo { + position: absolute; + right: 0; + width: 100%; + } + .logo path { + fill: #fff; + } + + .section { + padding: 1rem * 2; + } +} + +.hero-cta { + display: flex; + justify-content: center; + margin: 1.5rem auto 0; +} +.header-link { + padding-left: 2px; +} + +.header-logo { + display: flex; + align-items: center; + float: left; + margin: 0 -20px 0 0; + font-weight: bold; + font-size: 36px; + line-height: 1; + + @media (min-width: $breakpoint-m) { + margin: 0 20px 0 0; + } + + svg { + width: 31px; + height: 31px; + margin-right: 8px; + margin-left: 2px; + padding: 0; + color: #fff; + } +} + +.header-snowpack { + margin: 0 auto 0.75rem; + font-weight: 900; + font-size: 3.5rem; + line-height: 1; + letter-spacing: -0.045em; + text-align: center; + opacity: 0.9; + + @media (min-width: $breakpoint-m) { + max-width: none; + font-size: 5.75rem; + opacity: 1; + } +} + +.header-snowpack-subtitle { + margin: 0; + margin: auto; + font-weight: 500; + font-size: 2rem; + line-height: 1; + letter-spacing: -1px; + text-align: center; + + @media (min-width: $breakpoint-m) { + font-size: 3rem; + } +} diff --git a/examples/snowpack/public/css/components/_icon.scss b/examples/snowpack/public/css/components/_icon.scss new file mode 100644 index 000000000..ac08b9337 --- /dev/null +++ b/examples/snowpack/public/css/components/_icon.scss @@ -0,0 +1,21 @@ +/** + * 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/_logo.scss b/examples/snowpack/public/css/components/_logo.scss new file mode 100644 index 000000000..92e139fd4 --- /dev/null +++ b/examples/snowpack/public/css/components/_logo.scss @@ -0,0 +1,29 @@ +@use '../var' as *; + +/** + * Snowpack Logo + * That iconic mountain you know and love + */ + +.snow-logo { + display: inline-flex; + align-items: center; + + // ----------- + // Components + // ----------- + + &-icon { + display: block; + width: 1em; + height: 1em; + margin-right: 0.25em; + fill: currentColor; + } + + &-type { + font-weight: 700; + font-family: $heading; + letter-spacing: -0.03em; + } +} diff --git a/examples/snowpack/public/css/components/_nav.scss b/examples/snowpack/public/css/components/_nav.scss new file mode 100644 index 000000000..7220b38e2 --- /dev/null +++ b/examples/snowpack/public/css/components/_nav.scss @@ -0,0 +1,118 @@ +@use '../var' as *; + +/** + * Top nav + * The thing at the top + */ + +.snow-nav { + position: sticky; + top: 0; + z-index: map-get($map: $layers, $key: 'nav'); + display: grid; + grid-template-areas: + 'mobile logo version' + 'search search search'; + grid-template-rows: $nav-height $nav-height; + grid-template-columns: 1fr 2fr 1fr; + align-items: center; + height: $nav-height; + padding-right: 0.5rem; + padding-left: 0.625rem; + color: $white; + background-color: $dark-blue; + + body.is-nav-open & { + height: $nav-height * 2; + } + + @media (min-width: $breakpoint-m) { + display: flex; + height: $nav-height; + padding-left: 0; + } + + // ----------- + // Components + // ----------- + + &-link { + display: inline-block; + padding: 0.5em; + color: $white; + font-weight: 500; + text-decoration: none; + opacity: 0.7; + transition: opacity 150ms linear; + + &:focus, + &:hover { + opacity: 1; + } + + &__desktop { + display: none; + + @media (min-width: $breakpoint-m) { + display: block; + } + } + } + + &-logo { + display: flex; + grid-area: logo; + justify-content: center; + padding: 0.5rem; + color: $white; + font-size: 24px; + text-decoration: none; + + @media (min-width: $breakpoint-m) { + justify-content: flex-start; + padding: 0.5rem 1.25rem; + } + } + + &-mobile-open { + display: flex; + grid-area: mobile; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + padding: 0; + color: $white; + font-size: 16px; + background: none; + border: none; + appearance: none; + + @media (min-width: $breakpoint-m) { + display: none; + } + } + + &-version { + grid-area: version; + margin-left: 0.5em; + font-size: 0.8em; + font-family: $code; + text-align: right; + + @media (min-width: $breakpoint-m) { + text-align: left; + + &::after { + display: inline-block; + width: 1px; + height: 1.5em; + margin-left: 0.5em; + vertical-align: -25%; + background-color: rgba($white, 0.25); + content: ''; + } + } + } +} + diff --git a/examples/snowpack/public/css/components/_old.scss b/examples/snowpack/public/css/components/_old.scss new file mode 100644 index 000000000..a39d1a4b5 --- /dev/null +++ b/examples/snowpack/public/css/components/_old.scss @@ -0,0 +1,247 @@ +@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/_search.scss b/examples/snowpack/public/css/components/_search.scss new file mode 100644 index 000000000..8d84816b6 --- /dev/null +++ b/examples/snowpack/public/css/components/_search.scss @@ -0,0 +1,119 @@ +@use '../var' as *; + +.search-form { + position: relative; + z-index: 1000; + display: flex; + flex-grow: 1; + grid-area: search; + margin: 0 6px; + > * { + flex-grow: 1; + } + + @media (min-width: $breakpoint-m) { + max-width: 600px; + } + + @media (max-width: $breakpoint-m - 1) { + & { + display: none; + } + body.is-nav-open & { + display: flex; + } + } + + & .sr-only { + display: none; + } + + &-hint { + position: absolute; + top: 0; + right: 0; + display: none; + padding: 6px 12px; + color: #c2ced9; + font-size: 16px; + pointer-events: none; + + & * { + font-family: $code; + } + + &::before { + display: inline-block; + width: 1px; + height: 1.5em; + margin-right: 0.5em; + vertical-align: -35%; + background-color: rgba($white, 0.25); + content: ''; + } + + @media (min-width: $breakpoint-m) { + display: block; + } + } + + &-input { + flex-grow: 1; + box-sizing: border-box; + width: 100%; + margin: 0; + padding-top: 0.5rem; + padding-right: 1rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + overflow: visible; + color: #fff; + font-weight: 500; + font-size: 100%; + font-family: inherit; + line-height: inherit; + background-color: #446e8f; + border-color: rgba($white, 0.25); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + outline: 0; + transition-timing-function: ease-in-out; + transition-duration: 0.2s; + transition-property: border-color, color; + -webkit-font-smoothing: antialiased; + + &:focus { + color: white; + border-color: rgba($white, 0.75); + + &::placeholder { + color: rgba($white, 0.8); + } + } + &::placeholder { + color: #c2ced9; + } + + &__desktop { + display: none; + + @media (min-width: $breakpoint-m) { + display: block; + } + } + } +} + +.algolia-autocomplete .ds-dropdown-menu { + @media (max-width: $breakpoint-m - 1) { + width: 100%; + min-width: inherit; + max-width: inherit; + margin-top: 0.5rem; + } +} + +.algolia-autocomplete .ds-dropdown-menu::before { + display: none !important; +} diff --git a/examples/snowpack/public/css/components/_toc.scss b/examples/snowpack/public/css/components/_toc.scss new file mode 100644 index 000000000..8e23b358f --- /dev/null +++ b/examples/snowpack/public/css/components/_toc.scss @@ -0,0 +1,132 @@ +@use '../var' as *; + +/** + * Table of Contents (toc) + * The left-hand sidebar + */ + +$top-padding: 24px; + +%toc-link { + position: relative; + display: block; + color: $white; + text-decoration: none; + border: none; + transition: color 0.3s; + + @media (min-width: $breakpoint-m) { + color: $grey; + } + + &::before { + position: absolute; + top: -2px; + left: -19px; + font-weight: 400; + font-size: 26px; + line-height: 1; + opacity: 0; + transition: left .14s ease-out; + content: "▸"; + } + + + &:hover { + text-decoration: underline; + } + + &.active { + color: #0c8cec; + text-decoration: underline; + + &::before { + left: -17px; + opacity: 1; + } + } +} + +.snow-toc { + transition: padding 0.2s ease-out, opacity 0.2s ease-in-out; + + // ----------- + // Components + // ----------- + + &-contents { + margin: 0; + padding: 0; + line-height: 1.8; + list-style: none; + } + + &-link { + @extend %toc-link; + } + + &-section { + + .snow-toc-section { + margin-top: 1.5rem; + } + + &-header { + margin-top: 0; + margin-bottom: 8px; + color: rgba($white, 0.6); + font-weight: 600; + font-size: 20px; + font-family: $heading; + line-height: 1.2em; + + @media (min-width: $breakpoint-m) { + color: $dark-grey; + } + } + + &-items { + margin: 0; + padding: 0; + list-style: none; + } + } + + // ---------- + // Modifiers + // ---------- + + &__subnav { + position: static; + z-index: 1; + padding-top: 2rem; + + .snow-toc-section-header { + color: $dark-grey; + } + + hr { + display: block; + height: 1px; + margin: 1rem 0; + background-color: $light-grey; + border: none; + appearance: none; + } + + ol { + margin: 0; + padding: 0; + list-style: none; + } + + li { + line-height: 1.8; + } + + a { + @extend %toc-link; + + color: $grey; + } + } +} diff --git a/examples/snowpack/public/css/components/_view.scss b/examples/snowpack/public/css/components/_view.scss new file mode 100644 index 000000000..a18509054 --- /dev/null +++ b/examples/snowpack/public/css/components/_view.scss @@ -0,0 +1,152 @@ +@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 new file mode 100644 index 000000000..1afbbcbb9 --- /dev/null +++ b/examples/snowpack/public/css/legacy-post.css @@ -0,0 +1,18 @@ +@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/pages/_plugins.scss b/examples/snowpack/public/css/pages/_plugins.scss new file mode 100644 index 000000000..156d9fdff --- /dev/null +++ b/examples/snowpack/public/css/pages/_plugins.scss @@ -0,0 +1,97 @@ +.pluginPage { + &-count { + max-width: 600px; + min-height: 24px; + margin: 0.5rem 0 1rem; + color: rgba(black, 0.6); + font-weight: 300; + font-size: 1em; + font-style: italic; + text-align: center; + + @media (min-width: 600px) { + font-size: 1.2em; + } + } + + &-intro { + margin-top: 1rem; + margin-bottom: 1rem; + line-height: 1.5; + text-align: left; + + a { + color: #2e5e82; + } + } + + &-search { + display: flex; + width: 100%; + max-width: 600px; + + &-input { + flex-grow: 1; + flex-shrink: 0; + box-sizing: border-box; + padding: 0.25em 0.75em; + font-size: 1em; + border-width: 1px 0 1px 1px; + border-radius: 4px 0 0 4px; + box-shadow: 0 0 0 2px rgba(#2e5e82, 0); + transition: box-shadow 150ms linear; + appearance: none; + + &:focus { + border-color: #2e5e82; + outline: none; + box-shadow: 0 0 0 2px rgba(#2e5e82, 1); + + + .pluginPage-search-submit { + box-shadow: 0 0 0 2px rgba(#2e5e82, 1); + } + } + } + + &-submit { + padding: 0.5em 1em; + color: white; + font-weight: 700; + font-size: 1em; + font-family: 'Overpass', sans-serif; + background-color: #2e5e82; + border: none; + border-radius: 0 4px 4px 0; + box-shadow: 0 0 0 2px rgba(#2e5e82, 0); + transition: box-shadow 150ms linear; + appearance: none; + } + } + + &-subheading { + margin-top: -2.5rem; + margin-bottom: 0; + color: #2e5e82; + font-weight: 500; + font-size: 1em; + font-family: 'Overpass', sans-serif; + letter-spacing: -0.02em; + text-align: left; + + @media (min-width: 600px) { + font-size: 1.5em; + } + } + + &-zero-heading { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + font-weight: 700; + font-size: 1.4em; + text-align: left; + + @media (min-width: 600px) { + font-size: 1.5em; + } + } +} |