diff --git a/.eleventy.js b/.eleventy.js deleted file mode 100644 index 2b4c58e..0000000 --- a/.eleventy.js +++ /dev/null @@ -1,114 +0,0 @@ -const glob = require('fast-glob'); -const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); -const markdownIt = require("markdown-it"); -const markdownItAnchor = require('markdown-it-anchor'); -const markdownItToc = require('markdown-it-toc-done-right'); - -module.exports = function(eleventyConfig) { - - /* -------------------------------------------------------------------------- - 11ty plugins - -------------------------------------------------------------------------- */ - eleventyConfig.addPlugin(syntaxHighlight); - - /* -------------------------------------------------------------------------- - filters - -------------------------------------------------------------------------- */ - glob.sync(['_source/_filters/*.js']).forEach(file => { - let filters = require('./' + file); - Object.keys(filters).forEach(name => eleventyConfig.addFilter(name, filters[name])); - }); - - /* -------------------------------------------------------------------------- - BrowserSync settings - -------------------------------------------------------------------------- */ - eleventyConfig.setBrowserSyncConfig({ - ui: false, - logPrefix: false, - files: [ // watch the files generated elsewhere - '_public/assets/*.css', - '_public/assets/*.js', - '_public/assets', - '!_public/assets/**/**.map' - ], - server: { // make URLs work without a .html extension - baseDir: "_public", - serveStaticOptions: { - extensions: ["html"] - } - }, - snippetOptions: { - rule: { // put the snippet in the head for Turbo happiness - match: /<\/head>/i, - fn: function (snippet, match) { - return snippet + match; - } - } - }, - }); - - /* -------------------------------------------------------------------------- - MarkdownIt settings - -------------------------------------------------------------------------- */ - const markdownItOptions = { - html: true, // allow HTML markup - typographer: true // fancy quotes - }; - const markdownLib = markdownIt(markdownItOptions); - markdownLib.use(markdownItAnchor, { // add anchors to headings - level: '2', - permalink: 'true', - permalinkClass: 'anchor', - permalinkSymbol: '﹟', - permalinkBefore: 'true' - }); - markdownLib.use(markdownItToc, { // make a TOC with ${toc} - level: '2', - listType: 'ul' - }); - - /* -------------------------------------------------------------------------- - LiquidJS settings - -------------------------------------------------------------------------- */ - - eleventyConfig.setLiquidOptions({ - dynamicPartials: false, - strictFilters: false - }); - - /* -------------------------------------------------------------------------- - 11ty settings - -------------------------------------------------------------------------- */ - - // handbook collection - bake in ordering by file slug - eleventyConfig.addCollection("handbook", (collectionApi) => - collectionApi.getFilteredByTag("handbook").sort((a, b) => { - if (a.fileSlug < b.fileSlug) return -1; - else if (a.fileSlug > b.fileSlug) return 1; - else return 0; - }) - ); - - // reference collection - bake in ordering by 'order' front matter value - eleventyConfig.addCollection("reference", function(collectionApi) { - return collectionApi.getFilteredByTag("reference").sort((a, b) => { - return a.data.order - b.data.order; - }); - }); - - eleventyConfig.setLibrary('md', markdownLib); - eleventyConfig.setDataDeepMerge(true); - eleventyConfig.addPassthroughCopy({ '_source/_assets/fonts': 'assets/fonts' }); - eleventyConfig.addPassthroughCopy({ '_source/_assets/images': 'assets' }); - - return { - dir: { - input: '_source', - output: '_public', - layouts: '_layouts', - includes: '_includes' - }, - templateFormats: ['html', 'md', 'liquid', 'njk'], - htmlTemplateEngine: 'liquid' - }; -}; \ No newline at end of file diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 10de02b..0000000 --- a/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -.cache -.netlify -.jekyll-metadata -.sass-cache -_public -_site -node_modules -tmp diff --git a/.node-version b/.node-version deleted file mode 100644 index 99cdd80..0000000 --- a/.node-version +++ /dev/null @@ -1 +0,0 @@ -16.15.0 diff --git a/CNAME b/CNAME index 8c3656a..5b63791 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -native.hotwired.dev \ No newline at end of file +native.hotwired.dev diff --git a/README.md b/README.md deleted file mode 100644 index ab51bcf..0000000 --- a/README.md +++ /dev/null @@ -1,14 +0,0 @@ -# The Hotwire Native website - -This repository backs the website living at https://native.hotwired.dev. - -To work on it locally: - -1. `npm install` -2. `npm run serve` -3. (If you need it: `npm install markdown-it` and rerun step #2). - -## Copyright - -The logo, design, and other aesthetic parts of this website is copyright 37signals, all rights reserved. Feel free to be inspired by the structure, but do not copy the specific design, anymore than you'd copy basecamp.com or hey.com. - diff --git a/_source/_assets/css/base/_elements.scss b/_source/_assets/css/base/_elements.scss deleted file mode 100644 index a877629..0000000 --- a/_source/_assets/css/base/_elements.scss +++ /dev/null @@ -1,236 +0,0 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html { - font-size: 10px; -} - -body { - margin: 0; - padding: 0; - position: relative; - overflow-x: hidden; - background-color: $color-white; - color: $color-black; - font-family: $serif-stack; - font-size: $font-base-small; - font-style: normal; - font-weight: 400; - line-height: 1; - - @include media(large) { - font-size: $font-base-medium; - } - - @include media(x-large) { - font-size: $font-base-large; - } -} - -a { - color: $color-black; - font-weight: 550; - margin: -.2rem; - padding: .2rem; - text-decoration: underline; - text-decoration-thickness: 0.1em; - text-decoration-width: 0.1rem; - - &:visited { - color: $color-black; - } - - @media(hover: hover) { - - &:hover { - text-decoration-color: $color-accent; - text-decoration-thickness: 0.2em; - text-decoration-width: 0.2em; - } - } - - &:active { - color: $color-black; - } -} - -h1, h2, h3 { - margin-top: 1.5em; - margin-bottom: 0.75em; - font-family: $sans-stack; - font-weight: 600; - letter-spacing: -.01em; - line-height: 1.1em; - text-align: center; - word-wrap: break-word; -} - -h1 { - margin-top: 2em; - font-size: $font-xxx-large; - font-weight: 700; -} - -h2 { - margin-top: 2.5em; - font-size: $font-xx-large; - text-align: center; -} - -h3 { - margin-top: 2.5em; - font-size: $font-x-large; - font-weight: 500; - letter-spacing: 0.01em; -} - -ul, -ol { - line-height: 1.6; - margin-bottom: 1.5em; -} - -li { - margin-left: 1em; - margin-bottom: 0.5em; - - ul, - ol { - margin-top: 0.5em; - margin-bottom: 0; - } -} - -p { - line-height: 1.6; - margin-bottom: 1.5em; -} - -strong { - font-weight: 600; -} - -blockquote { - position: relative; - margin-bottom: 1.5em; - padding: 0 0 0 2em; - border-left: 2px solid $color-black; - text-align: left; - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - display: block; - width: 1.5rem; - height: 1.5rem; - background: url('/assets/logo.svg') left top / contain no-repeat; - } - - h1, - h2, - h3 { - margin-top: 2rem; - text-align: left; - } -} - -hr { - display: block; - height: 1px; - margin: 2em 0 3em 0; - padding: 0; - border: none; - border-top: 1px solid #f7f5f2; -} - -code, -pre { - font-family: $mono-stack; - line-height: 1.25; - padding: 0 0.1em; - background-color: $color-tint; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre { - position: relative; - overflow: auto; - margin: 0 -1em 2em -1em; - margin: calc(min(5vw, 4rem)*-1); - margin-top: 0; - margin-bottom: 2em; - font-weight: 400; - background: $color-tint; - - @include media(medium) { - margin: 0 0 2em 0; - } - - &::after { - display: block; - content: ""; - pointer-events: none; - position: absolute; - top: 0; - bottom: 0; - right: 0; - width: 2em; - background: linear-gradient(to right, rgba($color-tint, 0), $color-tint); - } -} - -code { - padding: 0.125em; - word-wrap: break-word; -} - -pre > code { - display: block; - max-width: 100%; - overflow: auto; - padding: 1em; - word-wrap: normal; -} - -table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - text-align: left; -} - -thead { - background-color: $color-tint; - font-family: $sans-stack; -} - -tr { - border-bottom: 0.125em solid $color-tint; -} - -th, -td { - vertical-align: middle; - padding: 0.5em; -} - -input, -select { - vertical-align: middle; -} diff --git a/_source/_assets/css/base/_fonts.scss b/_source/_assets/css/base/_fonts.scss deleted file mode 100644 index f05ec89..0000000 --- a/_source/_assets/css/base/_fonts.scss +++ /dev/null @@ -1,53 +0,0 @@ -@font-face { - font-family: 'Bitter'; - font-weight: 100 900; - font-stretch: normal; - font-named-instance: 'Regular'; - src: url('/assets/fonts/Bitter-Roman.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'Bitter'; - font-weight: 100 900; - font-style: italic; - font-named-instance: 'Italic'; - src: url('/assets/fonts/Bitter-Italic.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'Jost'; - font-weight: 100 900; - font-stretch: normal; - font-named-instance: 'Regular'; - src: url('/assets/fonts/Jost-Roman.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'Jost'; - font-weight: 100 900; - font-style: italic; - font-named-instance: 'Italic'; - src: url('/assets/fonts/Jost-Italic.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'RobotoMono'; - font-weight: 100 800; - font-stretch: normal; - font-named-instance: 'Regular'; - src: url('/assets/fonts/RobotoMono-Roman.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'RobotoMono'; - font-weight: 100 800; - font-style: italic; - font-named-instance: 'Italic'; - src: url('/assets/fonts/RobotoMono-Italic.woff2') format('woff2'); - font-display: swap; -} diff --git a/_source/_assets/css/base/_mixins.scss b/_source/_assets/css/base/_mixins.scss deleted file mode 100644 index cf2ca7e..0000000 --- a/_source/_assets/css/base/_mixins.scss +++ /dev/null @@ -1,90 +0,0 @@ -$column-width: 30em; - -$serif-stack: 'Bitter', serif; -$sans-stack: 'Jost', sans-serif; -$mono-stack: 'RobotoMono', monospace; - -$font-base-small: 1.6em; -$font-base-medium: calc(1em + 0.55vw); -$font-base-large: 1.8em; - -$font-xxx-small: 0.55em; -$font-xx-small: 0.65em; -$font-x-small: 0.75em; -$font-small: 0.85em; -$font-medium: 1em; -$font-large: 1.125em; -$font-x-large: 1.25em; -$font-xx-large: 1.75em; -$font-xxx-large: 2.25em; -$font-xxxx-large: 3em; - -$color-white: #FFF; -$color-black: #000; -$color-gray: #666; -$color-accent: #FFE801; -$color-tint: #FBF7F0; -$color-brand-turbo: #5CD8E5; -$color-brand-stimulus: #77E8B9; -$color-brand-strada: #E76057; -$color-brand-native: #C18BF4; -$color-brand: $color-brand-native; - -@mixin border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -@mixin transform($attrs) { - -webkit-transform: $attrs; - -moz-transform: $attrs; - -ms-transform: $attrs; - transform: $attrs; -} - -@mixin transition($attrs...) { - -webkit-transition: $attrs; - -moz-transition: $attrs; - -ms-transition: $attrs; - transition: $attrs; -} - -@mixin clearfix { - zoom: 1; - - &:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } -} - -.clearfix { @include clearfix; } - -@mixin media($query) { - @if $query == small { - @media(max-width: 39.99em) { @content; } - } @else if $query == medium { - @media(min-width: 40em) { @content; } - } @else if $query == large { - @media(min-width: 66em) { @content; } - } @else if $query == x-large { - @media(min-width: 90em) { @content; } - } @else { - @media(#{$query}) { @content; } - } -} - -@mixin retinafy($image, $width, $height) { - @media(min--moz-device-pixel-ratio: 1.3), - (-o-min-device-pixel-ratio: 2.6/2), - (-webkit-min-device-pixel-ratio: 1.3), - (min-device-pixel-ratio: 1.3), - (min-resolution: 1.3dppx) { - background-image: url($image); - background-size: $width $height; - } -} diff --git a/_source/_assets/css/base/_utilities.scss b/_source/_assets/css/base/_utilities.scss deleted file mode 100644 index e64e7c2..0000000 --- a/_source/_assets/css/base/_utilities.scss +++ /dev/null @@ -1,70 +0,0 @@ -.color-white { color: $color-white !important; } -.color-black { color: $color-black !important; } -.color-accent { color: $color-accent !important; } -.color-tint { color: $color-tint !important; } -.color-brand-turbo { color: $color-brand-turbo !important; } -.color-brand-stimulus { color: $color-brand-stimulus !important; } -.color-brand-strada { color: $color-brand-strada !important; } -.color-brand-native { color: $color-brand-native !important; } -.color-brand { color: $color-brand !important; } - -.hover\:color-white:hover { color: $color-white !important; } -.hover\:color-black:hover { color: $color-black !important; } -.hover\:color-accent:hover { color: $color-accent !important; } -.hover\:color-tint:hover { color: $color-tint !important; } -.hover\:color-brand-turbo:hover { color: $color-brand-turbo !important; } -.hover\:color-brand-stimulus:hover { color: $color-brand-stimulus !important; } -.hover\:color-brand-strada:hover { color: $color-brand-strada !important; } -.hover\:color-brand-native:hover { color: $color-brand-native !important; } -.hover\:color-brand:hover { color: $color-brand !important; } - -.bg-white { background-color: $color-white !important; } -.bg-black { background-color: $color-black !important; } -.bg-accent { background-color: $color-accent !important; } -.bg-tint { background-color: $color-tint !important; } -.bg-brand-turbo { background-color: $color-brand-turbo !important; } -.bg-brand-stimulus { background-color: $color-brand-stimulus !important; } -.bg-brand-strada { background-color: $color-brand-strada !important; } -.bg-brand-native { background-color: $color-brand-native !important; } -.bg-brand { background-color: $color-brand !important; } - -.hover\:bg-white:hover { background-color: $color-white !important; } -.hover\:bg-black:hover { background-color: $color-black !important; } -.hover\:bg-accent:hover { background-color: $color-accent !important; } -.hover\:bg-tint:hover { background-color: $color-tint !important; } -.hover\:bg-brand-turbo:hover { background-color: $color-brand-turbo !important; } -.hover\:bg-brand-stimulus:hover { background-color: $color-brand-stimulus !important; } -.hover\:bg-brand-strada:hover { background-color: $color-brand-strada !important; } -.hover\:bg-brand-native:hover { background-color: $color-brand-native !important; } -.hover\:bg-brand:hover { background-color: $color-brand !important; } - -._placeholder, -._placeholder-s { - position: relative; - - &::after { - content: "[placeholder]"; - display: block; - position: absolute; - z-index: 100; - left: 50%; - top: 50%; - background: $color-white; - color: $color-black; - font-family: $mono-stack; - font-size: 1.6rem; - font-style: normal; - font-weight: normal; - letter-spacing: 0; - line-height: 1; - white-space: nowrap; - transform: translate(-50%, -50%) rotate(-12deg); - mix-blend-mode: difference; - } -} - -._placeholder-s { - &::after { - font-size: 1rem; - } -} diff --git a/_source/_assets/css/components/_anchor.scss b/_source/_assets/css/components/_anchor.scss deleted file mode 100644 index 56d824c..0000000 --- a/_source/_assets/css/components/_anchor.scss +++ /dev/null @@ -1,20 +0,0 @@ -.anchor { - float: left; - margin: 0 0 0 -1em; - padding: 0; - font-size: $font-x-small; - text-decoration: none; - opacity: 0.5; -} - -@media(hover: hover) { - .anchor { - opacity: 0; - transition: opacity 60ms ease-in-out; - } - - [id]:hover > .anchor { - opacity: 0.7; - &:hover { opacity: 1; } - } -} diff --git a/_source/_assets/css/components/_button.scss b/_source/_assets/css/components/_button.scss deleted file mode 100644 index fbbcc87..0000000 --- a/_source/_assets/css/components/_button.scss +++ /dev/null @@ -1,30 +0,0 @@ -.button { - transition: font-weight 0.1s ease, clip-path 0.2s ease, background-color 0.2s ease; - display: inline-block; - padding: 1em 1.5em; - color: $color-white; - font-family: $sans-stack; - text-decoration: none; - text-align: center; - line-height: normal; - -webkit-appearance: none; - background-color: $color-brand; - border: 0; - box-shadow: none; - clip-path: polygon(5% 10%, 46% 1%, 46% 10%, 100% 0, 95% 90%, 31% 100%, 31% 90%, 0% 100%); - - &:visited { - color: $color-white; - } - - @media(hover: hover) { - &:hover { - color: $color-black; - background-color: $color-accent; - cursor: pointer; - text-decoration: none; - font-weight: 800; - clip-path: polygon(5% 10%, 66% 1%, 66% 10%, 100% 0, 95% 90%, 51% 100%, 51% 90%, 0% 100%); - } - } -} diff --git a/_source/_assets/css/components/_callout.scss b/_source/_assets/css/components/_callout.scss deleted file mode 100644 index f11e3dc..0000000 --- a/_source/_assets/css/components/_callout.scss +++ /dev/null @@ -1,28 +0,0 @@ -.callout { - background-color: #fe8; - color: #000; -} - -.callout--avoid { - text-decoration: line-through; - color: #c00; -} - -.callout--prefer { - color: #0a0; -} - -.callout--pink { - background-color: #fac; - color: #000; -} - -.callout--blue { - background-color: #8cf; - color: #000; -} - -.callout--green { - background-color: #afc; - color: #000; -} diff --git a/_source/_assets/css/components/_docs.scss b/_source/_assets/css/components/_docs.scss deleted file mode 100644 index 3f80ef0..0000000 --- a/_source/_assets/css/components/_docs.scss +++ /dev/null @@ -1,90 +0,0 @@ -.docs { - position: relative; -} - -.docs__content { - grid-column-start: 2; - - @include media(medium) { - grid-column: 6 / span 8; - } - - @include media(large) { - grid-column: 5 / span 8; - } - - h1, h2, h3, h4, h5, h6 { - text-align: left; - } - - h1 { - margin-top: 1.3em; - } - - p > img:not([class]) { - min-width: 15em; - } - - figure { - margin-bottom: 2em; - color: $color-gray; - text-align: center; - - img { - display: block; - margin-left: auto; - margin-right: auto; - } - } - - img { - max-width: 100%; - height: auto; - margin-bottom: 0.5em; - } - - img.border { - border: 0.5px solid rgba(0, 0, 0, 0.1); - border-radius: 0.5em; - } -} - -.docs__index { - grid-column-start: 2; - margin: 0; - text-align: left; - overflow-y: auto; - - @include media(small) { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1em 0; - } - - @include media(medium) { - grid-column: 2 / span 4; - position: -webkit-sticky; - position: sticky; - top: 0; - bottom: 0; - min-height: 100vh; - padding: 3.25em 0 0 0; - } - - @include media(large) { - grid-column: 2 / span 3; - } -} - -.docs__footer { - margin: 4em 0 3em 0; -} - -.docs__screenshot { - max-width: 100%; - height: auto; - border: 0.2rem solid $color-white; - border-radius: 5px; - box-shadow: 0 0 1em rgba($color-black, 0.1); -} diff --git a/_source/_assets/css/components/_foot.scss b/_source/_assets/css/components/_foot.scss deleted file mode 100644 index 208e190..0000000 --- a/_source/_assets/css/components/_foot.scss +++ /dev/null @@ -1,53 +0,0 @@ -.footer { - - align-items: center; - display: flex; - flex-direction: column; - - &__headline { - font-size: 85%; - font-style: italic; - margin: 0 0 0.6em 0; - } - - &__links { - - align-items: center; - display: flex; - gap: 0.4em; - justify-content: center; - margin: 0; - - li { - - display: flex; - margin: 0; - - a { - - display: flex; - - img { - height: 1.7em; - width: auto; - } - - } - - span { - display: flex; - font-size: 65%; - font-style: italic; - margin-top: 0.5em; - } - - } - - } - - &__copyright { - font-size: 85%; - margin: 2.5em 0 0 0; - } - -} diff --git a/_source/_assets/css/components/_grid.scss b/_source/_assets/css/components/_grid.scss deleted file mode 100644 index 7446115..0000000 --- a/_source/_assets/css/components/_grid.scss +++ /dev/null @@ -1,61 +0,0 @@ -.grid { - display: grid; - grid-template-columns: 1fr minmax(80vw, 100%) 1fr; - align-items: start; - column-gap: unquote("min(5vw, 4rem)"); - - > .grid { - grid-column: 1 / -1; - } - - > *:not([class*="grid"]) { - grid-column: 2; - } - - @include media(medium) { - grid-template-columns: 1fr repeat(12, minmax(2rem, 100%)) 1fr; - column-gap: unquote("min(3vw, 5rem)"); - - > *:not([class*="grid"]) { - grid-column: 4 / span 8; - } - } - - @include media(x-large) { - grid-template-columns: 1fr repeat(12, 7.5rem) 1fr; - column-gap: 4rem; - } -} - -.grid__item { - grid-column-start: 2; - - &--bleed-left { grid-column: 1 / span 2; } - &--bleed-right { grid-column-end: -1; } - &--bleed-full { grid-column: 1 / -1; } - - @include media(medium) { - &--span-3 { grid-column-end: span 3; } - &--span-4 { grid-column-end: span 4; } - &--span-5 { grid-column-end: span 5; } - &--span-6 { grid-column-end: span 6; } - &--span-7 { grid-column-end: span 7; } - &--span-8 { grid-column-end: span 8; } - &--span-9 { grid-column-end: span 9; } - &--span-10 { grid-column-end: span 10; } - &--span-11 { grid-column-end: span 11; } - &--span-12 { grid-column: 2 / span 12; } - - &--start-1 { grid-column-start: 2; } - &--start-2 { grid-column-start: 3; } - &--start-3 { grid-column-start: 4; } - &--start-4 { grid-column-start: 5; } - &--start-5 { grid-column-start: 6; } - &--start-6 { grid-column-start: 7; } - &--start-7 { grid-column-start: 8; } - &--start-8 { grid-column-start: 9; } - &--start-9 { grid-column-start: 10; } - &--start-10 { grid-column-start: 11; } - &--start-auto { grid-column-start: auto; } - } -} diff --git a/_source/_assets/css/components/_highlighter.scss b/_source/_assets/css/components/_highlighter.scss deleted file mode 100644 index 05ce566..0000000 --- a/_source/_assets/css/components/_highlighter.scss +++ /dev/null @@ -1,71 +0,0 @@ -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: rgba(0, 0, 0, 0.6); - font-style: italic; -} - -.token.namespace { - opacity: .7; -} - -.token.string, -.token.attr-value, -.token.attr-name { - color: #4070a0; - font-weight: normal; -} - -.token.punctuation, -.token.operator { - color: #393A34; -} - -.token.entity, -.token.url, -.token.symbol, -.token.number, -.token.variable, -.token.constant, -.token.property, -.token.regex, -.token.inserted { - color: #002070; - font-weight: bold; -} - -.token.boolean { - color: #007020; - font-weight: bold; -} - -.token.atrule, -.token.keyword, -.language-autohotkey .token.selector { - color: #007020; - font-weight: bold; -} - -.token.function, -.token.deleted, -.language-autohotkey .token.tag { - color: #9a050f; -} - -.token.tag, -.token.selector, -.language-autohotkey .token.keyword { - color: #062873; - font-weight: bold; -} - -.token.important, -.token.function, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} diff --git a/_source/_assets/css/components/_jump.scss b/_source/_assets/css/components/_jump.scss deleted file mode 100644 index 1d9d998..0000000 --- a/_source/_assets/css/components/_jump.scss +++ /dev/null @@ -1,90 +0,0 @@ -.jump { - width: 100%; - margin: 0; - padding: 0 1em; - color: $color-white; - background-color: $color-black; - display: flex; - align-items: center; - justify-content: center; - font-family: $sans-stack; - text-transform: uppercase; - font-style: italic; - - @include media(medium) { - justify-content: flex-start; - } -} - -.jump__list { - list-style-type: none; - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - margin: 0; - padding: 0; - - li { - margin: 0; - padding: 0; - - &::after { - content: "/"; - display: inline-block; - margin: 0 0.25em 0 0.125em; - } - - &:first-child::after { - content: ":"; - } - } -} - -.jump__list-link { - display: inline-block; - margin: 0; - padding: 0.5em 0.125em; - color: $color-white; - font-weight: 500; - text-decoration: none; - - @include media(medium) { - padding: 0.125em; - font-size: $font-small; - } - - &:visited { - color: $color-white; - } - - &:hover { - color: $color-accent; - } -} - -.jump__list-link--hotwire { - font-weight: 700; -} - -.jump__list-link--active { - color: $color-brand !important; - text-decoration: none; - pointer-events: none; -} - -.jump__list-link--disabled { - opacity: 0.5; - text-decoration: none; - pointer-events: none; -} - -.jump__list-info { - @include media(small) { - clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - } -} diff --git a/_source/_assets/css/components/_landing.scss b/_source/_assets/css/components/_landing.scss deleted file mode 100644 index 54bf519..0000000 --- a/_source/_assets/css/components/_landing.scss +++ /dev/null @@ -1,169 +0,0 @@ -.landing-intro { - position: relative; - margin: 0; - padding: 0; - background-color: $color-tint; - border-top: 0.4rem solid $color-brand; -} - -.landing-intro__text { - position: relative; - z-index: 1; - margin: 1.25em 0 2.25em 0; - text-align: center; - color: $color-black; - font-weight: 800; - line-height: 1.3; - - @include media(medium) { - font-size: $font-xxxx-large; - } -} - -.landing-hero { - position: relative; - margin: -4em 0 0 0; - - &::before { - content: ""; - display: block; - width: 110%; - height: 90%; - position: absolute; - z-index: -1; - left: -5%; - top: 2%; - background: url('/assets/waves-pattern-4.svg') center no-repeat; - background-size: 100% 100%; - } - - @include media(medium) { - display: flex; - justify-content: space-between; - - &::before { - width: 124%; - height: 80%; - left: -12%; - top: 12%; - } - } -} - -.landing-hero__step { - overflow: hidden; - aspect-ratio: 2/1; - position: relative; - width: 100%; - margin-bottom: 2em; - background-color: $color-tint; - border: 0.25em solid $color-white; - box-shadow: 0 0 2em rgba(0,0,0, 0.1); - - img { - display: block; - width: 100%; - height: auto; - } -} - -.landing-summary { - text-align: left; - font-size: $font-large; -} - -.landing-versions { - display: flex; - justify-content: space-around; - margin: 0 auto; -} - -.landing-version { - padding: 1.5em 2em; - position: relative; - margin: 0 0 5em 0; - font-weight: 600; - font-style: italic; - font-size: $font-small; - - em { - text-decoration: underline; - } - - &:hover { - em { - text-decoration-color: $color-brand; - } - } - - @include media(medium) { - margin-top: -4em; - } -} - -.landing-actions { - grid-column: 3/4; - margin: 0; - - @include media(medium) { - display: flex; - justify-content: space-between; - align-items: stretch; - } -} - -.landing-actions__item { - display: block; - margin-bottom: 1em; - padding: 1.5em 1em; - font-family: $sans-stack; - font-style: italic; - text-align: center; - line-height: 1.25; - background-color: $color-white; - box-shadow: 0 0 2em rgba($color-black, 0.075); - border-radius: 0.5em; - - @include media(small) { - max-width: 20em; - margin-left: auto; - margin-right: auto; - } - - @include media(medium) { - width: 32%; - margin-bottom: 0; - } -} - -.landing-actions__icon { - display: block; - width: 3.75em; - height: 3.75em; - margin: 0 auto 1em auto; - background-color: $color-brand; - - .landing-actions__item:hover & { - background-color: $color-accent; - } -} - -.landing-actions__icon--guide { - -webkit-mask: url('/assets/icon-guide.svg') center / 100% no-repeat; - mask: url('/assets/icon-guide.svg') center / 100% no-repeat; -} - -.landing-actions__icon--install { - -webkit-mask: url('/assets/icon-install.svg') center / 100% no-repeat; - mask: url('/assets/icon-install.svg') center / 100% no-repeat; -} - -.landing-actions__icon--apple { - -webkit-mask: url('/assets/icon-apple.svg') center / 100% no-repeat; - mask: url('/assets/icon-apple.svg') center / 100% no-repeat; -} - -.landing-actions__icon--android { - -webkit-mask: url('/assets/icon-android.svg') center / 100% no-repeat; - mask: url('/assets/icon-android.svg') center / 100% no-repeat; -} diff --git a/_source/_assets/css/components/_nav.scss b/_source/_assets/css/components/_nav.scss deleted file mode 100644 index 6cace63..0000000 --- a/_source/_assets/css/components/_nav.scss +++ /dev/null @@ -1,347 +0,0 @@ -.nav-skip { - clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - background-color: $color-white; - - &:hover, - &:active, - &:focus { - clip: auto !important; - top: 1rem; - left: 1rem; - width: auto; - height: auto; - z-index: 100000; - } -} - -.nav-logo { - display: block; - height: 2em; - margin: 0; - max-height: 100%; - text-decoration: none; - - .logo { - height: 100%; - width: auto; - } - - .logo__icon { - fill: $color-brand; - } - - path { - transition: fill 0.2s ease; - } - - @media(hover: hover) { - - &:hover path, - &:hover rect { - fill: $color-accent; - } - - &:hover span { - color: $color-accent; - } - } - - span { - font-family: $mono-stack; - font-size: $font-xxx-large; - font-weight: 900; - text-transform: uppercase; - font-style: italic; - } -} - -.nav { - - @include media(small) { - @include transform(translate(-100%, 0)); - @include transition(transform 0.3s ease-in-out); - opacity: 0; - position: fixed; - overflow-y: auto; - top: 0; - left: 0; - display: block; - margin: 0; - padding: 0 1.5em; - width: 100%; - height: 100%; - z-index: 3000; - text-align: right; - background-color: $color-brand; - } - - @include media(medium) { - @include transform(translate(0, 0)); - @include transition(transform 0s ease-in-out); - margin: 0; - padding: 0; - opacity: 1; - background-color: $color-white; - } -} - -.nav__list { - margin: 1em 0 0 0; - text-align: right; - list-style-type: none; - border-top: 0.2rem solid $color-brand; - - @include media(medium) { - text-align: left; - } - - &.active { - display: block; - } - - li { - margin: 0; - padding: 0; - } -} - -.nav__list--horizontal { - - @include media(small) { - font-size: $font-x-large; - } - - @include media(medium) { - display: flex; - margin: 0; - border: none; - - li { - margin: 0 0.25em; - } - } - -} - -.nav__list-link { - display: block; - margin: 0.5em 0; - padding: 0.25em 0; - font-size: $font-x-large; - font-family: $sans-stack; - font-weight: 600; - font-style: italic; - line-height: 1.25; - - &.active { - text-decoration: none; - pointer-events: none; - font-weight: 800; - } - - @include media(medium) { - line-height: 1.4; - font-size: $font-medium; - - .nav__list--horizontal & { - padding: 0; - margin: 0; - } - - .nav__list--horizontal li:not(:last-child) &::after { - display: inline-block; - margin-left: 0.5rem; - margin-right: -0.5rem; - content: "/"; - } - } -} - -.nav__sublist { - display: none; - list-style-type: none; - margin: 0; - border-right: 0.2rem solid $color-black; - - @include media(medium) { - border-right: 0; - border-left: 0.2rem solid $color-black; - } - - &.active { - display: block; - } - - li { - margin: 0; - padding: 0 0.25em; - } -} - -.nav__sublist-link { - display: block; - margin: 0; - padding: 0.5em; - font-size: $font-large; - font-family: $sans-stack; - font-weight: 400; - line-height: 1.25; - - &.active { - text-decoration: none; - pointer-events: none; - font-weight: 800; - } - - @include media(medium) { - text-align: left; - margin-bottom: 0.5em; - padding: 0.25em; - font-size: $font-small; - line-height: 1.4; - - &.active { - color: $color-black; - background-color: $color-tint; - border-radius: 0.125em; - } - } -} - -.nav-checkbox { - display: none; -} - -.nav-checkbox:checked ~ .nav { - @include transform(translate(0, 0)); - opacity: 1; -} - -.nav-mobile-button { - display: block; - margin: 0; - padding: 0.5em 1em; - cursor: pointer; - z-index: 2000; - font-family: $sans-stack; - font-size: $font-large; - font-weight: 800; - text-transform: uppercase; - background-color: $color-brand; - border-radius: 0.2rem; - - @include media(medium) { - display: none; - } - - span { - position: relative; - display: inline-flex; - top: -0.5rem; - width: 1.25em; - height: 0.2rem; - background-color: $color-white; - - &::after, - &::before { - content: ''; - position: absolute; - display: block; - width: 1.25em; - height: 0.2rem; - background-color: $color-white; - } - - &::before { - margin-top: -0.3em; - } - - &::after { - margin-top: 0.3em; - } - } -} - -.nav-mobile-button--close { - margin: 1.5em auto 1.5em auto; - padding: 0; - background-color: $color-brand; - - span { - background-color: rgba(0, 0, 0, 0); - - &::before, - &::after { - background-color: $color-black; - margin-top: 0; - } - - &::before { - @include transform(rotate(45deg)); - } - - &::after { - @include transform(rotate(-45deg)); - } - } -} - -.nav__github-corner { - - @include media(small) { - display: none; - } - - position: absolute; - right: 0px; - z-index: 1; - - .github-corner:hover .octo-arm { - animation: octocat-wave 560ms ease-in-out - } - - @keyframes octocat-wave { - 0%, 100% { - transform: rotate(0) - } - - 20%, 60% { - transform: rotate(-25deg) - } - - 40%, 80% { - transform: rotate(10deg) - } - } - - @media(max-width: 500px) { - .github-corner:hover .octo-arm { - animation: none - } - - .github-corner .octo-arm { - animation: octocat-wave 560ms ease-in-out - } - } - - @namespace svg url(github-corner); - - svg|a:link, svg|a:visited { - cursor: pointer; - } - - svg|a text, - text svg|a { - fill: blue; - text-decoration: underline; - } - - svg|a:hover, svg|a:active { - outline: dotted 1px blue; - } - -} diff --git a/_source/_assets/css/components/_page.scss b/_source/_assets/css/components/_page.scss deleted file mode 100644 index e5d84ea..0000000 --- a/_source/_assets/css/components/_page.scss +++ /dev/null @@ -1,27 +0,0 @@ -.page-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.75em 1em; -} - -.page-footer { - position: relative; - margin: 6em 0 0 0; - padding: 3em 0; - text-align: center; - - @include media(medium) { - &:before { - background: url('/assets/waves-pattern-6.svg') top left no-repeat; - background-size: 100% 230%; - content: ''; - width: 50%; - height: 50%; - position: absolute; - z-index: -1; - left: 65%; - top: 50%; - } - } -} diff --git a/_source/_assets/css/main.scss b/_source/_assets/css/main.scss deleted file mode 100644 index a28ae84..0000000 --- a/_source/_assets/css/main.scss +++ /dev/null @@ -1,17 +0,0 @@ - -@import - "base/mixins", - "base/fonts", - "base/elements", - "base/utilities", - "components/anchor", - "components/button", - "components/jump", - "components/nav", - "components/foot", - "components/page", - "components/docs", - "components/landing", - "components/highlighter", - "components/callout", - "components/grid"; diff --git a/_source/_assets/js/main.js b/_source/_assets/js/main.js deleted file mode 100644 index 71c2a64..0000000 --- a/_source/_assets/js/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import "@hotwired/turbo" - -// Are we in an