diff --git a/.vuepress/media/images/missing.png b/.vuepress/media/images/missing.png new file mode 100644 index 0000000..52c6c6d Binary files /dev/null and b/.vuepress/media/images/missing.png differ diff --git a/.vuepress/media/svg/text-logo--white.svg b/.vuepress/media/svg/text-logo--white.svg new file mode 100644 index 0000000..344ddd9 --- /dev/null +++ b/.vuepress/media/svg/text-logo--white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/.vuepress/media/svg/text-logo.svg b/.vuepress/media/svg/text-logo.svg new file mode 100644 index 0000000..43a3cb2 --- /dev/null +++ b/.vuepress/media/svg/text-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/.vuepress/scss/_layout.scss b/.vuepress/scss/_layout.scss new file mode 100644 index 0000000..efbb36a --- /dev/null +++ b/.vuepress/scss/_layout.scss @@ -0,0 +1,92 @@ +html, +body { + width: 100%; height: 100%; +} + +html { + background-color: $white; +} + +body { + min-width: 320px; min-height: 100vh; + + color: $black; + display: flex; + flex-direction: column; + @include font-sans; + font-size: 12px; + overflow-x: hidden; + position: relative; + z-index: 0; +} + +main { + flex: 1; + padding-top: 4rem !important; // override Vue +} + +.inner-wrap { + margin-right: auto; + margin-left: auto; + max-width: 1200px; + + @media (min-width: 901px) { + padding-right: 1rem; + padding-left: 1rem; + } + + @media (max-width: 900px) { + padding-right: 2rem; + padding-left: 2rem; + } + + &::after { + @include clearfix; + } +} + +h1, h2, h3, h4, h5 { + .header-anchor { + display: none; + } +} + +h1 { + font-size: 3rem; +} + +h2 { + font-size: 1.75rem; +} + +h3 { + font-size: 1.5rem; +} + +.__message { + bottom: 4rem; left: 10%; + + animation: close-message linear; + animation-delay: 2s; + font-size: 0.8rem; + line-height: 1.33; + padding-bottom: 1rem; + padding-top: 1rem; + position: absolute; + text-align: center; + width: 80%; + z-index: 2; + + a { + font-weight: 700; + } + + &[type="error"] { + background-color: $red; + color: $white; + } + + &[type="warning"] { + background-color: $yellow; + } +} diff --git a/.vuepress/scss/_variables.scss b/.vuepress/scss/_variables.scss index 09a16b5..d4cb325 100644 --- a/.vuepress/scss/_variables.scss +++ b/.vuepress/scss/_variables.scss @@ -1,2 +1,2 @@ $primary-color: #155b4a; -$text-color: #222; \ No newline at end of file +$text-color: #222; diff --git a/.vuepress/scss/init/_base.scss b/.vuepress/scss/init/_base.scss new file mode 100644 index 0000000..732d713 --- /dev/null +++ b/.vuepress/scss/init/_base.scss @@ -0,0 +1,151 @@ +html { + box-sizing: border-box; + text-rendering: optimizeLegibility; + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +*, +*::before, +*::after { + margin: 0; padding: 0; + + box-sizing: inherit; + outline: 0 !important; +} + +a, +area, +button, +[role="button"], +input, +label, +select, +summary, +textarea { // Remove touch delay on supported devices + touch-action: manipulation; +} + +a { + color: currentColor; + text-decoration: none; +} + +*[readonly] { + cursor: not-allowed; +} + +textarea { + &[disabled] { + resize: none; + } + + &:not[disabled] { + resize: vertical; + } +} + +button { + &:not(:disabled) { + cursor: pointer; + } + + &:active { + top: 2px; + } +} + +button, +input, +select, +textarea { + border: none; + border-radius: 0; + font-family: inherit; + font-size: inherit; + + -moz-appearance: none; + -webkit-appearance: none; + + &:focus { + outline: none; + } +} + +input, +select, +textarea { + background-color: transparent; +} + +input[type=submit] { + cursor: pointer; +} + +.left { + float: left; +} + +.right { + float: right; +} + +iframe { + border: 0; +} + +img { + font-size: 0; + + &::after { + width: 100%; height: 100%; + top: -100%; left: 0; + + background-color: $white; + background-image: url("../media/images/missing.png"); + background-size: cover; + box-shadow: 0 0 1px 0 rgba($black, 0.3); + content: ""; + display: block; + position: relative; + } +} + + + +@media print { + // Intelligent print styles + pre, blockquote { border: 1px solid #999 !important; page-break-inside: avoid !important; } + tr, img { page-break-inside: avoid !important; } + img { max-width: 100% !important; } + @page { margin: 0.5cm !important; } + p, h2, h3 { orphans: 3 !important; widows: 3 !important; } + h2, h3 { page-break-after: avoid !important; } + thead { display: table-header-group !important; } + + // Faster, more stable printing + * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; } + + // Show hypertext data for links and abbreviations + p a[href]::after { content: " (" attr(href) ")" !important; } + p abbr[title]::after { content: " (" attr(title) ")" !important; } + p a[href^="javascript:"]::after, p a[href^="#"]::after { content: "" !important; } + p a, p abbr { word-wrap: break-word !important; text-decoration: underline !important; } +} + + + +input::-moz-focus-inner, +button::-moz-focus-inner { + display: none; +} + +// Get rid of yellow autofill background +input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px $white inset !important; + + &:focus { + outline: none; + } +} diff --git a/.vuepress/scss/init/_colors.scss b/.vuepress/scss/init/_colors.scss new file mode 100644 index 0000000..6e6c280 --- /dev/null +++ b/.vuepress/scss/init/_colors.scss @@ -0,0 +1,18 @@ +$white: #fcfcfc; +$black: #222; + +$gray: #a3b7ad; +$yellow: #dbdb3e; +$lime: #8ddb3e; +$green: #3edb3e; +$teal: #3edb8d; +$cyan: #3edbdb; +$blue: #3e8cdb; +$indigo: #3e3edb; +$violet: #8c3edb; +$fuchsia: #db3edb; +$pink: #db3e8d; +$red: #db3e3e; +$orange: #db8c3e; + +// via https://palx.jxnblk.com/3edb8d diff --git a/.vuepress/scss/init/_extends.scss b/.vuepress/scss/init/_extends.scss new file mode 100644 index 0000000..df61b22 --- /dev/null +++ b/.vuepress/scss/init/_extends.scss @@ -0,0 +1,181 @@ + +// B U T T O N S + +.__button-base { + border: 1px solid; + font-size: 1rem; + letter-spacing: 0.025rem; + position: relative; + transition: all 0.2s; +} + +.__button-basic { + @extend .__button-base; + @extend .__button-padding-vertical; + + background-color: transparent; + border-color: transparent; + + &::after { + width: 100%; height: 2px; + bottom: 2px; left: 0; + + content: ""; + display: block; + transition: background-color 0.2s; + } + + &:not(:hover)::after { + background-color: transparent; + } + + &:hover::after { + background-color: $black; + } +} + +.__button-black { + @extend .__button-base; + @extend .__button-padding-vertical; + @extend .__button-padding-horizontal; + + &:not(:hover) { + background-color: $black; + border-color: $white; + box-shadow: 2px 2px 0 $white; + color: $white; + } + + &:hover { + background-color: $white; + border-color: $black; + box-shadow: 2px 2px 0 $black; + color: inherit; + } +} + +.__button-white { + @extend .__button-base; + @extend .__button-padding-vertical; + @extend .__button-padding-horizontal; + + &:not(:hover) { + background-color: $white; + border-color: transparent; + box-shadow: 2px 2px 0 $black; + color: inherit; + } + + &:hover { + background-color: $black; + border-color: $white; + box-shadow: 2px 2px 0 $white; + color: $white; + } +} + +.__button-gray { + @extend .__button-base; + @extend .__button-padding-vertical; + @extend .__button-padding-horizontal; + + background-color: $white; + + &:not(:hover) { + border-color: transparent; + box-shadow: 2px 2px 0 $black; + } + + &:hover { + border-color: $teal; + box-shadow: 2px 2px 0 $teal; + color: $teal; + } +} + +.__button-padding-vertical { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.__button-padding-horizontal { + padding-right: 1rem; + padding-left: 1rem; +} + + + +// G R I D + +.__grid { + &:first-of-type { + cursor: default; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.2rem; + text-transform: uppercase; + } + + &:not(:first-of-type) { + border-left: 1px solid $gray; + + .col { + border-bottom-style: solid; + border-bottom-width: 1px; + + &:last-of-type { + border-right-style: solid; + border-right-width: 1px; + } + + &:not(.red):not(.orange):not(.yellow):not(.green) { + border-color: $gray; + } + } + } + + @media (min-width: 600px) { + display: table; + table-layout: fixed; + width: 100%; + + .col { + display: table-cell; + } + } +} + +.col { + padding: 0.5rem 1rem; + width: 100%; + + &:not(:first-of-type) { + text-align: right; + } +} + +// Padded columns +.grid-padded { + @media (min-width: 600px) { + margin-right: -1rem; + margin-left: -1rem; + + .grid { + border-spacing: 1rem 0; + } + } +} + +// Vertically center grid content +// Requires content within the column to be inline/inline-block +.grid-align-middle .col { + vertical-align: middle; +} + +.grid-reverse { + direction: rtl; + + .col { + direction: ltr; + } +} diff --git a/.vuepress/scss/init/_mixins.scss b/.vuepress/scss/init/_mixins.scss new file mode 100644 index 0000000..6fbcfff --- /dev/null +++ b/.vuepress/scss/init/_mixins.scss @@ -0,0 +1,72 @@ +@mixin center { + align-items: center; + display: inline-flex; + justify-content: center; +} + + + +@mixin font-sans { + font-family: Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +@mixin font-serif { + font-family: Georgia, serif; +} + +@mixin font-mono { + font-family: "Courier New", monospace; +} + + + +@mixin clearfix { + clear: both; + content: ""; + display: block; +} + +@mixin hide-text { + border: 0; + color: transparent; + font: 0/0 a; + text-shadow: none; +} + +@mixin ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@mixin selection($background, $foreground) { + ::selection { + background-color: $background; + color: $foreground; + } + + ::-moz-selection { + background-color: $background; + color: $foreground; + } +} + + + +@mixin no-user-select { + user-select: none; + + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + + + +.clear { + @include clearfix; +} + +.hide-text { + @include hide-text; +} diff --git a/.vuepress/scss/pages/_home.scss b/.vuepress/scss/pages/_home.scss new file mode 100644 index 0000000..5c713cf --- /dev/null +++ b/.vuepress/scss/pages/_home.scss @@ -0,0 +1,105 @@ +.home { + h1, h2 { + text-align: center; + } + + h1 { + margin-bottom: 1rem; + text-transform: uppercase; + } + + h2 { + font-weight: 400; + margin-bottom: 4rem; + } + + hr { + width: 100%; height: 1px; + + background-color: rgba($black, 0.1); + border: none; + margin-bottom: 4rem; + } + + &.hero { + align-items: center; + background-color: $black; + background-image: url("../media/svg/text-logo--white.svg"); + background-position: center; + background-repeat: no-repeat; + display: flex; + height: calc(50vh - 4rem); + justify-content: center; + + h2 { + background-color: $white; + border: 1px solid rgba($black, 0.1); + box-decoration-break: clone; + display: inline; + line-height: 2; + padding: 0.4rem 1rem; + } + } + + &.features { + .home__features { + align-content: center; + border-bottom: 1px solid rgba($black, 0.05); + display: flex; + flex-flow: row wrap; + list-style-type: none; + padding-top: 2rem; + padding-bottom: 2rem; + } + + .home__feature { + position: relative; + text-align: center; + vertical-align: top; + width: 50%; + } + + + + .home__feature__title { + font-size: 2rem; + margin-bottom: 0.5rem; + } + + .home__feature__description { + font-size: 1rem; + left: 10%; + margin-bottom: 1rem; + position: relative; + width: 80%; + } + + .home__feature__cta { + @extend .__button-black; + display: inline-block; + font-size: 1rem; + position: relative; + } + } + + &.intro, + &.docs, + &.contribute, + &.develop, + &.community { + padding-top: 3rem; + padding-bottom: 3rem; + + h3 { + @extend .inner-wrap; + font-size: 3rem; + } + } + + &.intro, + &.docs, + &.contribute, + &.develop { + border-bottom: 1px solid rgba($black, 0.05); + } +} diff --git a/.vuepress/scss/partials/_navigation.scss b/.vuepress/scss/partials/_navigation.scss new file mode 100644 index 0000000..4f05bfb --- /dev/null +++ b/.vuepress/scss/partials/_navigation.scss @@ -0,0 +1,55 @@ +.navigation { + top: 0; left: 0; + + background-color: $white; + box-shadow: 0 1px 5px rgba($black, 0.1); + // color: $white; + position: fixed; + width: 100%; + z-index: 10; + + > div:first-of-type { + align-items: stretch; + display: flex; + flex-flow: row wrap; + } +} + +.navigation__item { + color: inherit; + font-size: 1rem; + line-height: 4rem; + overflow: hidden; + padding-right: 0.5rem; + padding-left: 0.5rem; + position: relative; + + &:first-of-type { + flex: 1; + } + + &:not(:first-of-type) { + &::after { + width: 100%; height: 3px; + + background-color: $teal; + content: ""; + left: 0; + position: absolute; + transition: bottom 0.2s; + } + + &:not(:hover) { + &::after { + bottom: -3px; + } + } + + &:hover, + &.active { + &::after { + bottom: 0; + } + } + } +} diff --git a/.vuepress/scss/type/_karla.scss b/.vuepress/scss/type/_karla.scss new file mode 100644 index 0000000..1635047 --- /dev/null +++ b/.vuepress/scss/type/_karla.scss @@ -0,0 +1,22 @@ +// via //brick.freetls.fastly.net/Karla:400,700,400i (brick.im) + +@font-face { + font-family: "Karla"; + font-style: normal; + font-weight: 400; + src: local("Karla Regular"), url(//brick.freetls.fastly.net/fonts/karla/400.woff) format("woff"); +} + +@font-face { + font-family: "Karla"; + font-style: italic; + font-weight: 400; + src: local("Karla Italic"), url(//brick.freetls.fastly.net/fonts/karla/400i.woff) format("woff"); +} + +@font-face { + font-family: "Karla"; + font-style: normal; + font-weight: 700; + src: local("Karla Bold"), url(//brick.freetls.fastly.net/fonts/karla/700.woff) format("woff"); +} diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue index 4af0442..9df844c 100644 --- a/.vuepress/theme/Layout.vue +++ b/.vuepress/theme/Layout.vue @@ -1,12 +1,14 @@