From d602c13b3b43622c5f4e6c62cac188e5c9f34b60 Mon Sep 17 00:00:00 2001 From: Bryan C Guner Date: Sun, 27 Feb 2022 22:16:45 +0000 Subject: [PATCH] -update --- src/sass/imports/_animations.scss | 24 +- src/sass/imports/_buttons.scss | 142 +-- src/sass/imports/_docs.scss | 565 +++++---- src/sass/imports/_footer.scss | 129 +- src/sass/imports/_forms.scss | 76 +- src/sass/imports/_functions.scss | 8 +- src/sass/imports/_general.scss | 1925 ++--------------------------- src/sass/imports/_header.scss | 575 +++++---- src/sass/imports/_helpers.scss | 244 ++-- src/sass/imports/_icons.scss | 144 +-- src/sass/imports/_palettes.scss | 92 +- src/sass/imports/_posts.scss | 230 ++-- src/sass/imports/_prism.scss | 102 +- src/sass/imports/_reset.scss | 150 +-- src/sass/imports/_sections.scss | 428 +++---- src/sass/imports/_structure.scss | 42 +- src/sass/imports/_tables.scss | 90 +- src/sass/imports/_variables.scss | 54 +- src/sass/main.scss | 34 +- 19 files changed, 1692 insertions(+), 3362 deletions(-) diff --git a/src/sass/imports/_animations.scss b/src/sass/imports/_animations.scss index df5a87c267..e99302c4c9 100644 --- a/src/sass/imports/_animations.scss +++ b/src/sass/imports/_animations.scss @@ -1,16 +1,16 @@ @-webkit-keyframes fadeIn20 { - 0% { - opacity: 0; - } - 100% { - opacity: 0.2; - } + 0% { + opacity: 0; + } + 100% { + opacity: 0.2; + } } @keyframes fadeIn20 { - 0% { - opacity: 0; - } - 100% { - opacity: 0.2; - } + 0% { + opacity: 0; + } + 100% { + opacity: 0.2; + } } diff --git a/src/sass/imports/_buttons.scss b/src/sass/imports/_buttons.scss index c98f57275f..0f334e5c5a 100644 --- a/src/sass/imports/_buttons.scss +++ b/src/sass/imports/_buttons.scss @@ -1,66 +1,66 @@ .button { - -ms-flex-align: center; - align-items: center; - background: $color-primary; - border: 0; - border-radius: 1.75em; - box-shadow: none; - box-sizing: border-box; - color: #fff; - cursor: pointer; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 0.875em; - font-weight: bold; - -ms-flex-pack: center; - justify-content: center; - letter-spacing: 0.035em; - line-height: 1.2; - opacity: 1; - padding: 0.9em 2.14285em; - text-decoration: none; - -webkit-transition: 0.3s ease; - transition: 0.3s ease; - vertical-align: middle; + -ms-flex-align: center; + align-items: center; + background: $color-primary; + border: 0; + border-radius: 1.75em; + box-shadow: none; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 0.875em; + font-weight: bold; + -ms-flex-pack: center; + justify-content: center; + letter-spacing: 0.035em; + line-height: 1.2; + opacity: 1; + padding: 0.9em 2.14285em; + text-decoration: none; + -webkit-transition: .3s ease; + transition: .3s ease; + vertical-align: middle; - &:hover, - &:focus, - &:active { - color: #fff; - opacity: 0.8; - outline: 0; - } + &:hover, + &:focus, + &:active { + color: #fff; + opacity: .8; + outline: 0; + } } .button-secondary { - background: 0 !important; - box-shadow: inset 0 0 0 2px currentColor; - color: $color-primary; + background: 0 !important; + box-shadow: inset 0 0 0 2px currentColor; + color: $color-primary; - &:hover, - &:focus, - &:active { - box-shadow: inset 0 0 0 3px currentColor; - color: $color-primary; - opacity: 1; - } + &:hover, + &:focus, + &:active { + box-shadow: inset 0 0 0 3px currentColor; + color: $color-primary; + opacity: 1; + } } .button-icon { - background: 0 !important; - border: 0; - color: inherit; - font-size: 1em; - font-weight: normal; - letter-spacing: normal; - padding: 0.25em; + background: 0 !important; + border: 0; + color: inherit; + font-size: 1em; + font-weight: normal; + letter-spacing: normal; + padding: 0.25em; - &:hover, - &:focus, - &:active { - color: $color-primary; - opacity: 1; - } + &:hover, + &:focus, + &:active { + color: $color-primary; + opacity: 1; + } } #menu-open, @@ -68,22 +68,22 @@ .docs-nav .docs-nav-toggle, .docs-nav .docs-submenu-toggle, .submenu-toggle { - background: 0; - border: 0; - border-radius: 0; - box-shadow: none; - color: inherit; - cursor: pointer; - display: block; - font-size: inherit; - height: 30px; - padding: 0; - position: relative; - width: 30px; + background: 0; + border: 0; + border-radius: 0; + box-shadow: none; + color: inherit; + cursor: pointer; + display: block; + font-size: inherit; + height: 30px; + padding: 0; + position: relative; + width: 30px; - &:hover, - &:focus, - &:active { - outline: 0; - } -} + &:hover, + &:focus, + &:active { + outline: 0; + } +} \ No newline at end of file diff --git a/src/sass/imports/_docs.scss b/src/sass/imports/_docs.scss index 1e30b2d1f4..c8a8ddd5a6 100644 --- a/src/sass/imports/_docs.scss +++ b/src/sass/imports/_docs.scss @@ -1,356 +1,355 @@ .docs-content { - padding-top: 2.5em; - width: 99%; + padding-top: 2.5em; } -.post-content { - width: 95%; -} -.post { - &.type-docs { - margin-bottom: 3.625em; - h1 { - font-size: 1.975em; - } +.post { + &.type-docs { + margin-bottom: 5.625em; + max-width: $container-md; - h2 { - font-size: 1.6em; - } + h1 { + font-size: 1.875em; + } + + h2 { + font-size: 1.5em; + } + + h3 { + font-size: 1.25em; + } + + h4 { + font-size: 1.125em; + } + + h5, + h6 { + font-size: 1em; + } - h3 { - font-size: 1.45em; - } + .hash-link { + float: left; + font-size: 1.25rem; + height: 1em; + line-height: 1; + margin-left: -1.1em; + opacity: 0; + text-align: center; + text-decoration: none; + -webkit-transition: opacity .2s; + transition: opacity .2s; + width: 1em; + + &:before { + content: "\0023"; + display: inline-block; + } + + &:hover, + &:focus { + color: $color-primary; + } + } - h4 { - font-size: 1.35em; - } + h2 { + .hash-link { + margin-top: 0.22em; + } + } - h5, - h6 { - font-size: 1.2em; - } + h3 { + .hash-link { + margin-top: 0.1em; + } + } + h2, + h3 { + &:hover, + &:focus { .hash-link { - float: left; - font-size: 1.25rem; - height: 1em; - line-height: 1; - margin-left: -1.1em; - opacity: 0; - text-align: center; - text-decoration: none; - -webkit-transition: opacity 0.2s; - transition: opacity 0.4s; - width: 1em; - - &:before { - content: '\0023'; - display: inline-block; - } - - &:hover, - &:focus { - color: $color-primary; - } - } - - h2 { - .hash-link { - margin-top: 0.22em; - } - } - - h3 { - .hash-link { - margin-top: 0.1em; - } - } - - h2, - h3 { - &:hover, - &:focus { - .hash-link { - opacity: 1; - } - } + opacity: 1; } + } + } - .post-inside { - background: #fff; - border: 1px solid $gray-300; - border-radius: $border-radius; - box-shadow: $box-shadow; - padding: 0.3em; - width: 70vw; - } + .post-inside { + background: #fff; + border: 1px solid $gray-300; + border-radius: $border-radius; + box-shadow: $box-shadow; + padding: 2.5em 0; + } - .post-title { - font-size: 1.875em; - margin: 0 0 1.25em; - padding: 0 2em; - } + .post-title { + font-size: 1.875em; + margin: 0 0 1.25em; + padding: 0 1em; + } - .post-content { - padding: 0.975em; - word-wrap: break-word; - } + .post-content { + padding: 0 1.875em; } + } } #docs-section-items { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - list-style: none; - margin-left: -0.3125em; - margin-right: -0.3125em; - padding: 0; - - .docs-section-item { - -ms-flex: 1 1 240px; - flex: 1 1 240px; - margin: 0 0.3125em 0.9375em; - } - - .docs-item-link { - border: 1px solid $gray-300; - border-radius: $border-radius-sm; - color: $gray-700; - display: block; - font-weight: bold; - padding: 0.9375em; - position: relative; - text-decoration: none; - -webkit-transition: border-color 0.3s ease, color 0.3s ease; - transition: border-color 0.3s ease, color 0.3s ease; - - &:hover { - border-color: $color-primary; - color: $color-primary; - } + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + list-style: none; + margin-left: -0.3125em; + margin-right: -0.3125em; + padding: 0; + + .docs-section-item { + -ms-flex: 1 1 240px; + flex: 1 1 240px; + margin: 0 0.3125em 0.9375em; + } + + .docs-item-link { + border: 1px solid $gray-300; + border-radius: $border-radius-sm; + color: $gray-700; + display: block; + font-weight: bold; + padding: 0.9375em; + position: relative; + text-decoration: none; + -webkit-transition: border-color .3s ease, color .3s ease; + transition: border-color .3s ease, color .3s ease; + + &:hover { + border-color: $color-primary; + color: $color-primary; } + } } .docs-nav { - margin-bottom: 1.875em; + margin-bottom: 1.875em; - .docs-nav-toggle { - color: $gray-700; - font-size: 1.125em; - margin: 0; - padding-right: 15px; - text-align: left; - } - - .docs-submenu-toggle { - color: $gray-500; - position: absolute; - right: 0; - top: 0; - } + .docs-nav-toggle { + color: $gray-700; + font-size: 1.125em; + margin: 0; + padding-right: 30px; + text-align: left; + width: 100%; + } + + .docs-submenu-toggle { + color: $gray-500; + position: absolute; + right: 0; + top: 0; + } } #docs-menu { - color: $gray-700; - font-weight: bold; - line-height: 1.5; - list-style: none; - margin: 0.7em; - padding: 0; - - & > .docs-menu-item > a { - padding: 0.3em 0; - border-radius: 20px; - - margin: auto; - } - - a { - color: inherit; - display: block; - text-decoration: none; + color: $gray-700; + font-weight: bold; + line-height: 1.5; + list-style: none; + margin: 0; + padding: 0; + + & > .docs-menu-item > a { + padding: 0.1875em 0; + } + + a { + color: inherit; + display: block; + text-decoration: none; - &:hover { - color: $color-primary; - } + &:hover { + color: $color-primary; } + } - .current, - .current-parent { - color: $color-primary; - } + .current, + .current-parent { + color: $color-primary; + } } .docs-submenu { - border-left: 1px solid $gray-300; - color: $gray-600; - display: none; - font-size: 1; - font-weight: normal; - list-style: none; - margin-top: 0.625rem; - padding-left: 1rem; + border-left: 1px solid $gray-300; + color: $gray-600; + display: none; + font-size: 0.9375em; + font-weight: normal; + list-style: none; + margin-top: 0.625rem; + padding-left: 1.25rem; } .docs-menu-item { - color: inherit; - margin-bottom: 0.625rem; - - &.has-children { - padding-right: 20px; - position: relative; - - &.active { - .docs-submenu { - display: block; - } - - & > .docs-submenu-toggle { - .icon-angle-right { - -webkit-transform: rotate(135deg); - transform: rotate(135deg); - } - } + color: inherit; + margin-bottom: 0.625rem; + + &.has-children { + padding-right: 30px; + position: relative; + + &.active { + .docs-submenu { + display: block; + } + + & > .docs-submenu-toggle { + .icon-angle-right { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); } + } } + } } #page-nav { - text-overflow: wrap; + display: none; - .page-nav-title { - font-size: 1em; - margin: 0 0 0.625em; - } + .page-nav-title { + font-size: 1em; + margin: 0 0 0.625em; + } + + ul { + font-size: 0.875rem; + line-height: 1.5; + list-style: none; + padding: 0; ul { - font-size: 0.875rem; - line-height: 1.5; - list-style: none; - padding: 0; - - ul { - border-left: 1px solid $gray-300; - margin-top: 0.625rem; - padding-left: 1.25rem; - } + border-left: 1px solid $gray-300; + margin-top: 0.625rem; + padding-left: 1.25rem; } + } - li { - margin-bottom: 0.625rem; + li { + margin-bottom: 0.625rem; - &.active > a { - color: $color-primary; - } + &.active > a { + color: $color-primary; } + } - a { - color: $gray-600; - display: block; - text-decoration: none; + a { + color: $gray-600; + display: block; + text-decoration: none; - &:hover { - color: $color-primary; - } + &:hover { + color: $color-primary; } + } - .page-nav-title { - &:only-child { - display: none; - } + .page-nav-inside { + display: none; + + &.has-links { + display: block; } + } } -@media only screen and (min-width: 1200px) { - .post { - &.type-docs { - .post-title, - .post-content { - padding-left: 8%; - padding-right: 7%; - } - } +@media only screen and (min-width: 641px) { + .post { + &.type-docs { + .post-title, + .post-content { + padding-left: 7%; + padding-right: 7%; + } } + } } -@media only screen and (min-width: 1200px) { - .docs-content { - display: -ms-flexbox; - display: flex; - padding-top: 4em; - width: 94%; - } - - .post.type-docs { - -ms-flex: 1 1 auto; - align-content: center; - } - - .docs-nav, - .page-nav { - -ms-flex-negative: 0; - margin-bottom: 5.625em; - - .sticky { - position: -webkit-sticky; - position: sticky; - top: 1.875em; - } +@media only screen and (min-width: 801px) { + .docs-content { + display: -ms-flexbox; + display: flex; + padding-top: 3.75em; + } + + .post.type-docs { + -ms-flex: 1 1 auto; + flex: 1 1 auto; + overflow: hidden; + } + + .docs-nav, + .page-nav { + -ms-flex-negative: 0; + flex-shrink: 0; + margin-bottom: 5.625em; + + .sticky { + position: -webkit-sticky; + position: sticky; + top: 1.875em; } + } - .docs-nav { - width: 0.5em; - } + .docs-nav { + padding-right: 1.5em; + width: 12.5em; + } - #page-nav { - font-size: 12px; - margin: 4em; - } + #page-nav { + padding-left: 1.5em; + width: 9.5em; + } - #docs-nav-toggle { - display: none; - } + #docs-nav-toggle { + display: none; + } } @media only screen and (min-width: 1091px) { - #page-nav { - display: block; - } + #page-nav { + display: block; + } } @media only screen and (max-width: 800px) { - .docs-nav { - background: #fff; - border: 1px solid $gray-300; - border-radius: $border-radius; - box-shadow: $box-shadow; - box-sizing: border-box; - margin-bottom: 5%; - padding: 1em 1em; - } + .docs-nav { + background: #fff; + border: 1px solid $gray-300; + border-radius: $border-radius; + box-shadow: $box-shadow; + box-sizing: border-box; + margin-bottom: 5%; + padding: 0.75em 1em; + } + + .docs-nav-menu { + display: none; + } + .docs-menu--opened { .docs-nav-menu { - display: none; + display: block; } - .docs-menu--opened { - .docs-nav-menu { - display: block; - } - - .docs-nav-toggle { - .icon-angle-right { - -webkit-transform: rotate(135deg); - transform: rotate(135deg); - } - } + .docs-nav-toggle { + .icon-angle-right { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + } } + } - #docs-menu { - border-top: 1px solid $gray-300; - margin-top: 1.25em; - padding-top: 1.25em; - } + #docs-menu { + border-top: 1px solid $gray-300; + margin-top: 1.25em; + padding-top: 1.25em; + } } + diff --git a/src/sass/imports/_footer.scss b/src/sass/imports/_footer.scss index 9db47f09a9..c57c80a530 100644 --- a/src/sass/imports/_footer.scss +++ b/src/sass/imports/_footer.scss @@ -1,94 +1,89 @@ .site-footer { - background-color: black; - background-image: url('https://i.imgur.com/CEYEZp8.jpeg'); - padding-bottom: 7.5em; - padding-top: 8.5em; - color: white !important; - border: 4px solid black; + background-color: #fff; + padding-bottom: 1.5em; + padding-top: 1.5em; } #colophon { - a:not(.button) { - color: inherit; + a:not(.button) { + color: inherit; - &:hover, - &:focus { - color: $color-primary; - } + &:hover, + &:focus { + color: $color-primary; } + } } .site-info, .social-links { - -ms-flex-align: center; - align-items: center; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-pack: center; - justify-content: center; - font-size: 0.675em; - line-height: 1.2; + -ms-flex-align: center; + align-items: center; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-pack: center; + justify-content: center; + font-size: 0.875em; + line-height: 1.2; - .button:not(.button-icon) { - font-size: inherit; - line-height: 1.2; - padding: 0.3em 1em; - } + .button:not(.button-icon) { + font-size: inherit; + line-height: 1.2; + padding: 0.3em 1em; + } } .site-info { - margin: 0.25em 0 0; - text-align: center; + margin: 0.25em 0 0; + text-align: center; - .copyright, - > a { - margin: 0 4px 0.2em 0; - } + .copyright, + > a { + margin: 0 8px 0.5em 0; + } } .social-links { - margin-top: 0.5375em; + margin-top: 0.9375em; - a { - margin: 0 50px 0.2em; - } + a { + margin: 0 10px 0.5em; + } - .icon { - font-size: 20px; - color: rgb(0, 0, 0); - background-color: rgb(0, 0, 0); - } + .icon { + font-size: 20px; + } } @media only screen and (min-width: 641px) { - .site-footer-inside { - -ms-flex-align: start; - align-items: flex-start; - display: -ms-flexbox; - display: flex; - } + .site-footer-inside { + -ms-flex-align: start; + align-items: flex-start; + display: -ms-flexbox; + display: flex; + } - .site-info { - -ms-flex-pack: start; - justify-content: flex-start; - text-align: left; - } + .site-info { + -ms-flex-pack: start; + justify-content: flex-start; + text-align: left; + } - .social-links { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -ms-flex-pack: start; - justify-content: flex-start; - margin-left: auto; - margin-top: 0; + .social-links { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -ms-flex-pack: start; + justify-content: flex-start; + margin-left: auto; + margin-top: 0; - a { - margin-left: 20px; - margin-right: 0; - } + a { + margin-left: 20px; + margin-right: 0; } -} + } +} \ No newline at end of file diff --git a/src/sass/imports/_forms.scss b/src/sass/imports/_forms.scss index 689f68c032..4bc74865f1 100644 --- a/src/sass/imports/_forms.scss +++ b/src/sass/imports/_forms.scss @@ -1,55 +1,55 @@ label { - color: $gray-700; - font-weight: bold; - line-height: 1.5; - margin-bottom: 0.25em; + color: $gray-700; + font-weight: bold; + line-height: 1.5; + margin-bottom: 0.25em; - input[type='checkbox'] + &, - input[type='radio'] + & { - font-weight: normal; - cursor: pointer; - padding-left: 0.25em; - padding-right: 1em; - } + input[type=checkbox] + &, + input[type=radio] + & { + font-weight: normal; + cursor: pointer; + padding-left: 0.25em; + padding-right: 1em; + } } -input[type='text'], -input[type='password'], -input[type='email'], -input[type='tel'], -input[type='number'], -input[type='search'], -input[type='url'], +input[type="text"], +input[type="password"], +input[type="email"], +input[type="tel"], +input[type="number"], +input[type="search"], +input[type="url"], select, textarea { - background: #fff; - border: 1px solid $gray-300; - border-radius: $border-radius-sm; - box-shadow: none; - box-sizing: border-box; - color: $gray-700; - display: block; - font-size: 1em; - font-weight: normal; - line-height: 1.5; - max-width: 100%; - padding: 0.5em; - width: 100%; + background: #fff; + border: 1px solid $gray-300; + border-radius: $border-radius-sm; + box-shadow: none; + box-sizing: border-box; + color: $gray-700; + display: block; + font-size: 1em; + font-weight: normal; + line-height: 1.5; + max-width: 100%; + padding: 0.5em; + width: 100%; - &:focus { - outline: 0; - } + &:focus { + outline: 0; + } } ::placeholder { - color: $gray-400; - opacity: 1; + color: $gray-400; + opacity: 1; } .form-row { - margin-bottom: 1em; + margin-bottom: 1em; } .form-submit { - margin-top: 1.66667em; + margin-top: 1.66667em; } diff --git a/src/sass/imports/_functions.scss b/src/sass/imports/_functions.scss index a0e86db462..1f996f61aa 100644 --- a/src/sass/imports/_functions.scss +++ b/src/sass/imports/_functions.scss @@ -1,7 +1,7 @@ // Gets a value from a map. @function map-deep-get($map, $keys...) { - @each $key in $keys { - $map: map-get($map, $key); - } - @return $map; + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; } diff --git a/src/sass/imports/_general.scss b/src/sass/imports/_general.scss index a0422eab4e..8cb61b0f6c 100644 --- a/src/sass/imports/_general.scss +++ b/src/sass/imports/_general.scss @@ -1,65 +1,28 @@ html { - font-family: $font-primary; - font-size: 100%; + font-family: $font-primary; + font-size: 100%; } body { - background: $gray-100; - color: $gray-600; - line-height: 1.425; - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - overflow: scroll; + background: $gray-100; + color: $gray-600; + line-height: 1.625; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } a { - color: $color-primary; - text-decoration: underline; - -webkit-transition: color 0.3s ease; - transition: color 0.4s ease-out; - - &:hover { - color: $gray-600; - } -} - -#social-embed { - // position: absolute !important; - // right: 50px !important; - bottom: 120px !important; - width: 100% !important; - width: 1000px !important; - box-shadow: inset 0px 5px 3px -10px black, inset 0px -11px 8px -10px black; - margin: 0 auto !important; - height: 400px !important; - overflow: scroll !important; - border: 1px dotted black; - // z-index: -1; -} - -iframe { - overflow-y: scroll; - overflow-x: scroll; - border-radius: 12px; - border: 1px dotted black; - height: 1200px; - box-shadow: inset 0px 4px 4px -10px black, inset 0px -11px 8px -10px black; - width: 1000px; - resize: both !important; - overflow: scroll; -} - -code { - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -} - -pre { - -webkit-box-shadow: 0 1px 4px rgba(155, 155, 155, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0 1px 4px rgba(124, 124, 124, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0 1px 4px rgba(184, 137, 137, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + color: $color-primary; + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.125em; + -webkit-transition: color .3s ease; + transition: color .3s ease; + + &:hover { + color: $gray-600; + } } h1, @@ -68,1814 +31,188 @@ h3, h4, h5, h6 { - color: $gray-700; - font-weight: bold; - line-height: 1.2; - margin: 1.5em 0 0.5em; - text-rendering: optimizeLegibility; + color: $gray-700; + font-weight: bold; + line-height: 1.2; + margin: 1.5em 0 0.5em; + text-rendering: optimizeLegibility; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } } h1 { - font-size: 2em; + font-size: 2em; } h2 { - font-size: 1.75em; + font-size: 1.75em; } h3 { - font-size: 1.5em; + font-size: 1.5em; } h4 { - font-size: 1.25em; + font-size: 1.25em; } h5 { - font-size: 1.125em; + font-size: 1.125em; } h6 { - font-size: 1em; + font-size: 1em; } p { - margin: 0 0 1em; + margin: 0 0 1em; } mark, ins { - background: $yellow-pale; - color: $gray-700; - padding: 0.15em; - text-decoration: none; + background: $yellow-pale; + color: $gray-700; + padding: 0.15em; + text-decoration: none; } pre { - background: $gray-700; - border-radius: $border-radius-sm; - color: $gray-100; - font-size: 0.875em; - line-height: 1.5; - margin: 1.14286em 0; - overflow: auto; - padding: 1.5em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - - &:first-child { - margin-top: 0; - } + background: $gray-700; + border-radius: $border-radius-sm; + color: $gray-100; + font-size: 0.875em; + line-height: 1.5; + margin: 2.14286em 0; + overflow: auto; + padding: 1.5em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + &:first-child { + margin-top: 0; + } } :not(pre) > code { - background: $gray-200; - border-radius: $border-radius-sm; - color: $gray-600; - font-size: 0.875rem; - padding: 0.15em; - white-space: normal; + background: $gray-200; + border-radius: $border-radius-sm; + color: $gray-600; + font-size: 0.875rem; + padding: 0.15em; + white-space: normal; } blockquote { - border-left: 5px solid $color-primary; - font-size: 1.25em; - line-height: 1.4; - margin: 1.25em 0; - padding: 0 0 0 1em; - - &:first-child { - margin-top: 0; - } - - p { - margin-bottom: 0.5em; - } - - small, - cite { - color: $gray-500; - display: block; - font-size: 0.75em; - font-style: normal; - font-weight: normal; - line-height: 1.5; - margin-top: 0.5em; - } + border-left: 5px solid $color-primary; + font-size: 1.25em; + line-height: 1.4; + margin: 1.25em 0; + padding: 0 0 0 1em; + + &:first-child { + margin-top: 0; + } + + p { + margin-bottom: 0.5em; + } + + small, + cite { + color: $gray-500; + display: block; + font-size: 0.75em; + font-style: normal; + font-weight: normal; + line-height: 1.5; + margin-top: 0.5em; + } } dl { - margin: 0; + margin: 0; } dt { - font-weight: bold; + font-weight: bold; } ul, ol, dd { - margin: 0 0 1em; + margin: 0 0 1em; } ul { - list-style: disc; - padding: 0 0 0 1.125em; + list-style: disc; + padding: 0 0 0 1.125em; } ol { - list-style: decimal; - padding: 0 0 0 1.5em; + list-style: decimal; + padding: 0 0 0 1.5em; } li > ul, li > ol { - margin-bottom: 0; + margin-bottom: 0; } hr { - background-color: $gray-300; - border: 0; - height: 1px; - margin: 1.875em 0; - - &:first-child { - margin-top: 0; - } -} - -img { - height: auto; - max-width: 100%; - border-radius: 10px; - - :not(.site-logo) { - box-shadow: inset 10px 10px 50px #fff; - } -} - -@media only screen and (min-width: 741px) { - blockquote { - font-size: 1.5em; - line-height: 1.3; - } - - h1 { - font-size: 2.5em; - } - - h2 { - font-size: 2.125em; - } - - h3 { - font-size: 1.875em; - } - - h4 { - font-size: 1.5em; - } - - h5 { - font-size: 1.25em; - } - - h6 { - font-size: 1.125em; - } -} - -/****************PRISM*****************************************/ - -code[class*='language-'], -pre[class*='language-'] { - color: #fff; - background: 0 0; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - text-shadow: 0 -0.1em 0.2em #000; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -:not(pre) > code[class*='language-'], -pre[class*='language-'] { - background: #141414; -} - -pre[class*='language-'] { - border-radius: 0.5em; - border: 0.3em solid #545454; - box-shadow: 1px 1px 0.5em #000 inset; - margin: 0.5em 0; - overflow: auto; - padding: 1em; -} - -pre[class*='language-']::-moz-selection { - background: #27292a; -} - -pre[class*='language-']::selection { - background: #27292a; -} - -code[class*='language-'] ::-moz-selection, -code[class*='language-']::-moz-selection, -pre[class*='language-'] ::-moz-selection, -pre[class*='language-']::-moz-selection { - text-shadow: none; - background: hsla(0, 0%, 93%, 0.15); -} - -code[class*='language-'] ::selection, -code[class*='language-']::selection, -pre[class*='language-'] ::selection, -pre[class*='language-']::selection { - text-shadow: none; - background: hsla(0, 0%, 93%, 0.15); -} - -:not(pre) > code[class*='language-'] { - border-radius: 0.3em; - border: 0.13em solid #545454; - box-shadow: 1px 1px 0.3em -0.1em #000 inset; - padding: 0.15em 0.2em 0.05em; - white-space: normal; -} - -.token.cdata, -.token.comment, -.token.doctype, -.token.prolog { - color: #777; -} - -.token.punctuation { - opacity: 0.7; -} - -.token.namespace { - opacity: 0.7; -} - -.token.boolean, -.token.deleted, -.token.number, -.token.tag { - color: #ce6849; -} - -.token.builtin, -.token.constant, -.token.keyword, -.token.property, -.token.selector, -.token.symbol { - color: #f9ed99; -} - -.language-css .token.string, -.style .token.string, -.token.attr-name, -.token.attr-value, -.token.char, -.token.entity, -.token.inserted, -.token.operator, -.token.string, -.token.url, -.token.variable { - color: #909e6a; -} - -.token.atrule { - color: #7385a5; -} - -.token.important, -.token.regex { - color: #e8c062; -} - -.token.bold, -.token.important { - font-weight: 700; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.language-markup .token.attr-name, -.language-markup .token.punctuation, -.language-markup .token.tag { - color: #ac885c; -} - -.token { - position: relative; - z-index: 1; -} - -.line-highlight.line-highlight { - background: hsla(0, 0%, 33%, 0.25); - background: linear-gradient(to right, hsla(0, 0%, 33%, 0.1) 70%, hsla(0, 0%, 33%, 0)); - border-bottom: 1px dashed #545454; - border-top: 1px dashed #545454; - margin-top: 0.75em; - z-index: 0; -} - -.line-highlight.line-highlight:before, -.line-highlight.line-highlight[data-end]:after { - background-color: #8693a6; - color: #f4f1ef; -} - -/**********************Algolia CSS*********************/ - -/*! @algolia/autocomplete-theme-classic 1.5.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */ -:root { - --aa-search-input-height: 44px; - --aa-input-icon-size: 20px; - --aa-base-unit: 16; - --aa-spacing-factor: 1; - --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); - --aa-spacing-half: calc(var(--aa-spacing) / 2); - --aa-panel-max-height: 650px; - --aa-base-z-index: 9999; - --aa-font-size: calc(var(--aa-base-unit) * 1px); - --aa-font-family: inherit; - --aa-font-weight-medium: 500; - --aa-font-weight-semibold: 600; - --aa-font-weight-bold: 700; - --aa-icon-size: 20px; - --aa-icon-stroke-width: 1.6; - --aa-icon-color-rgb: 119, 119, 163; - --aa-icon-color-alpha: 1; - --aa-action-icon-size: 20px; - --aa-text-color-rgb: 38, 38, 39; - --aa-text-color-alpha: 1; - --aa-primary-color-rgb: 62, 52, 211; - --aa-primary-color-alpha: 0.2; - --aa-muted-color-rgb: 128, 126, 163; - --aa-muted-color-alpha: 0.6; - --aa-panel-border-color-rgb: 128, 126, 163; - --aa-panel-border-color-alpha: 0.3; - --aa-input-border-color-rgb: 128, 126, 163; - --aa-input-border-color-alpha: 0.8; - --aa-background-color-rgb: 255, 255, 255; - --aa-background-color-alpha: 1; - --aa-input-background-color-rgb: 255, 255, 255; - --aa-input-background-color-alpha: 1; - --aa-selected-color-rgb: 179, 173, 214; - --aa-selected-color-alpha: 0.205; - --aa-description-highlight-background-color-rgb: 245, 223, 77; - --aa-description-highlight-background-color-alpha: 0.5; - --aa-detached-media-query: (max-width: 680px); - --aa-detached-modal-media-query: (min-width: 680px); - --aa-detached-modal-max-width: 680px; - --aa-detached-modal-max-height: 500px; - --aa-overlay-color-rgb: 115, 114, 129; - --aa-overlay-color-alpha: 0.4; - --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); - --aa-scrollbar-width: 13px; - --aa-scrollbar-track-background-color-rgb: 234, 234, 234; - --aa-scrollbar-track-background-color-alpha: 1; - --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb); - --aa-scrollbar-thumb-background-color-alpha: 1; -} - -@media (hover: none) and (pointer: coarse) { - :root { - --aa-spacing-factor: 1.2; - --aa-action-icon-size: 22px; - } -} - -body.dark, -body[data-theme='dark'] { - --aa-text-color-rgb: 183, 192, 199; - --aa-primary-color-rgb: 146, 138, 255; - --aa-muted-color-rgb: 146, 138, 255; - --aa-input-background-color-rgb: 0, 3, 9; - --aa-background-color-rgb: 21, 24, 42; - --aa-selected-color-rgb: 146, 138, 255; - --aa-selected-color-alpha: 0.25; - --aa-description-highlight-background-color-rgb: 0 255 255; - --aa-description-highlight-background-color-alpha: 0.25; - --aa-icon-color-rgb: 119, 119, 163; - --aa-panel-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; - --aa-scrollbar-track-background-color-rgb: 44, 46, 64; - --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb); -} - -.aa-Autocomplete *, -.aa-DetachedFormContainer *, -.aa-Panel * { - box-sizing: border-box; -} - -.aa-Autocomplete, -.aa-DetachedFormContainer, -.aa-Panel { - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-family: inherit; - font-family: var(--aa-font-family); - font-size: 16px; - font-size: var(--aa-font-size); - font-weight: 400; - line-height: 1em; - margin: 0; - padding: 0; - text-align: left; -} - -.aa-Form { - align-items: center; - background-color: #fff; - background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha)); - border: 1px solid rgba(128, 126, 163, 0.8); - border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha)); - border-radius: 3px; - display: flex; - line-height: 1em; - margin: 0; - position: relative; - width: 100%; -} - -.aa-Form[focus-within] { - border-color: #3e34d3; - border-color: rgba(var(--aa-primary-color-rgb), 1); - box-shadow: 0 0 0 2px rgba(62, 52, 211, 0.2), inset 0 0 0 2px rgba(62, 52, 211, 0.2); - box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px, - inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px; - outline: medium none currentColor; -} - -.aa-Form:focus-within { - border-color: #3e34d3; - border-color: rgba(var(--aa-primary-color-rgb), 1); - box-shadow: 0 0 0 2px rgba(62, 52, 211, 0.2), inset 0 0 0 2px rgba(62, 52, 211, 0.2); - box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px, - inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px; - outline: medium none currentColor; -} - -.aa-InputWrapperPrefix { - align-items: center; - display: flex; - flex-shrink: 0; - height: 44px; - height: var(--aa-search-input-height); - order: 1; -} - -.aa-Label, -.aa-LoadingIndicator { - cursor: auto; - flex-shrink: 0; - height: 100%; - padding: 0; - text-align: left; -} - -.aa-Label svg, -.aa-LoadingIndicator svg { - color: #3e34d3; - color: rgba(var(--aa-primary-color-rgb), 1); - height: auto; - max-height: 20px; - max-height: var(--aa-input-icon-size); - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - width: 20px; - width: var(--aa-input-icon-size); -} - -.aa-LoadingIndicator, -.aa-SubmitButton { - height: 100%; - padding-left: 11px; - padding-left: calc(var(--aa-spacing) * 0.75 - 1px); - padding-right: 8px; - padding-right: var(--aa-spacing-half); - width: 47px; - width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px); -} - -@media (hover: none) and (pointer: coarse) { - .aa-LoadingIndicator, - .aa-SubmitButton { - padding-left: 3px; - padding-left: calc(var(--aa-spacing-half) / 2 - 1px); - width: 39px; - width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px); - } -} - -.aa-SubmitButton { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - border: 0; - margin: 0; -} - -.aa-LoadingIndicator { - align-items: center; - display: flex; - justify-content: center; -} - -.aa-LoadingIndicator[hidden] { - display: none; -} - -.aa-InputWrapper { - order: 3; - position: relative; - width: 100%; -} - -.aa-Input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - border: 0; - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font: inherit; - height: 44px; - height: var(--aa-search-input-height); - padding: 0; - width: 100%; -} - -.aa-Input::-moz-placeholder { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - opacity: 1; -} - -.aa-Input:-ms-input-placeholder { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - opacity: 1; -} - -.aa-Input::placeholder { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - opacity: 1; -} - -.aa-Input:focus { - border-color: none; - box-shadow: none; - outline: none; -} - -.aa-Input::-webkit-search-cancel-button, -.aa-Input::-webkit-search-decoration, -.aa-Input::-webkit-search-results-button, -.aa-Input::-webkit-search-results-decoration { - -webkit-appearance: none; - appearance: none; -} - -.aa-InputWrapperSuffix { - align-items: center; - display: flex; - height: 44px; - height: var(--aa-search-input-height); - order: 4; -} - -.aa-ClearButton { - align-items: center; - background: none; - border: 0; - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - cursor: pointer; - display: flex; - height: 100%; - margin: 0; - padding: 0 12.8333333333px; - padding: 0 calc(var(--aa-spacing) * 0.83333 - 0.5px); -} - -@media (hover: none) and (pointer: coarse) { - .aa-ClearButton { - padding: 0 10.1666666667px; - padding: 0 calc(var(--aa-spacing) * 0.66667 - 0.5px); - } -} - -.aa-ClearButton:focus, -.aa-ClearButton:hover { - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); -} - -.aa-ClearButton[hidden] { - display: none; -} - -.aa-ClearButton svg { - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - width: 20px; - width: var(--aa-icon-size); -} - -.aa-Panel { - background-color: #fff; - background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - border-radius: 4px; - border-radius: calc(var(--aa-spacing) / 4); - box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); - box-shadow: var(--aa-panel-shadow); - margin: 8px 0 0; - overflow: hidden; - position: absolute; - transition: opacity 0.2s ease-in, filter 0.2s ease-in; -} - -@media screen and (prefers-reduced-motion) { - .aa-Panel { - transition: none; - } -} - -.aa-Panel button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - border: 0; - margin: 0; - padding: 0; -} - -.aa-PanelLayout { - height: 100%; - margin: 0; - max-height: 650px; - max-height: var(--aa-panel-max-height); - overflow-y: auto; - padding: 0; - position: relative; - text-align: left; -} - -.aa-PanelLayoutColumns--twoGolden { - display: grid; - grid-template-columns: 39.2% auto; - overflow: hidden; - padding: 0; -} - -.aa-PanelLayoutColumns--two { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - overflow: hidden; - padding: 0; -} - -.aa-PanelLayoutColumns--three { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - overflow: hidden; - padding: 0; -} - -.aa-Panel--stalled .aa-Source { - filter: grayscale(1); - opacity: 0.8; -} - -.aa-Panel--scrollable { - margin: 0; - max-height: 650px; - max-height: var(--aa-panel-max-height); - overflow-x: hidden; - overflow-y: auto; - padding: 8px; - padding: var(--aa-spacing-half); - scrollbar-color: #fff #eaeaea; - scrollbar-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha)) - rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha)); - scrollbar-width: thin; -} - -.aa-Panel--scrollable::-webkit-scrollbar { - width: 13px; - width: var(--aa-scrollbar-width); -} - -.aa-Panel--scrollable::-webkit-scrollbar-track { - background-color: #eaeaea; - background-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha)); -} - -.aa-Panel--scrollable::-webkit-scrollbar-thumb { - background-color: #fff; - background-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha)); - border-radius: 9999px; - border: 3px solid #eaeaea; - border-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha)); - border-right: 2px solid rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha)); -} - -.aa-Source { - margin: 0; - padding: 0; - position: relative; - width: 100%; -} - -.aa-Source:empty { - display: none; -} - -.aa-SourceNoResults { - font-size: 1em; - margin: 0; - padding: 16px; - padding: var(--aa-spacing); -} - -.aa-List { - list-style: none; - margin: 0; -} - -.aa-List, -.aa-SourceHeader { - padding: 0; - position: relative; -} - -.aa-SourceHeader { - margin: 8px 0.5em 8px 0; - margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0; -} - -.aa-SourceHeader:empty { - display: none; -} - -.aa-SourceHeaderTitle { - background: #fff; - background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - color: #3e34d3; - color: rgba(var(--aa-primary-color-rgb), 1); - display: inline-block; - font-size: 0.8em; - font-weight: 600; - font-weight: var(--aa-font-weight-semibold); - margin: 0; - padding: 0 8px 0 0; - padding: 0 var(--aa-spacing-half) 0 0; - position: relative; - z-index: 9999; - z-index: var(--aa-base-z-index); -} - -.aa-SourceHeaderLine { - border-bottom: 1px solid #3e34d3; - border-bottom: 1px solid rgba(var(--aa-primary-color-rgb), 1); - display: block; - height: 2px; - left: 0; - margin: 0; - opacity: 0.3; - padding: 0; - position: absolute; - right: 0; - top: 8px; - top: var(--aa-spacing-half); - z-index: 9998; - z-index: calc(var(--aa-base-z-index) - 1); -} + background-color: $gray-300; + border: 0; + height: 1px; + margin: 1.875em 0; -.aa-SourceFooterSeeAll { - background: linear-gradient(180deg, #fff, rgba(128, 126, 163, 0.14)); - background: linear-gradient(180deg, rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)), rgba(128, 126, 163, 0.14)); - border: 1px solid rgba(128, 126, 163, 0.6); - border: 1px solid rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - border-radius: 5px; - box-shadow: inset 0 0 2px #fff, 0 2px 2px -1px rgba(76, 69, 88, 0.15); - color: inherit; - font-size: 0.95em; - font-weight: 500; - font-weight: var(--aa-font-weight-medium); - padding: 0.475em 1em 0.6em; - text-decoration: none; + &:first-child { + margin-top: 0; + } } -.aa-SourceFooterSeeAll:focus, -.aa-SourceFooterSeeAll:hover { - border: 1px solid #3e34d3; - border: 1px solid rgba(var(--aa-primary-color-rgb), 1); - color: #3e34d3; - color: rgba(var(--aa-primary-color-rgb), 1); +embed, +iframe, +object, +video { + max-width: 100%; } -.aa-Item { - align-items: center; - border-radius: 3px; - cursor: pointer; - display: grid; - min-height: 40px; - min-height: calc(var(--aa-spacing) * 2.5); - padding: 4px; - padding: calc(var(--aa-spacing-half) / 2); -} - -.aa-Item[aria-selected='true'] { - background-color: rgba(179, 173, 214, 0.205); - background-color: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha)); -} - -.aa-Item[aria-selected='true'] .aa-ActiveOnly, -.aa-Item[aria-selected='true'] .aa-ItemActionButton { - visibility: visible; -} - -.aa-ItemIcon { - align-items: center; - background: #fff; - background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - border-radius: 3px; - box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); - box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); - color: #7777a3; - color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha)); - display: flex; - flex-shrink: 0; - font-size: 0.7em; - height: 28px; - height: calc(var(--aa-icon-size) + var(--aa-spacing-half)); - justify-content: center; - overflow: hidden; - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - text-align: center; - width: 28px; - width: calc(var(--aa-icon-size) + var(--aa-spacing-half)); -} - -.aa-ItemIcon img { - height: auto; - max-height: 20px; - max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); - max-width: 20px; - max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); - width: auto; -} - -.aa-ItemIcon svg { - height: 20px; - height: var(--aa-icon-size); - width: 20px; - width: var(--aa-icon-size); -} - -.aa-ItemIcon--alignTop { - align-self: flex-start; -} - -.aa-ItemIcon--noBorder { - background: none; - box-shadow: none; -} - -.aa-ItemIcon--picture { - height: 96px; - width: 96px; -} - -.aa-ItemIcon--picture img { - max-height: 100%; - max-width: 100%; - padding: 8px; - padding: var(--aa-spacing-half); -} - -.aa-ItemContent { - align-items: center; - cursor: pointer; - display: grid; - grid-gap: 8px; - gap: 8px; - grid-gap: var(--aa-spacing-half); - gap: var(--aa-spacing-half); - grid-auto-flow: column; - line-height: 1.25em; - overflow: hidden; -} - -.aa-ItemContent:empty { - display: none; -} - -.aa-ItemContent mark { - background: none; - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-style: normal; - font-weight: 700; - font-weight: var(--aa-font-weight-bold); -} - -.aa-ItemContent--dual { - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: left; -} - -.aa-ItemContent--dual .aa-ItemContentSubtitle, -.aa-ItemContent--dual .aa-ItemContentTitle { - display: block; -} - -.aa-ItemContent--indented { - padding-left: 36px; - padding-left: calc(var(--aa-icon-size) + var(--aa-spacing)); -} - -.aa-ItemContentBody { - display: grid; - grid-gap: 4px; - gap: 4px; - grid-gap: calc(var(--aa-spacing-half) / 2); - gap: calc(var(--aa-spacing-half) / 2); -} - -.aa-ItemContentTitle { - display: inline-block; - margin: 0 0.5em 0 0; - max-width: 100%; - overflow: hidden; - padding: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.aa-ItemContentSubtitle { - font-size: 0.92em; -} - -.aa-ItemContentSubtitleIcon:before { - border-color: rgba(128, 126, 163, 0.64); - border-color: rgba(var(--aa-muted-color-rgb), 0.64); - border-style: solid; - content: ''; - display: inline-block; - left: 1px; - position: relative; - top: -3px; -} - -.aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon:before { - border-width: 0 0 1.5px; - margin-left: 8px; - margin-left: var(--aa-spacing-half); - margin-right: 4px; - margin-right: calc(var(--aa-spacing-half) / 2); - width: 10px; - width: calc(var(--aa-spacing-half) + 2px); -} - -.aa-ItemContentSubtitle--standalone { - align-items: center; - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - display: grid; - grid-gap: 8px; - gap: 8px; - grid-gap: var(--aa-spacing-half); - gap: var(--aa-spacing-half); - grid-auto-flow: column; - justify-content: start; -} - -.aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon:before { - border-radius: 0 0 0 3px; - border-width: 0 0 1.5px 1.5px; - height: 8px; - height: var(--aa-spacing-half); - width: 8px; - width: var(--aa-spacing-half); -} - -.aa-ItemContentSubtitleCategory { - color: #807ea3; - color: rgba(var(--aa-muted-color-rgb), 1); - font-weight: 500; -} - -.aa-ItemContentDescription { - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-size: 0.85em; - max-width: 100%; - overflow-x: hidden; - text-overflow: ellipsis; -} - -.aa-ItemContentDescription:empty { - display: none; -} - -.aa-ItemContentDescription mark { - background: rgba(245, 223, 77, 0.5); - background: rgba(var(--aa-description-highlight-background-color-rgb), var(--aa-description-highlight-background-color-alpha)); - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-style: normal; - font-weight: 500; - font-weight: var(--aa-font-weight-medium); -} - -.aa-ItemContentDash { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - display: none; - opacity: 0.4; -} - -.aa-ItemContentTag { - background-color: rgba(62, 52, 211, 0.2); - background-color: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)); - border-radius: 3px; - margin: 0 0.4em 0 0; - padding: 0.08em 0.3em; -} - -.aa-ItemLink, -.aa-ItemWrapper { - align-items: center; - color: inherit; - display: grid; - grid-gap: 4px; - gap: 4px; - grid-gap: calc(var(--aa-spacing-half) / 2); - gap: calc(var(--aa-spacing-half) / 2); - grid-auto-flow: column; - justify-content: space-between; - width: 100%; -} - -.aa-ItemLink { - color: inherit; - text-decoration: none; -} - -.aa-ItemActions { - display: grid; - grid-auto-flow: column; - height: 100%; - justify-self: end; - margin: 0 -5.3333333333px; - margin: 0 calc(var(--aa-spacing) / -3); - padding: 0 2px 0 0; -} - -.aa-ItemActionButton { - align-items: center; - background: none; - border: 0; - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - cursor: pointer; - display: flex; - flex-shrink: 0; - padding: 0; -} - -.aa-ItemActionButton:focus svg, -.aa-ItemActionButton:hover svg { - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); -} - -@media (hover: none) and (pointer: coarse) { - .aa-ItemActionButton:focus svg, - .aa-ItemActionButton:hover svg { - color: inherit; - } -} - -.aa-ItemActionButton svg { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - margin: 5.3333333333px; - margin: calc(var(--aa-spacing) / 3); - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - width: 20px; - width: var(--aa-action-icon-size); -} - -.aa-ActiveOnly { - visibility: hidden; -} - -.aa-PanelHeader { - align-items: center; - background: #3e34d3; - background: rgba(var(--aa-primary-color-rgb), 1); - color: #fff; - display: grid; - height: var(--aa-modal-header-height); - margin: 0; - padding: 8px 16px; - padding: var(--aa-spacing-half) var(--aa-spacing); - position: relative; -} - -.aa-PanelHeader:after { - background-image: linear-gradient(#fff, rgba(255, 255, 255, 0)); - background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0)); - bottom: -8px; - bottom: calc(var(--aa-spacing-half) * -1); - content: ''; - height: 8px; - height: var(--aa-spacing-half); - left: 0; - pointer-events: none; - position: absolute; - right: 0; -} - -.aa-PanelFooter, -.aa-PanelHeader:after { - z-index: 9999; - z-index: var(--aa-base-z-index); -} - -.aa-PanelFooter { - background-color: #fff; - background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - box-shadow: inset 0 1px 0 rgba(128, 126, 163, 0.3); - box-shadow: inset 0 1px 0 rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); - display: flex; - justify-content: space-between; - margin: 0; - padding: 16px; - padding: var(--aa-spacing); - position: relative; -} - -.aa-PanelFooter:after { - background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(128, 126, 163, 0.6)); - background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha))); - content: ''; - height: 16px; - height: var(--aa-spacing); - left: 0; - opacity: 0.12; - pointer-events: none; - position: absolute; - right: 0; - top: -16px; - top: calc(var(--aa-spacing) * -1); - z-index: 9998; - z-index: calc(var(--aa-base-z-index) - 1); -} - -.aa-DetachedContainer { - background: #fff; - background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - bottom: 0; - box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); - box-shadow: var(--aa-panel-shadow); - display: flex; - flex-direction: column; - left: 0; - margin: 0; - overflow: hidden; - padding: 0; - position: fixed; - right: 0; - top: 0; - z-index: 9999; - z-index: var(--aa-base-z-index); -} - -.aa-DetachedContainer:after { - height: 32px; -} - -.aa-DetachedContainer .aa-SourceHeader { - margin: 8px 0 8px 2px; - margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; -} - -.aa-DetachedContainer .aa-Panel { - background-color: #fff; - background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - border-radius: 0; - box-shadow: none; - flex-grow: 1; - margin: 0; - padding: 0; - position: relative; -} - -.aa-DetachedContainer .aa-PanelLayout { - bottom: 0; - box-shadow: none; - left: 0; - margin: 0; - max-height: none; - overflow-y: auto; - position: absolute; - right: 0; - top: 0; - width: 100%; -} - -.aa-DetachedFormContainer { - border-bottom: 1px solid rgba(128, 126, 163, 0.3); - border-bottom: 1px solid rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 0; - padding: 8px; - padding: var(--aa-spacing-half); -} - -.aa-DetachedCancelButton { - background: none; - border: 0; - border-radius: 3px; - color: inherit; - color: #262627; - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - cursor: pointer; - font: inherit; - margin: 0 0 0 8px; - margin: 0 0 0 var(--aa-spacing-half); - padding: 0 8px; - padding: 0 var(--aa-spacing-half); -} - -.aa-DetachedCancelButton:focus, -.aa-DetachedCancelButton:hover { - box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); - box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); -} - -.aa-DetachedContainer--modal { - border-radius: 6px; - bottom: inherit; - height: auto; - margin: 0 auto; - max-width: 680px; - max-width: var(--aa-detached-modal-max-width); - position: absolute; - top: 3%; -} - -.aa-DetachedContainer--modal .aa-PanelLayout { - max-height: 500px; - max-height: var(--aa-detached-modal-max-height); - padding-bottom: 8px; - padding-bottom: var(--aa-spacing-half); - position: static; -} - -.aa-DetachedSearchButton { - align-items: center; - background-color: #fff; - background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha)); - border: 1px solid rgba(128, 126, 163, 0.8); - border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha)); - border-radius: 3px; - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - cursor: pointer; - display: flex; - font: inherit; - font-family: inherit; - font-family: var(--aa-font-family); - font-size: 16px; - font-size: var(--aa-font-size); - height: 44px; - height: var(--aa-search-input-height); - margin: 0; - padding: 0 5.5px; - padding: 0 calc(var(--aa-search-input-height) / 8); - position: relative; - text-align: left; - width: 100%; -} - -.aa-DetachedSearchButton:focus { - border-color: #3e34d3; - border-color: rgba(var(--aa-primary-color-rgb), 1); - box-shadow: 0 0 0 3px rgba(62, 52, 211, 0.2), inset 0 0 0 2px rgba(62, 52, 211, 0.2); - box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 3px, - inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px; - outline: medium none currentColor; -} - -.aa-DetachedSearchButtonIcon { - align-items: center; - color: #3e34d3; - color: rgba(var(--aa-primary-color-rgb), 1); - cursor: auto; - display: flex; - height: 100%; - justify-content: center; - width: 36px; - width: calc(var(--aa-icon-size) + var(--aa-spacing)); -} - -.aa-Detached { - height: 100vh; - overflow: hidden; -} - -.aa-DetachedOverlay { - background-color: rgba(115, 114, 129, 0.4); - background-color: rgba(var(--aa-overlay-color-rgb), var(--aa-overlay-color-alpha)); - height: 100vh; - left: 0; - margin: 0; - padding: 0; - position: fixed; - right: 0; - top: 0; - z-index: 9998; - z-index: calc(var(--aa-base-z-index) - 1); -} - -.aa-GradientBottom, -.aa-GradientTop { - height: 8px; - height: var(--aa-spacing-half); - left: 0; - pointer-events: none; - position: absolute; - right: 0; - z-index: 9999; - z-index: var(--aa-base-z-index); -} - -.aa-GradientTop { - background-image: linear-gradient(#fff, rgba(255, 255, 255, 0)); - background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0)); - top: 0; -} - -.aa-GradientBottom { - background-image: linear-gradient(rgba(255, 255, 255, 0), #fff); - background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-background-color-rgb), 1)); - border-bottom-left-radius: 4px; - border-bottom-left-radius: calc(var(--aa-spacing) / 4); - border-bottom-right-radius: 4px; - border-bottom-right-radius: calc(var(--aa-spacing) / 4); - bottom: 0; -} - -@media (hover: none) and (pointer: coarse) { - .aa-DesktopOnly { - display: none; - } -} - -@media (hover: hover) { - .aa-TouchOnly { - display: none; - } -} - -.aa-Autocomplete, -.aa-Panel, -.aa-DetachedContainer { - --color-mark: #5468ff; - --color-background: #fff; - --color-selected: #f5f5fa; - --color-text: #23263b; - --color-input-icon: #777; - --color-source-icon: rgba(80, 80, 80, 0.32); - --height: 32px; - --height-icon: 16px; - --font-size: 16px; -} - -.aa-Panel { - min-width: 350px; - z-index: 1100; - margin-top: 2px; -} - -.aa-Panel .aa-PanelLayout { - padding-top: 0; - padding-bottom: 0; - background-color: var(--color-background); -} - -.aa-Panel .aa-PanelLayout .aa-PanelLayoutPreview { - border-left: solid 1px var(--color-selected); -} - -.aa-Panel .aa-GradientBottom { - background-image: none; -} - -.aa-Autocomplete .aa-Form, -.aa-DetachedFormContainer .aa-Form { - height: var(--height); - font-size: var(--font-size); - padding: 0; - background-color: var(--color-background); -} - -.aa-Autocomplete .aa-Form:focus-within, -.aa-DetachedFormContainer .aa-Form:focus-within { - box-shadow: none; -} - -.aa-Autocomplete .aa-Form .aa-InputWrapperPrefix, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapperPrefix { - padding: 0; -} - -.aa-Autocomplete .aa-Form .aa-InputWrapperPrefix .aa-Label, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapperPrefix .aa-Label { - padding: 0; -} - -.aa-Autocomplete .aa-Form .aa-InputWrapperPrefix .aa-Label svg, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapperPrefix .aa-Label svg { - left: 0; - vertical-align: middle; - color: var(--color-input-icon); - width: var(--height-icon); -} - -.aa-Autocomplete .aa-Form .aa-InputWrapper .aa-Input, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapper .aa-Input { - height: var(--height); - color: var(--color-text); -} - -.aa-Autocomplete .aa-Form .aa-InputWrapperSuffix, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapperSuffix { - height: var(--height); -} - -.aa-Autocomplete .aa-Form .aa-InputWrapperSuffix .aa-ClearButton, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapperSuffix .aa-ClearButton { - padding: 0; -} - -.aa-Autocomplete .aa-Form .aa-InputWrapperSuffix .aa-ClearButton:hover, -.aa-Autocomplete .aa-Form .aa-InputWrapperSuffix .aa-ClearButton:focus, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapperSuffix .aa-ClearButton:hover, -.aa-DetachedFormContainer .aa-Form .aa-InputWrapperSuffix .aa-ClearButton:focus { - color: var(--color-text); -} - -.aa-Item { - color: var(--color-text); - padding: 2px 0; -} - -.aa-Item a { - color: inherit; - text-decoration: none; -} - -.aa-Item[aria-selected='true'] { - background-color: var(--color-selected); -} - -.aa-Item .aa-ItemContent { - display: flex; - color: var(--color-text); -} - -.aa-Item .aa-ItemContent mark { - color: var(--color-mark); - background-color: transparent; -} - -.aa-Item .aa-ItemIcon { - align-items: baseline; - color: var(--color-source-icon); - background: none; - box-shadow: none; - margin: 0 var(--aa-spacing-half) 0 2px; -} - -.aa-Item .aa-ItemTitle { - font-size: 14px; - font-weight: bold; - line-height: 18px; -} - -.aa-Item .aa-ItemHierarchy { - font-size: 12px; - font-style: italic; - line-height: 18px; - opacity: 0.8; - padding: 1px 0; -} - -.aa-Item .aa-ItemDescription { - font-size: 12px; - line-height: 16px; - color: #797979; -} - -.aa-DetachedContainer { - background: var(--color-background); -} - -.aa-DetachedContainer .aa-DetachedFormContainer .aa-DetachedCancelButton { - color: var(--color-text); -} - -.aa-DetachedOverlay { - z-index: 10; +img { + height: auto; + max-width: 100%; } -.aa-DetachedSearchButton { - background-color: var(--color-background); -} +@media only screen and (min-width: 641px) { + blockquote { + font-size: 1.5em; + line-height: 1.3; + } -.aa-DetachedSearchButton .aa-DetachedSearchButtonIcon { - color: var(--color-input-icon); -} + h1 { + font-size: 2.5em; + } -.aa-powered-by-link { - display: inline-block; - width: 64px; - height: 18px; - margin-left: 4px; - text-indent: 101%; - overflow: hidden; - white-space: nowrap; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0ODUgMTIwIj48ZyBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjNTQ2OEZGIiBkPSJNMTYuOC0xLjAwMWg4OC40YzguNyAwIDE1LjggNy4wNjUgMTUuOCAxNS44djg4LjQwNWMwIDguNy03LjA2NSAxNS43OTUtMTUuOCAxNS43OTVIMTYuOGMtOC43IDAtMTUuOC03LjA2LTE1LjgtMTUuNzk1VjE0Ljc1OWMwLTguNjk1IDcuMDYtMTUuNzYgMTUuOC0xNS43NiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik03My41MDUgMjUuNzg4di00LjExNWE1LjIwOSA1LjIwOSAwIDAwLTUuMjEtNS4yMDVINTYuMTVhNS4yMDkgNS4yMDkgMCAwMC01LjIxIDUuMjA1djQuMjI1YzAgLjQ3LjQzNS44LjkxLjY5YTM3Ljk2NiAzNy45NjYgMCAwMTEwLjU3LTEuNDljMy40NjUgMCA2Ljg5NS40NyAxMC4yMSAxLjM4LjQ0LjExLjg3NS0uMjE1Ljg3NS0uNjlNNDAuMjIgMzEuMTczbC0yLjA3NS0yLjA3NWE1LjIwNiA1LjIwNiAwIDAwLTcuMzY1IDBsLTIuNDggMi40NzVhNS4xODUgNS4xODUgMCAwMDAgNy4zNTVsMi4wNCAyLjA0Yy4zMy4zMjUuODA1LjI1IDEuMDk1LS4wNzVhMzkuODc2IDM5Ljg3NiAwIDAxMy45NzUtNC42NiAzNy42OCAzNy42OCAwIDAxNC43LTRjLjM2NC0uMjIuNC0uNzMuMTEtMS4wNm0yMi4xNjQgMTMuMDY1djE3LjhjMCAuNTEuNTUuODc1IDEuMDIuNjJsMTUuODI1LTguMTljLjM2LS4xOC40Ny0uNjIuMjktLjk4LTMuMjgtNS43NTUtOS4zNy05LjY4NS0xNi40MDUtOS45NC0uMzY1IDAtLjczLjI5LS43My42OW0wIDQyLjg4Yy0xMy4xOTUgMC0yMy45MTUtMTAuNzA1LTIzLjkxNS0yMy44OCAwLTEzLjE3NSAxMC43Mi0yMy44NzUgMjMuOTE1LTIzLjg3NSAxMy4yIDAgMjMuOTE2IDEwLjcgMjMuOTE2IDIzLjg3NXMtMTAuNjggMjMuODgtMjMuOTE2IDIzLjg4bTAtNTcuOGMtMTguNzQgMC0zMy45NCAxNS4xOC0zMy45NCAzMy45MiAwIDE4Ljc0NSAxNS4yIDMzLjg5IDMzLjk0IDMzLjg5czMzLjk0LTE1LjE4IDMzLjk0LTMzLjkyNWMwLTE4Ljc0NS0xNS4xNjUtMzMuODg1LTMzLjk0LTMzLjg4NSIvPjxwYXRoIGZpbGw9IiM1NDY4RkYiIGQ9Ik0yNDAuMjE0IDk0LjE3N2MtMjMuMzY1LjExLTIzLjM2NS0xOC44NTUtMjMuMzY1LTIxLjg3NWwtLjA0LTcxLjA0NSAxNC4yNTQtMi4yNnY3MC42MWMwIDEuNzE1IDAgMTIuNTYgOS4xNSAxMi41OTV2MTEuOTc1aC4wMDF6bS01Ny43OC0xMS42MWM0LjM3NCAwIDcuNjItLjI1NSA5Ljg4LS42OVY2Ny4zOTJhMjkuMTk2IDI5LjE5NiAwIDAwLTMuNDMtLjY5NSAzMy43NDIgMzMuNzQyIDAgMDAtNC45NTYtLjM2NWMtMS41NyAwLTMuMTc1LjExLTQuNzc1LjM2NS0xLjYwNS4yMi0zLjA2NS42NTUtNC4zNCAxLjI3NS0xLjI3NS42Mi0yLjMzNSAxLjQ5NS0zLjEgMi42Mi0uOCAxLjEzLTEuMTY1IDEuNzg1LTEuMTY1IDMuNDk1IDAgMy4zNDUgMS4xNjUgNS4yOCAzLjI4IDYuNTUgMi4xMTUgMS4yNzUgNC45OTUgMS45MyA4LjYwNiAxLjkzem0tMS4yNC01MS42ODVjNC43IDAgOC42NzQuNTg1IDExLjg4NCAxLjc1IDMuMjA2IDEuMTY1IDUuNzk2IDIuOCA3LjY5IDQuODc1IDEuOTM1IDIuMTEgMy4yNDUgNC45MTUgNC4wNDYgNy45Ljg0IDIuOTg1IDEuMjQgNi4yNiAxLjI0IDkuODZ2MzYuNjJjLTIuMTg1LjQ3LTUuNTA2IDEuMDE1LTkuOTUgMS42Ny00LjQ0Ni42NTUtOS40NC45ODUtMTQuOTg2Ljk4NS0zLjY4IDAtNy4wNy0uMzY1LTEwLjA5NS0xLjA1NS0zLjA2NS0uNjktNS42NS0xLjgyLTcuODQtMy4zODUtMi4xNS0xLjU2NS0zLjgyNS0zLjU3LTUuMDY1LTYuMDQtMS4yMDUtMi40OC0xLjgyNS01Ljk3LTEuODI1LTkuNjEgMC0zLjQ5NS42OS01LjcxNSAyLjA0NS04LjEyIDEuMzgtMi40IDMuMjQtNC4zNjUgNS41NzUtNS44OTUgMi4zNy0xLjUzIDUuMDY1LTIuNjIgOC4xNjUtMy4yNzUgMy4xLS42NTUgNi4zNDUtLjk4NSA5LjY5NS0uOTg1IDEuNTcgMCAzLjIxLjExIDQuOTYuMjkgMS43MTUuMTg1IDMuNTc1LjUxNSA1LjU0NS45ODV2LTIuMzNjMC0xLjYzNS0uMTg1LTMuMi0uNTg1LTQuNjU1YTEwLjAxMiAxMC4wMTIgMCAwMC0yLjA0NS0zLjg5NWMtLjk4NS0xLjEzLTIuMjU1LTIuMDA1LTMuODYtMi42Mi0xLjYwNS0uNjItMy42NS0xLjA5NS02LjA5LTEuMDk1LTMuMjggMC02LjI3LjQtOS4wMDUuODc1LTIuNzM1LjQ3LTQuOTk1IDEuMDItNi43MSAxLjYzNWwtMS43MS0xMS42OGMxLjc4NS0uNjIgNC40NDUtMS4yNCA3Ljg3NS0xLjg1NSAzLjQyNS0uNjYgNy4xMS0uOTUgMTEuMDQ1LS45NWguMDAxem0yODEuNTEgNTEuMjg1YzQuMzc1IDAgNy42MTUtLjI1NSA5Ljg3NS0uNjk1di0xNC40OGMtLjgtLjIyLTEuOTMtLjQ3NS0zLjQyNS0uNjk1YTMzLjgxMyAzMy44MTMgMCAwMC00Ljk2LS4zNjVjLTEuNTY1IDAtMy4xNy4xMS00Ljc3NS4zNjUtMS42LjIyLTMuMDYuNjU1LTQuMzM1IDEuMjc1LTEuMjguNjItMi4zMzUgMS40OTUtMy4xIDIuNjItLjgwNSAxLjEzLTEuMTY1IDEuNzg1LTEuMTY1IDMuNDk1IDAgMy4zNDUgMS4xNjUgNS4yOCAzLjI4IDYuNTUgMi4xNSAxLjMxIDQuOTk1IDEuOTMgOC42MDUgMS45M3ptLTEuMjA1LTUxLjY0NWM0LjcgMCA4LjY3NC41OCAxMS44ODQgMS43NDUgMy4yMDUgMS4xNjUgNS43OTUgMi44IDcuNjkgNC44NzUgMS44OTUgMi4wNzUgMy4yNDUgNC45MTUgNC4wNDUgNy45Ljg0IDIuOTg1IDEuMjQgNi4yNiAxLjI0IDkuODY1djM2LjYxNWMtMi4xODUuNDctNS41MDUgMS4wMTUtOS45NSAxLjY3NS00LjQ0NS42NTUtOS40NC45OC0xNC45ODUuOTgtMy42OCAwLTcuMDctLjM2NS0xMC4wOTQtMS4wNTUtMy4wNjUtLjY5LTUuNjUtMS44Mi03Ljg0LTMuMzg1LTIuMTUtMS41NjUtMy44MjUtMy41Ny01LjA2NS02LjA0LTEuMjA1LTIuNDc1LTEuODI1LTUuOTctMS44MjUtOS42MSAwLTMuNDk1LjY5NS01LjcxNSAyLjA0NS04LjEyIDEuMzgtMi40IDMuMjQtNC4zNjUgNS41NzUtNS44OTUgMi4zNy0xLjUyNSA1LjA2NS0yLjYyIDguMTY1LTMuMjc1IDMuMS0uNjU1IDYuMzQ1LS45OCA5LjctLjk4IDEuNTY1IDAgMy4yMDUuMTEgNC45NTUuMjlzMy41NzUuNTEgNS41NC45ODV2LTIuMzNjMC0xLjY0LS4xOC0zLjIwNS0uNTgtNC42NmE5Ljk3NyA5Ljk3NyAwIDAwLTIuMDQ1LTMuODk1Yy0uOTg1LTEuMTMtMi4yNTUtMi4wMDUtMy44Ni0yLjYyLTEuNjA2LS42Mi0zLjY1LTEuMDktNi4wOS0xLjA5LTMuMjggMC02LjI3LjQtOS4wMDUuODctMi43MzUuNDc1LTQuOTk1IDEuMDItNi43MSAxLjY0bC0xLjcxLTExLjY4NWMxLjc4NS0uNjIgNC40NDUtMS4yMzUgNy44NzUtMS44NTUgMy40MjUtLjYyIDcuMTA1LS45NDUgMTEuMDQ1LS45NDV6bS00Mi44LTYuNzdjNC43NzQgMCA4LjY4LTMuODYgOC42OC04LjYzIDAtNC43NjUtMy44NjYtOC42MjUtOC42OC04LjYyNS00LjgxIDAtOC42NzUgMy44Ni04LjY3NSA4LjYyNSAwIDQuNzcgMy45IDguNjMgOC42NzUgOC42M3ptNy4xOCA3MC40MjVoLTE0LjMyNnYtNjEuNDRsMTQuMzI1LTIuMjU1djYzLjY5NWguMDAxem0tMjUuMTE2IDBjLTIzLjM2NS4xMS0yMy4zNjUtMTguODU1LTIzLjM2NS0yMS44NzVsLS4wNC03MS4wNDUgMTQuMjU1LTIuMjZ2NzAuNjFjMCAxLjcxNSAwIDEyLjU2IDkuMTUgMTIuNTk1djExLjk3NXptLTQ2LjMzNS0zMS40NDVjMC02LjE1NS0xLjM1LTExLjI4NS0zLjk3NC0xNC44NS0yLjYyNS0zLjYwNS02LjMwNS01LjM4NS0xMS4wMS01LjM4NS00LjcgMC04LjM4NiAxLjc4LTExLjAwNiA1LjM4NS0yLjYyNSAzLjYtMy45MDQgOC42OTUtMy45MDQgMTQuODUgMCA2LjIyNSAxLjMxNSAxMC40MDUgMy45NCAxNC4wMSAyLjYyNSAzLjY0IDYuMzA1IDUuNDI1IDExLjAxIDUuNDI1IDQuNyAwIDguMzg1LTEuODIgMTEuMDEtNS40MjUgMi42MjQtMy42NCAzLjkzNC03Ljc4NSAzLjkzNC0xNC4wMXptMTQuNTgtLjAzNWMwIDQuODA1LS42OSA4LjQ0LTIuMTE0IDEyLjQxLTEuNDIgMy45NjUtMy40MjUgNy4zNS02LjAxIDEwLjE1NS0yLjU5IDIuOC01LjY5IDQuOTg1LTkuMzM2IDYuNTE1LTMuNjQ0IDEuNTI1LTkuMjYgMi40LTEyLjA2NSAyLjQtMi44MS0uMDM1LTguMzg1LS44MzUtMTEuOTk1LTIuNC0zLjYxLTEuNTY1LTYuNzEtMy43MTUtOS4yOTUtNi41MTUtMi41OS0yLjgwNS00LjU5NC02LjE5LTYuMDU0LTEwLjE1NS0xLjQ1Ni0zLjk3LTIuMTg1LTcuNjA1LTIuMTg1LTEyLjQxcy42NTQtOS40MyAyLjExNC0xMy4zNmMxLjQ2LTMuOTMgMy41LTcuMjggNi4xMjUtMTAuMDggMi42MjUtMi44MDUgNS43Ni00Ljk1NSA5LjMzLTYuNDggMy42MS0xLjUzIDcuNTg1LTIuMjU1IDExLjg4NS0yLjI1NSA0LjMwNSAwIDguMjc1Ljc2IDExLjkyIDIuMjU1IDMuNjUgMS41MjUgNi43ODYgMy42NzUgOS4zMzYgNi40OCAyLjU4NCAyLjggNC41OSA2LjE1IDYuMDUgMTAuMDggMS41MyAzLjkzIDIuMjk1IDguNTU1IDIuMjk1IDEzLjM2aC0uMDAxem0tMTA3LjI4NCAwYzAgNS45NjUgMS4zMSAxMi41OSAzLjkzNSAxNS4zNTUgMi42MjUgMi43NyA2LjAxNCA0LjE1IDEwLjE3NSA0LjE1IDIuMjYgMCA0LjQxLS4zMjUgNi40MTQtLjk0NSAyLjAwNS0uNjIgMy42MDYtMS4zNSA0Ljg4Ni0yLjIydi0zNS4zNGMtMS4wMi0uMjItNS4yODYtMS4wOTUtOS40MS0xLjItNS4xNzUtLjE1LTkuMTEgMS45NjUtMTEuODggNS4zNDUtMi43MzYgMy4zOS00LjEyIDkuMzItNC4xMiAxNC44NTV6bTM5LjYyNSAyOC4wOTVjMCA5LjcyLTIuNDggMTYuODE1LTcuNDc2IDIxLjMzLTQuOTkgNC41MS0xMi42MSA2Ljc3LTIyLjg5IDYuNzctMy43NTUgMC0xMS41NTUtLjczLTE3Ljc5LTIuMTFsMi4yOTUtMTEuMjg1YzUuMjE1IDEuMDkgMTIuMTA1IDEuMzg1IDE1LjcxNSAxLjM4NSA1LjcyIDAgOS44MDUtMS4xNjUgMTIuMjQ1LTMuNDk1IDIuNDQ1LTIuMzMgMy42NDUtNS43ODUgMy42NDUtMTAuMzc1di0yLjMzYy0xLjQyLjY5LTMuMjggMS4zODUtNS41NzUgMi4xMTUtMi4yOTUuNjktNC45NTUgMS4wNTUtNy45NSAxLjA1NS0zLjkzNSAwLTcuNTEtLjYyLTEwLjc1LTEuODYtMy4yNDUtMS4yMzUtNi4wNTUtMy4wNTUtOC4zNS01LjQ2LTIuMjk1LTIuNC00LjEyLTUuNDItNS4zOTUtOS4wMjUtMS4yNzUtMy42MDUtMS45MzUtMTAuMDQ1LTEuOTM1LTE0Ljc3NSAwLTQuNDQuNjk1LTEwLjAxIDIuMDQ2LTEzLjcyNSAxLjM4NC0zLjcxIDMuMzUtNi45MTUgNi4wMTQtOS41NyAyLjYyNi0yLjY1NSA1LjgzNS00LjY5NSA5LjU5LTYuMTkgMy43NTUtMS40OSA4LjE2LTIuNDM1IDEyLjkzNS0yLjQzNSA0LjYzNSAwIDguOS41OCAxMy4wNTUgMS4yNzUgNC4xNTUuNjkgNy42OSAxLjQxNSAxMC41NyAyLjIxNXY1Ni40OWguMDAxeiIvPjwvZz48L3N2Zz4=); - background-repeat: no-repeat; - background-size: contain; - vertical-align: middle; -} + h2 { + font-size: 2.125em; + } -.aa-powered-by { - text-align: right; - font-size: 12px; - color: #969faf; - padding: 8px 8px 4px 0; - font-weight: normal; -} + h3 { + font-size: 1.875em; + } -/*# sourceMappingURL=algoliasearchNetlify.css.map*/ + h4 { + font-size: 1.5em; + } -.h ighlight { - width: 100%; - overflow: auto; - background: #ffffff; -} -.highlight .c { - color: #999988; - font-style: italic; -} /* Comment */ -.highlight .err { - color: #a61717; - background-color: #e3d2d2; -} /* Error */ -.highlight .k { - font-weight: bold; -} /* Keyword */ -.highlight .o { - font-weight: bold; -} /* Operator */ -.highlight .cm { - color: #999988; - font-style: italic; -} /* Comment.Multiline */ -.highlight .cp { - color: #999999; - font-weight: bold; -} /* Comment.Preproc */ -.highlight .c1 { - color: #999988; - font-style: italic; -} /* Comment.Single */ -.highlight .cs { - color: #999999; - font-weight: bold; - font-style: italic; -} /* Comment.Special */ -.highlight .gd { - color: #000000; - background-color: #ffdddd; -} /* Generic.Deleted */ -.highlight .gd .x { - color: #000000; - background-color: #ffaaaa; -} /* Generic.Deleted.Specific */ -.highlight .ge { - font-style: italic; -} /* Generic.Emph */ -.highlight .gr { - color: #aa0000; -} /* Generic.Error */ -.highlight .gh { - color: #999999; -} /* Generic.Heading */ -.highlight .gi { - color: #000000; - background-color: #ddffdd; -} /* Generic.Inserted */ -.highlight .gi .x { - color: #000000; - background-color: #aaffaa; -} /* Generic.Inserted.Specific */ -.highlight .go { - color: #888888; -} /* Generic.Output */ -.highlight .gp { - color: #555555; -} /* Generic.Prompt */ -.highlight .gs { - font-weight: bold; -} /* Generic.Strong */ -.highlight .gu { - color: #aaaaaa; -} /* Generic.Subheading */ -.highlight .gt { - color: #aa0000; -} /* Generic.Traceback */ -.highlight .kc { - font-weight: bold; -} /* Keyword.Constant */ -.highlight .kd { - font-weight: bold; -} /* Keyword.Declaration */ -.highlight .kp { - font-weight: bold; -} /* Keyword.Pseudo */ -.highlight .kr { - font-weight: bold; -} /* Keyword.Reserved */ -.highlight .kt { - color: #445588; - font-weight: bold; -} /* Keyword.Type */ -.highlight .m { - color: #009999; -} /* Literal.Number */ -.highlight .s { - color: #d14; -} /* Literal.String */ -.highlight .na { - color: #008080; -} /* Name.Attribute */ -.highlight .nb { - color: #0086b3; -} /* Name.Builtin */ -.highlight .nc { - color: #445588; - font-weight: bold; -} /* Name.Class */ -.highlight .no { - color: #008080; -} /* Name.Constant */ -.highlight .ni { - color: #800080; -} /* Name.Entity */ -.highlight .ne { - color: #990000; - font-weight: bold; -} /* Name.Exception */ -.highlight .nf { - color: #990000; - font-weight: bold; -} /* Name.Function */ -.highlight .nn { - color: #555555; -} /* Name.Namespace */ -.highlight .nt { - color: #000080; -} /* Name.Tag */ -.highlight .nv { - color: #008080; -} /* Name.Variable */ -.highlight .ow { - font-weight: bold; -} /* Operator.Word */ -.highlight .w { - color: #bbbbbb; -} /* Text.Whitespace */ -.highlight .mf { - color: #009999; -} /* Literal.Number.Float */ -.highlight .mh { - color: #009999; -} /* Literal.Number.Hex */ -.highlight .mi { - color: #009999; -} /* Literal.Number.Integer */ -.highlight .mo { - color: #009999; -} /* Literal.Number.Oct */ -.highlight .sb { - color: #d14; -} /* Literal.String.Backtick */ -.highlight .sc { - color: #d14; -} /* Literal.String.Char */ -.highlight .sd { - color: #d14; -} /* Literal.String.Doc */ -.highlight .s2 { - color: #d14; -} /* Literal.String.Double */ -.highlight .se { - color: #d14; -} /* Literal.String.Escape */ -.highlight .sh { - color: #d14; -} /* Literal.String.Heredoc */ -.highlight .si { - color: #d14; -} /* Literal.String.Interpol */ -.highlight .sx { - color: #d14; -} /* Literal.String.Other */ -.highlight .sr { - color: #009926; -} /* Literal.String.Regex */ -.highlight .s1 { - color: #d14; -} /* Literal.String.Single */ -.highlight .ss { - color: #990073; -} /* Literal.String.Symbol */ -.highlight .bp { - color: #999999; -} /* Name.Builtin.Pseudo */ -.highlight .vc { - color: #008080; -} /* Name.Variable.Class */ -.highlight .vg { - color: #008080; -} /* Name.Variable.Global */ -.highlight .vi { - color: #008080; -} /* Name.Variable.Instance */ -.highlight .il { - color: #009999; -} /* Literal.Number.Integer.Long */ + h5 { + font-size: 1.25em; + } -/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */ -.highlight .lineno { - -webkit-user-select: none; - -moz-user-select: none; - -o-user-select: none; -} -.lineno::-moz-selection { - background-color: transparent; -} /* Mozilla specific */ -.lineno::selection { - background-color: transparent; -} /* Other major browsers */ + h6 { + font-size: 1.125em; + } +} \ No newline at end of file diff --git a/src/sass/imports/_header.scss b/src/sass/imports/_header.scss index b0ea2dba68..d9eedccfb7 100644 --- a/src/sass/imports/_header.scss +++ b/src/sass/imports/_header.scss @@ -1,370 +1,369 @@ .site-header { - background: black; - background-image: url('https://i.imgur.com/CEYEZp8.jpeg'); - padding-bottom: 0.4em; - padding-top: 0.2em; + background: #fff; + padding-bottom: 1.25em; + padding-top: 1.125em; } .site-header-inside { - -ms-flex-align: center; - align-items: center; - display: -ms-flexbox; - display: flex; + -ms-flex-align: center; + align-items: center; + display: -ms-flexbox; + display: flex; } .site-branding { - -ms-flex: 0 1 auto; - flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } .site-title { - color: $gray-700; - font-size: 1.5em; - font-weight: bold; - line-height: 1.2; - margin: 0; + color: $gray-700; + font-size: 1.5em; + font-weight: bold; + line-height: 1.2; + margin: 0; } .site-logo { - margin: 0; + margin: 0; - img { - max-height: 65px; - } + img { + max-height: 36px; + } } .menu, .submenu { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } .menu-item { - position: relative; + position: relative; - &.current { - color: $color-primary; - } + &.current { + color: $color-primary; + } - a { - &:not(.button) { - display: inline-block; - font-size: 1.1em; - line-height: 1.5; - } + a { + &:not(.button) { + display: inline-block; + font-size: 0.9375em; + line-height: 1.5; } + } } #masthead { - a { - &:not(.button) { - color: inherit; - display: inline-block; - text-decoration: none; - - &:hover { - color: $color-primary; - } - } + a { + &:not(.button) { + color: inherit; + display: inline-block; + text-decoration: none; + + &:hover { + color: $color-primary; + } } + } - .site-branding { - a { - &:hover { - color: inherit; - } - } + .site-branding { + a { + &:hover { + color: inherit; + } } + } } @media only screen and (min-width: 801px) { - #menu-open, - #menu-close { - display: none; - } + #menu-open, + #menu-close { + display: none; + } - .site-navigation { - margin-left: auto; - } + .site-navigation { + margin-left: auto; + } - .menu { - -ms-flex-align: center; - align-items: center; - display: -ms-flexbox; - display: flex; - } - - .menu-item { - display: inline-block; - margin: 0 0 0 1.25em; - padding-bottom: 0.1875em; - padding-top: 0.1875em; - - a { - padding-bottom: 0.5em; - padding-top: 0.5em; - - &.button:not(.button-icon) { - padding-left: 1.25em; - padding-right: 1.25em; - } - } + .menu { + -ms-flex-align: center; + align-items: center; + display: -ms-flexbox; + display: flex; + } - &.has-children > a { - padding-right: 18px; - position: relative; - - &:after { - background: 0; - border-color: currentColor; - border-style: solid; - border-width: 1px 1px 0 0; - box-sizing: border-box; - content: ''; - height: 6px; - position: absolute; - right: 0; - top: 50%; - width: 6px; - -webkit-transform: translateY(-50%) rotate(135deg); - transform: translateY(-50%) rotate(135deg); - } - - &.button:not(.button-icon) { - padding-right: 2.25em; - - &:after { - right: 1.25em; - } - } - } + .menu-item { + display: inline-block; + margin: 0 0 0 1.25em; + padding-bottom: 0.1875em; + padding-top: 0.1875em; - .submenu-toggle { - display: none; - } + a { + padding-bottom: 0.5em; + padding-top: 0.5em; - &.has-children:hover > .submenu { - opacity: 1; - -webkit-transition: margin 0.3s, opacity 0.2s; - transition: margin 0.3s, opacity 0.2s; - visibility: visible; - } + &.button:not(.button-icon) { + padding-left: 1.25em; + padding-right: 1.25em; + } } - .submenu { - background: #fff; - border: 4px solid $gray-300; - border-radius: $border-radius-sm; - box-shadow: $box-shadow; - left: 0; - min-width: 180px; - opacity: 0; - padding: 0.5em 0; + &.has-children > a { + padding-right: 15px; + position: relative; + + &:after { + background: 0; + border-color: currentColor; + border-style: solid; + border-width: 1px 1px 0 0; + box-sizing: border-box; + content: ""; + height: 6px; position: absolute; - text-align: left; - top: 100%; - -webkit-transition: opacity 0.2s, visibility 0s 0.2s; - transition: opacity 0.2s, visibility 0s 0.2s; - visibility: hidden; - width: 100%; - z-index: 99; - - .menu-item { - display: block; - margin: 0; - padding: 0 1em; - } + right: 0; + top: 50%; + width: 6px; + -webkit-transform: translateY(-50%) rotate(135deg); + transform: translateY(-50%) rotate(135deg); + } - a { - &:not(.button-icon) { - display: block; - } + &.button:not(.button-icon) { + padding-right: 2.25em; - &.button:not(.button-icon) { - margin: 0.5em 0; - } + &:after { + right: 1.25em; } + } } -} -@media only screen and (max-width: 800px) { - .site { - overflow: hidden; - position: relative; + .submenu-toggle { + display: none; } - .site-branding { - margin-right: 0.625em; + &.has-children:hover > .submenu { + opacity: 1; + -webkit-transition: margin .3s, opacity .2s; + transition: margin .3s, opacity .2s; + visibility: visible; } + } + + .submenu { + background: #fff; + border: 1px solid $gray-300; + border-radius: $border-radius-sm; + box-shadow: $box-shadow; + left: 0; + min-width: 180px; + opacity: 0; + padding: 0.5em 0; + position: absolute; + text-align: left; + top: 100%; + -webkit-transition: opacity .2s, visibility 0s .2s; + transition: opacity .2s, visibility 0s .2s; + visibility: hidden; + width: 100%; + z-index: 99; - .site-header { - &:after { - background: rgba($gray-600, 0.6); - content: ''; - height: 100vh; - left: 0; - opacity: 0; - position: absolute; - top: 0; - -webkit-transition: opacity 0.15s ease-in-out, visibility 0s ease-in-out 0.15s; - transition: opacity 0.15s ease-in-out, visibility 0s ease-in-out 0.15s; - visibility: hidden; - width: 100%; - z-index: 998; - } + .menu-item { + display: block; + margin: 0; + padding: 0 1em; } - .site-navigation { - background: #fff; - box-sizing: border-box; - height: 100vh; - margin: 0; - max-width: 360px; - -webkit-overflow-scrolling: touch; - position: absolute; - right: -100%; - top: 0; - -webkit-transition: right 0.3s ease-in-out, visibility 0s 0.3s ease-in-out; - transition: right 0.3s ease-in-out, visibility 0s 0.3s ease-in-out; - visibility: hidden; - width: 100%; - z-index: 999; - } + a { + &:not(.button-icon) { + display: block; + } - .site-nav-inside { - height: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; - position: relative; + &.button:not(.button-icon) { + margin: 0.5em 0; + } } + } +} - .menu--opened { - .site { - height: 100%; - left: 0; - overflow: hidden; - position: fixed; - top: 0; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - width: 100%; - z-index: 997; - } +@media only screen and (max-width: 800px) { + .site { + overflow: hidden; + position: relative; + } + + .site-branding { + margin-right: 0.625em; + } + + .site-header { + &:after { + background: rgba($gray-600,.6); + content: ""; + height: 100vh; + left: 0; + opacity: 0; + position: absolute; + top: 0; + -webkit-transition: opacity .15s ease-in-out,visibility 0s ease-in-out .15s; + transition: opacity .15s ease-in-out,visibility 0s ease-in-out .15s; + visibility: hidden; + width: 100%; + z-index: 998; + } + } - .site-navigation { - right: 0; - -webkit-transition: right 0.3s ease-in-out; - transition: right 0.3s ease-in-out; - visibility: visible; - } + .site-navigation { + background: #fff; + box-sizing: border-box; + height: 100vh; + margin: 0; + max-width: 360px; + -webkit-overflow-scrolling: touch; + position: absolute; + right: -100%; + top: 0; + -webkit-transition: right .3s ease-in-out, visibility 0s .3s ease-in-out; + transition: right .3s ease-in-out, visibility 0s .3s ease-in-out; + visibility: hidden; + width: 100%; + z-index: 999; + } + + .site-nav-inside { + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; + position: relative; + } - .site-header { - &:after { - opacity: 1; - -webkit-transition-delay: 0s; - transition-delay: 0s; - visibility: visible; - } - } + .menu--opened { + .site { + height: 100%; + left: 0; + overflow: hidden; + position: fixed; + top: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + width: 100%; + z-index: 997; } - .menu { - padding: calc(3vw + 2.8125em) $container-padding 3em; + .site-navigation { + right: 0; + -webkit-transition: right .3s ease-in-out; + transition: right .3s ease-in-out; + visibility: visible; } - .submenu { - border-top: 1px solid $gray-300; - display: none; - padding-left: 1em; + .site-header { + &:after { + opacity: 1; + -webkit-transition-delay: 0s; + transition-delay: 0s; + visibility: visible; + } } + } - .menu-item { - display: block; - margin: 0; + .menu { + padding: calc(3vw + 2.8125em) $container-padding 3em; + } - &:not(.menu-button) { - border-bottom: 1px solid $gray-300; + .submenu { + border-top: 1px solid $gray-300; + display: none; + padding-left: 1em; + } - &:first-child { - border-top: 1px solid $gray-300; - } - } + .menu-item { + display: block; + margin: 0; - a { - &:not(.button), - &.button-icon { - padding: 0.75em 0; - } - - &:not(.button) { - display: block; - } - - &.button { - &:not(.button-icon) { - width: 100%; - } - } - } + &:not(.menu-button) { + border-bottom: 1px solid $gray-300; - &.has-children > a { - margin-right: 2em; - } + &:first-child { + border-top: 1px solid $gray-300; + } + } - .menu-item { - &:first-child { - border-top: 0; - } + a { + &:not(.button), + &.button-icon { + padding: 0.75em 0; + } - &:last-child { - border-bottom: 0; - } - } + &:not(.button) { + display: block; + } - .submenu-toggle { - color: $gray-500; - height: 2.8125em; - position: absolute; - right: 0; - top: 0; + &.button { + &:not(.button-icon) { + width: 100%; } + } + } - &.active { - .submenu-toggle { - .icon-angle-right { - -webkit-transform: rotate(135deg); - transform: rotate(135deg); - } - } - - .submenu { - display: block; - } - } + &.has-children > a { + margin-right: 2em; } - .menu-button { - & > .button:not(.button-icon) { - margin-bottom: 1.25em; - margin-top: 1.25em; - } + .menu-item { + &:first-child { + border-top: 0; + } + + &:last-child { + border-bottom: 0; + } + } + + .submenu-toggle { + color: $gray-500; + height: 2.8125em; + position: absolute; + right: 0; + top: 0; + } - & + .menu-button { - & > .button:not(.button-icon) { - margin-top: 0; - } + &.active { + .submenu-toggle { + .icon-angle-right { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); } + } + + .submenu { + display: block; + } } + } - #menu-open { - margin-left: auto; + .menu-button { + & > .button:not(.button-icon) { + margin-bottom: 1.25em; + margin-top: 1.25em; } - #menu-close { - display: block; - position: absolute; - right: $container-padding; - top: $container-padding; + & + .menu-button { + & > .button:not(.button-icon) { + margin-top: 0; + } } + } + + #menu-open { + margin-left: auto; + } + + #menu-close { + display: block; + position: absolute; + right: $container-padding; + top: $container-padding; + } } diff --git a/src/sass/imports/_helpers.scss b/src/sass/imports/_helpers.scss index 2d07226953..2351f06b54 100644 --- a/src/sass/imports/_helpers.scss +++ b/src/sass/imports/_helpers.scss @@ -1,186 +1,186 @@ // Text for screen readers .screen-reader-text { - clip: rect(1px, 1px, 1px, 1px); - clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); - height: 1px; - overflow: hidden; - position: absolute !important; - width: 1px; - word-wrap: normal !important; + clip: rect(1px, 1px, 1px, 1px); + clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); + height: 1px; + overflow: hidden; + position: absolute !important; + width: 1px; + word-wrap: normal !important; } // Heading decorations .line-left { - position: relative; + position: relative; - &:after { - background: $color-primary; - display: block; - content: ''; - height: 100%; - left: -1px; - position: absolute; - top: 0; - width: 5px; - } + &:after { + background: $color-primary; + display: block; + content: ""; + height: 100%; + left: -1px; + position: absolute; + top: 0; + width: 5px; + } } // Responsive video wrappers .js-reframe { - margin: 1.875em 0; + margin: 1.875em 0; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } } // Notifications, allerts .note, .important { - border-radius: $border-radius; - color: $gray-700; - margin: 1.875em 0; - padding: 1em 1.125em; + border-radius: $border-radius; + color: $gray-700; + margin: 1.875em 0; + padding: 1em 1.125em; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } } .note { - background: $yellow-pale; - border-left: 5px solid $yellow; + background: $yellow-pale; + border-left: 5px solid $yellow; } .important { - background: $red-pale; - border-left: 5px solid $red; + background: $red-pale; + border-left: 5px solid $red; } // Background gradients .has-gradient { - background: $color-primary; - background: -webkit-gradient(linear, left top, right top, from($color-secondary), to($color-primary)); - background: linear-gradient(to right, $color-secondary, $color-primary); - color: #fff; - position: relative; - - h1, - h2, - h3, - h4, - h5, - h6 { - color: inherit !important; - } - - a { - &:not(.button) { - color: inherit !important; - - &:hover { - opacity: 0.8; - } - } + background: $color-primary; + background: -webkit-gradient(linear, left top, right top, from($color-secondary), to($color-primary)); + background: linear-gradient(to right,$color-secondary, $color-primary); + color: #fff; + position: relative; + + h1, + h2, + h3, + h4, + h5, + h6 { + color: inherit !important; + } + + a { + &:not(.button) { + color: inherit !important; + + &:hover { + opacity: .8; + } } - - .button { - &:not(.button-secondary) { - background-color: #fff; - color: $color-primary; - - &:hover, - &:focus, - &:active { - opacity: 0.85; - } - } + } + + .button { + &:not(.button-secondary) { + background-color: #fff; + color: $color-primary; + + &:hover, + &:focus, + &:active { + opacity: .85; + } } + } - .button-secondary { - color: #fff !important; - } + .button-secondary { + color: #fff !important; + } - .inner-sm { - position: relative; - } + .inner-sm { + position: relative; + } } // Background image .bg-img { - -webkit-animation: fadeIn20 0.75s ease-in-out; - animation: fadeIn20 0.75s ease-in-out; - background-position: center; - background-size: cover; - bottom: 0; - left: 0; - opacity: 0.2; - position: absolute; - right: 0; - top: 0; + -webkit-animation: fadeIn20 .75s ease-in-out; + animation: fadeIn20 .75s ease-in-out; + background-position: center; + background-size: cover; + bottom: 0; + left: 0; + opacity: 0.2; + position: absolute; + right: 0; + top: 0; } // Grid .grid { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -$grid-gap / 2; - margin-right: -$grid-gap / 2; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -$grid-gap / 2; + margin-right: -$grid-gap / 2; } .grid-item { - box-sizing: border-box; - padding-left: $grid-gap / 2; - padding-right: $grid-gap / 2; - position: relative; - width: 100%; + box-sizing: border-box; + padding-left: $grid-gap / 2; + padding-right: $grid-gap / 2; + position: relative; + width: 100%; } .grid-center { - -ms-flex-pack: center; - justify-content: center; + -ms-flex-pack: center; + justify-content: center; } .grid-swap { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } .grid-middle { - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; } @media only screen and (min-width: 641px) { - .grid-col-2 { - .grid-item { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } + .grid-col-2 { + .grid-item { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + } } @media only screen and (min-width: 761px) { - .grid-col-3 { - .grid-item { - -ms-flex: 0 0 33.333%; - flex: 0 0 33.333%; - max-width: 33.333%; - } + .grid-col-3 { + .grid-item { + -ms-flex: 0 0 33.333%; + flex: 0 0 33.333%; + max-width: 33.333%; } + } } @media only screen and (max-width: 600px) { - .grid { - margin-left: -$container-padding / 2; - margin-right: -$container-padding / 2; - } - - .grid-item { - padding-left: $container-padding / 2; - padding-right: $container-padding / 2; - } + .grid { + margin-left: -$container-padding / 2; + margin-right: -$container-padding / 2; + } + + .grid-item { + padding-left: $container-padding / 2; + padding-right: $container-padding / 2; + } } diff --git a/src/sass/imports/_icons.scss b/src/sass/imports/_icons.scss index 63a5df66ca..07a5dc1084 100644 --- a/src/sass/imports/_icons.scss +++ b/src/sass/imports/_icons.scss @@ -1,101 +1,101 @@ // SVG icons .icon { - color: inherit; - fill: currentColor; - flex-shrink: 0; - height: 1em; - line-height: 1; - width: 1em; + color: inherit; + fill: currentColor; + flex-shrink: 0; + height: 1em; + line-height: 1; + width: 1em; } // CSS icons .icon-menu, .icon-close { + background: currentColor; + border-radius: 1px; + color: inherit; + height: 2px; + left: 50%; + margin-top: -1px; + margin-left: -12px; + position: absolute; + top: 50%; + width: 24px; + + &:before, + &:after { background: currentColor; border-radius: 1px; - color: inherit; - height: 2px; - left: 50%; - margin-top: -1px; - margin-left: -12px; + content: ""; + height: 100%; + left: 0; position: absolute; - top: 50%; - width: 24px; - - &:before, - &:after { - background: currentColor; - border-radius: 1px; - content: ''; - height: 100%; - left: 0; - position: absolute; - width: 100%; - } + width: 100%; + } } .icon-menu { - &:before { - top: -6px; - } + &:before { + top: -6px; + } - &:after { - bottom: -6px; - } + &:after { + bottom: -6px; + } } .icon-close { - background: 0; - margin-left: -14px; - width: 28px; + background: 0; + margin-left: -14px; + width: 28px; - &:before { - top: 0; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - } + &:before { + top: 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } - &:after { - top: 0; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - } + &:after { + top: 0; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + } } .icon-angle-right { - background: 0; - border-color: currentColor; - border-style: solid; - border-width: 1px 1px 0 0; - box-sizing: border-box; - height: 8px; - left: 50%; - margin-left: -4px; - margin-top: -4px; - position: absolute; - top: 50%; - width: 8px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); + background: 0; + border-color: currentColor; + border-style: solid; + border-width: 1px 1px 0 0; + box-sizing: border-box; + height: 8px; + left: 50%; + margin-left: -4px; + margin-top: -4px; + position: absolute; + top: 50%; + width: 8px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } .docs-nav-toggle { - .icon-angle-right { - height: 12px; - left: auto; - margin-left: 0; - margin-right: 9px; - margin-top: -6px; - right: 0; - width: 12px; - } + .icon-angle-right { + height: 12px; + left: auto; + margin-left: 0; + margin-right: 9px; + margin-top: -6px; + right: 0; + width: 12px; + } } .docs-section-item { - .icon-angle-right { - left: auto; - margin-left: 0; - margin-right: 15px; - right: 0; - } + .icon-angle-right { + left: auto; + margin-left: 0; + margin-right: 15px; + right: 0; + } } diff --git a/src/sass/imports/_palettes.scss b/src/sass/imports/_palettes.scss index ac2cc9874b..3b0b39331d 100644 --- a/src/sass/imports/_palettes.scss +++ b/src/sass/imports/_palettes.scss @@ -1,57 +1,57 @@ @each $palette in map-keys($theme-palettes) { - $palette-suffix: '#{$palette}'; - $color-primary: map-deep-get($theme-palettes, $palette, 'primary'); - $color-secondary: map-deep-get($theme-palettes, $palette, 'secondary'); + $palette-suffix: "#{$palette}"; + $color-primary: map-deep-get($theme-palettes, $palette, "primary"); + $color-secondary: map-deep-get($theme-palettes, $palette, "secondary"); - .palette-#{$palette-suffix} { - a:not(.button) { - color: $color-primary; + .palette-#{$palette-suffix} { + a:not(.button) { + color: $color-primary; - &:hover { - color: $gray-600; - } - } + &:hover { + color: $gray-600; + } + } - blockquote { - border-color: $color-primary; - } + blockquote { + border-color: $color-primary; + } - .line-left:after, - .button { - background: $color-primary; - } + .line-left:after, + .button { + background: $color-primary; + } - .has-gradient { - background: $color-primary; - background: -webkit-gradient(linear, left top, right top, from($color-secondary), to($color-primary)); - background: linear-gradient(to right, $color-secondary, $color-primary); - } + .has-gradient { + background: $color-primary; + background: -webkit-gradient(linear, left top, right top, from($color-secondary), to($color-primary)); + background: linear-gradient(to right,$color-secondary, $color-primary); + } - .button-secondary, - .button-icon:hover, - .button-icon:focus, - .button-icon:active, - .has-gradient .button:not(.button-secondary), - .menu-item.current, - #masthead a:not(.button):hover, - #colophon a:not(.button):hover, - .post.type-docs .hash-link:hover, - .post.type-docs .hash-link:focus, - #docs-menu a:hover, - #docs-menu .current, - #docs-menu .current-parent, - #page-nav li.active > a, - #page-nav a:hover { - color: $color-primary; - } + .button-secondary, + .button-icon:hover, + .button-icon:focus, + .button-icon:active, + .has-gradient .button:not(.button-secondary), + .menu-item.current, + #masthead a:not(.button):hover, + #colophon a:not(.button):hover, + .post.type-docs .hash-link:hover, + .post.type-docs .hash-link:focus, + #docs-menu a:hover, + #docs-menu .current, + #docs-menu .current-parent, + #page-nav li.active > a, + #page-nav a:hover { + color: $color-primary; + } - #docs-section-items { - .docs-item-link { - &:hover { - border-color: $color-primary; - color: $color-primary; - } - } + #docs-section-items { + .docs-item-link { + &:hover { + border-color: $color-primary; + color: $color-primary; } + } } + } } diff --git a/src/sass/imports/_posts.scss b/src/sass/imports/_posts.scss index 257760b344..96c55ba953 100644 --- a/src/sass/imports/_posts.scss +++ b/src/sass/imports/_posts.scss @@ -1,166 +1,166 @@ .post { - margin-bottom: 2.5em; + margin-bottom: 2.5em; } .post-full, .post-feed { - &:last-child { - margin-bottom: 5em; - } + &:last-child { + margin-bottom: 5em; + } } .has-gradient { - &.page-header, - &.post-header { - padding-bottom: 9.5em; - padding-top: 3.75em; - text-align: center; - } - - .page-title, - .post-title { - color: inherit; - font-size: 2.25em; - margin: 0; - } + &.page-header, + &.post-header { + padding-bottom: 9.5em; + padding-top: 3.75em; + text-align: center; + } + + .page-title, + .post-title { + color: inherit; + font-size: 2.25em; + margin: 0; + } } .page-subtitle, .post-subtitle { - font-size: 1.125em; - line-height: 1.5; - margin: 0.5em 0 0; - position: relative; + font-size: 1.125em; + line-height: 1.5; + margin: 0.5em 0 0; + position: relative; } .post-title { - a { - color: inherit !important; - text-decoration: none; - } + a { + color: inherit !important; + text-decoration: none; + } } .post-thumbnail { - border: 0; - border-radius: $border-radius $border-radius 0 0; - display: block; - margin: 0; + border: 0; + border-radius: $border-radius $border-radius 0 0; + display: block; + margin: 0; - img { - border-radius: $border-radius $border-radius 0 0; - width: 100%; - } + img { + border-radius: $border-radius $border-radius 0 0; + width: 100%; + } } .post-full .post-content, .post-feed { - margin-top: -5em; - position: relative; + margin-top: -5em; + position: relative; } .post-full .post-content, .post-feed .post { - background: #fff; - border: 1px solid $gray-300; - border-radius: $border-radius; - box-shadow: $box-shadow; + background: #fff; + border: 1px solid $gray-300; + border-radius: $border-radius; + box-shadow: $box-shadow; } .post-full { - .post-content { - padding: 2.5em 1.5em; - } + .post-content { + padding: 2.5em 1.5em; + } - .post-meta { - margin: 0 0 0.5em; - } + .post-meta { + margin: 0 0 0.5em; + } } .post-feed { - .post { - padding: 0 0 2.5em; - } - - .post-meta { - color: $gray-500; - font-size: 0.875em; - margin: 0 0 0.5em; - padding-left: 1.71428em; - padding-right: 1.71428em; - } + .post { + padding: 0 0 2.5em; + } + + .post-meta { + color: $gray-500; + font-size: 0.875em; + margin: 0 0 0.5em; + padding-left: 1.71428em; + padding-right: 1.71428em; + } + + .post-header { + margin: 0 0 1.25em; + padding-top: 1.875em; + } + + .post-title { + font-size: 1.5em; + margin: 0; + padding-left: 1em; + padding-right: 1em; + } - .post-header { - margin: 0 0 1.25em; - padding-top: 1.875em; - } + .post-excerpt { + margin-bottom: 1.25em; + padding-left: 1.5em; + padding-right: 1.5em; + } - .post-title { - font-size: 1.5em; - margin: 0; - padding-left: 1em; - padding-right: 1em; - } + .read-more { + margin: 0; + padding-left: 1.5em; + padding-right: 1.5em; + } - .post-excerpt { - margin-bottom: 1.25em; - padding-left: 1.5em; - padding-right: 1.5em; - } + .read-more-link { + font-weight: bold; + text-decoration: none; - .read-more { - margin: 0; - padding-left: 1.5em; - padding-right: 1.5em; + &:after { + font-size: 1.125em; + content: "\2192"; + line-height: 1.5; + margin-left: 5px; } - .read-more-link { - font-weight: bold; - text-decoration: none; - - &:after { - font-size: 1.125em; - content: '\2192'; - line-height: 1.5; - margin-left: 5px; - } - - &:hover { - color: $gray-600; - } + &:hover { + color: $gray-600; } + } } @media only screen and (min-width: 641px) { - .has-gradient { - .page-title, - .post-title { - font-size: 3em; - } - } - - .page-subtitle, - .post-subtitle { - font-size: 1.25em; + .has-gradient { + .page-title, + .post-title { + font-size: 3em; } + } - .post-full { - .post-meta { - font-size: 1.125em; - } - } + .page-subtitle, + .post-subtitle { + font-size: 1.25em; + } - .post-full .post-content, - .post-feed .post-meta, - .post-feed .post-title, - .post-feed .post-excerpt, - .post-feed .read-more { - padding-left: 7%; - padding-right: 7%; - } + .post-full { + .post-meta { + font-size: 1.125em; + } + } + + .post-full .post-content, + .post-feed .post-meta, + .post-feed .post-title, + .post-feed .post-excerpt, + .post-feed .read-more { + padding-left: 7%; + padding-right: 7%; + } } @media only screen and (max-width: 1000px) { - .post { - margin-bottom: 4vw; - } + .post { + margin-bottom: 4vw; + } } diff --git a/src/sass/imports/_prism.scss b/src/sass/imports/_prism.scss index ca8230b323..0636c938b7 100644 --- a/src/sass/imports/_prism.scss +++ b/src/sass/imports/_prism.scss @@ -6,35 +6,35 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc * @author Lea Verou */ -code[class*='language-'], -pre[class*='language-'] { - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; +code[class*="language-"], +pre[class*="language-"] { + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } -:not(pre) > code[class*='language-'] { - background: $gray-700; - color: $gray-100; +:not(pre) > code[class*="language-"] { + background: $gray-700; + color: $gray-100; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #8292a2; + color: #8292a2; } .token.punctuation { - color: #f8f8f2; + color: #f8f8f2; } .token.namespace { - opacity: 0.7; + opacity: .7; } .token.property, @@ -42,12 +42,12 @@ pre[class*='language-'] { .token.constant, .token.symbol, .token.deleted { - color: #f92672; + color: #f92672; } .token.boolean, .token.number { - color: #ae81ff; + color: #ae81ff; } .token.selector, @@ -56,7 +56,7 @@ pre[class*='language-'] { .token.char, .token.builtin, .token.inserted { - color: #a6e22e; + color: #a6e22e; } .token.operator, @@ -65,79 +65,79 @@ pre[class*='language-'] { .language-css .token.string, .style .token.string, .token.variable { - color: #f8f8f2; + color: #f8f8f2; } .token.atrule, .token.attr-value, .token.function, .token.class-name { - color: #e6db74; + color: #e6db74; } .token.keyword { - color: #66d9ef; + color: #66d9ef; } .token.regex, .token.important { - color: #fd971f; + color: #fd971f; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } div.code-toolbar { - position: relative; + position: relative; } div.code-toolbar > .toolbar { - position: absolute; - top: 0; - right: 0; + position: absolute; + top: 0; + right: 0; } div.code-toolbar > .toolbar .toolbar-item { - display: block; + display: block; } div.code-toolbar > .toolbar a { - border: 0; - cursor: pointer; + border: 0; + cursor: pointer; } div.code-toolbar > .toolbar button { - background: none; - border: 0; - border-radius: 0; - box-shadow: none; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + background: none; + border: 0; + border-radius: 0; + box-shadow: none; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { - background: $gray-600; - color: $gray-300 !important; - display: block; - font-size: 0.75em; - line-height: 1.5; - padding: 0.25em 0.5em; - text-decoration: none; + background: $gray-600; + color: $gray-300 !important; + display: block; + font-size: .75em; + line-height: 1.5; + padding: .25em .5em; + text-decoration: none; } diff --git a/src/sass/imports/_reset.scss b/src/sass/imports/_reset.scss index 7ea3d17976..9e5e3d04e7 100644 --- a/src/sass/imports/_reset.scss +++ b/src/sass/imports/_reset.scss @@ -1,82 +1,82 @@ // normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css html { - line-height: 1.15; - -webkit-text-size-adjust: 100%; + line-height: 1.15; + -webkit-text-size-adjust: 100%; } body { - margin: 0; + margin: 0; } main { - display: block; + display: block; } hr { - box-sizing: content-box; - height: 0; - overflow: visible; + box-sizing: content-box; + height: 0; + overflow: visible; } a { - background-color: transparent; + background-color: transparent; } a:focus { - outline: thin dotted; + outline: thin dotted; } a:active, a:hover { - outline: 0; + outline: 0; } abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } b, strong { - font-weight: bold; + font-weight: bold; - .font-fira-sans & { - font-weight: 600; - } + .font-fira-sans & { + font-weight: 600; + } } pre, code, kbd, samp { - font-family: $font-monospace; - font-size: 1em; + font-family: $font-monospace; + font-size: 1em; } small { - font-size: 80%; + font-size: 80%; } sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } img { - border-style: none; - vertical-align: middle; + border-style: none; + vertical-align: middle; } button, @@ -84,102 +84,102 @@ input, optgroup, select, textarea { - font-family: inherit; - font-size: 100%; - line-height: 1.15; - margin: 0; + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; } button, input { - overflow: visible; + overflow: visible; } button, select { - text-transform: none; + text-transform: none; } button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; } button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } button:-moz-focusring, -[type='button']:-moz-focusring, -[type='reset']:-moz-focusring, -[type='submit']:-moz-focusring { - outline: 1px dotted ButtonText; +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } fieldset { - padding: 0.35em 0.75em 0.625em; + padding: 0.35em 0.75em 0.625em; } legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; } progress { - vertical-align: baseline; + vertical-align: baseline; } textarea { - overflow: auto; + overflow: auto; } -[type='checkbox'], -[type='radio'] { - box-sizing: border-box; - padding: 0; +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; } -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } -[type='search'] { - -webkit-appearance: textfield; - outline-offset: -2px; +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; } -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } ::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; + -webkit-appearance: button; + font: inherit; } details { - display: block; + display: block; } summary { - display: list-item; + display: list-item; } template { - display: none; + display: none; } [hidden] { - display: none; -} + display: none; +} \ No newline at end of file diff --git a/src/sass/imports/_sections.scss b/src/sass/imports/_sections.scss index bf9d393492..a5417e67c2 100644 --- a/src/sass/imports/_sections.scss +++ b/src/sass/imports/_sections.scss @@ -1,337 +1,337 @@ .block { - padding-top: 3.75em; + padding-top: 3.75em; - &:not(.block-hero) { - background: $gray-100; - } + &:not(.block-hero) { + background: $gray-100; + } - &:last-child { - padding-bottom: 3.75em; - } + &:last-child { + padding-bottom: 3.75em; + } } .block-image { - margin-bottom: 1.5em; + margin-bottom: 1.5em; } .block-header { - margin-bottom: 1.5em; + margin-bottom: 1.5em; } .block-title { - margin: 0; + margin: 0; } .block-subtitle { - color: $gray-500; - line-height: 1.5; - margin-bottom: 0; + color: $gray-500; + line-height: 1.5; + margin-bottom: 0; - &:not(:first-child) { - margin-top: 0.5em; - } + &:not(:first-child) { + margin-top: 0.5em; + } } .block-buttons, .grid-item-buttons { - -ms-flex-align: center; - align-items: center; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-bottom: 0.9375em; - - a { - font-weight: bold; - text-decoration: none; - } + -ms-flex-align: center; + align-items: center; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 0.9375em; + + a { + font-weight: bold; + text-decoration: none; + } } .block-buttons { - -ms-flex-pack: center; - justify-content: center; + -ms-flex-pack: center; + justify-content: center; - a { - margin: 0 0.375em 0.75em; - } + a { + margin: 0 0.375em 0.75em; + } } .grid-item-buttons { - a { - margin: 0 0.75em 0.75em 0; - } + a { + margin: 0 0.75em 0.75em 0; + } } .has-gradient { - .block-subtitle { - color: inherit; - } + .block-subtitle { + color: inherit; + } } .block-text, .block-hero { - .block-buttons { - &:not(:first-child) { - margin-top: 1.875em; - } + .block-buttons { + &:not(:first-child) { + margin-top: 1.875em; } + } } // Content section .block-text { - .grid-item { - max-width: $container-sm; - text-align: center; - } + .grid-item { + max-width: $container-sm; + text-align: center; + } - .block-title { - font-size: 1.875em; - } + .block-title { + font-size: 1.875em; + } } @media only screen and (min-width: 641px) { - .block-text { - .block-content { - font-size: 1.125em; - } + .block-text { + .block-content { + font-size: 1.125em; + } - .block-title { - font-size: 2.125em; - } + .block-title { + font-size: 2.125em; } + } } @media only screen and (min-width: 801px) { - .block-text { - .grid-item { - &:not(:only-child) { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - } + .block-text { + .grid-item { + &:not(:only-child) { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } } + } - .block-body { - &:not(:only-child) { - text-align: left; + .block-body { + &:not(:only-child) { + text-align: left; - .block-buttons { - -ms-flex-pack: start; - justify-content: flex-start; + .block-buttons { + -ms-flex-pack: start; + justify-content: flex-start; - a { - margin-left: 0; - margin-right: 0.75em; - } - } + a { + margin-left: 0; + margin-right: 0.75em; } + } } + } } @media only screen and (min-width: 1001px) { - .block-image { - &:not(:only-child) { - padding-right: 2.5em; - } + .block-image { + &:not(:only-child) { + padding-right: 2.5em; } + } - .grid-swap { - .block-image { - &:not(:only-child) { - padding-left: 2.5em; - padding-right: 0.9375em; - } - } + .grid-swap { + .block-image { + &:not(:only-child) { + padding-left: 2.5em; + padding-right: 0.9375em; + } } + } } // CTA section .block-cta { - .has-gradient { - border-radius: $border-radius; - margin-bottom: 1.875em; - padding: 3.75em 3vw 1.875em; - } - - .block-header { - max-width: $container-sm; - text-align: center; - } + .has-gradient { + border-radius: $border-radius; + margin-bottom: 1.875em; + padding: 3.75em 3vw 1.875em; + } + + .block-header { + max-width: $container-sm; + text-align: center; + } - .block-title { - font-size: 1.875em; - } + .block-title { + font-size: 1.875em; + } - .block-subtitle { - font-size: 1.125em; - } + .block-subtitle { + font-size: 1.125em; + } } @media only screen and (min-width: 641px) { - .block-title { - font-size: 2.125em; - } + .block-title { + font-size: 2.125em; + } } @media only screen and (min-width: 801px) { - .block-cta { - .has-gradient { - padding-left: 7%; - padding-right: 7%; - } + .block-cta { + .has-gradient { + padding-left: 7%; + padding-right: 7%; + } - .block-header { - -ms-flex: 0 0 66.666%; - flex: 0 0 66.666%; - max-width: 66.666%; - text-align: left; - } + .block-header { + -ms-flex: 0 0 66.666%; + flex: 0 0 66.666%; + max-width: 66.666%; + text-align: left; + } - .block-buttons { - -ms-flex: 0 0 33.333%; - flex: 0 0 33.333%; - margin-top: 0; - max-width: 33.333%; - } + .block-buttons { + -ms-flex: 0 0 33.333%; + flex: 0 0 33.333%; + margin-top: 0; + max-width: 33.333%; } + } } // Grid section .block-grid { - .block-hero + & { - &:not(.has-header) { - background: 0; - padding-top: 0; - } + .block-hero + & { + &:not(.has-header) { + background: 0; + padding-top: 0; } + } - .block-header { - margin-bottom: 2em; - text-align: center; - } + .block-header { + margin-bottom: 2em; + text-align: center; + } - .block-title { - font-size: 1.875em; - } + .block-title { + font-size: 1.875em; + } - .grid-item { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - margin-bottom: 1.875em; - } + .grid-item { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + margin-bottom: 1.875em; + } } .grid-item-inside { - background: #fff; - border: 1px solid $gray-300; - border-radius: $border-radius-sm; - box-shadow: $box-shadow; - box-sizing: border-box; - -ms-flex-positive: 1; - flex-grow: 1; - padding-bottom: 0.75em; + background: #fff; + border: 1px solid $gray-300; + border-radius: $border-radius-sm; + box-shadow: $box-shadow; + box-sizing: border-box; + -ms-flex-positive: 1; + flex-grow: 1; + padding-bottom: 0.75em; } .grid-item-image { - border-radius: $border-radius-sm $border-radius-sm 0 0; - display: block; - width: 100%; + border-radius: $border-radius-sm $border-radius-sm 0 0; + display: block; + width: 100%; - img { - border-radius: $border-radius-sm $border-radius-sm 0 0; - } + img { + border-radius: $border-radius-sm $border-radius-sm 0 0; + } } .grid-item-title { - font-size: 1.5em; - margin: 1em 0 0.5em; - padding-left: 1em; - padding-right: 1em; - - &:first-child { - margin-top: 1.25em; - } - - a { - color: inherit !important; - text-decoration: none; - } + font-size: 1.5em; + margin: 1em 0 0.5em; + padding-left: 1em; + padding-right: 1em; + + &:first-child { + margin-top: 1.25em; + } + + a { + color: inherit !important; + text-decoration: none; + } } .grid-item-content, .grid-item-buttons { - padding-left: 1.5em; - padding-right: 1.5em; + padding-left: 1.5em; + padding-right: 1.5em; } .grid-item-content { - margin-bottom: 1.25em; + margin-bottom: 1.25em; } .grid-item-buttons { - a { - &:not(.button) { - &:after { - font-size: 1.125em; - content: '\2192'; - line-height: 1.5; - margin-left: 5px; - } - } + a { + &:not(.button) { + &:after { + font-size: 1.125em; + content: "\2192"; + line-height: 1.5; + margin-left: 5px; + } } + } } @media only screen and (max-width: 1000px) { - .block-grid { - .grid-item { - margin-bottom: 4vw; - } + .block-grid { + .grid-item { + margin-bottom: 4vw; } + } } // Hero section .block-hero { - padding-bottom: 7.5em; - position: relative; - text-align: center; + padding-bottom: 7.5em; + position: relative; + text-align: center; - .block-header { - margin-bottom: 0.75em; - } + .block-header { + margin-bottom: 0.75em; + } - .block-title { - font-size: 2.25em; - } + .block-title { + font-size: 2.25em; + } - .block-content { - font-size: 1.125em; - line-height: 1.5; - } + .block-content { + font-size: 1.125em; + line-height: 1.5; + } - & + .block { - margin-top: -5em; - position: relative; - } + & + .block { + margin-top: -5em; + position: relative; + } } @media only screen and (min-width: 641px) { - .block-hero { - .block-title { - font-size: 3em; - } + .block-hero { + .block-title { + font-size: 3em; + } - .block-content { - font-size: 1.25em; - } + .block-content { + font-size: 1.25em; + } - .block-buttons { - a { - font-size: 1em; - } - } + .block-buttons { + a { + font-size: 1em; + } } + } } diff --git a/src/sass/imports/_structure.scss b/src/sass/imports/_structure.scss index b742fe5515..a58a170946 100644 --- a/src/sass/imports/_structure.scss +++ b/src/sass/imports/_structure.scss @@ -1,38 +1,38 @@ .site { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - min-height: 100vh; - position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100vh; + position: relative; } .site-content { - box-sizing: border-box; - -ms-flex-positive: 1; - flex-grow: 1; - width: 100%; + box-sizing: border-box; + -ms-flex-positive: 1; + flex-grow: 1; + width: 100%; } .outer { - padding-left: 150px; - padding-right: 150px; + padding-left: $container-padding; + padding-right: $container-padding; } .inner { - margin-left: auto; - margin-right: auto; - max-width: 95%; + margin-left: auto; + margin-right: auto; + max-width: $container; } .inner-md { - margin-left: auto; - margin-right: auto; - max-width: 95%; + margin-left: auto; + margin-right: auto; + max-width: $container-md; } .inner-sm { - margin-left: auto; - margin-right: auto; - max-width: 95%; + margin-left: auto; + margin-right: auto; + max-width: $container-sm; } diff --git a/src/sass/imports/_tables.scss b/src/sass/imports/_tables.scss index 39fe6e9c5c..2f63c36b96 100644 --- a/src/sass/imports/_tables.scss +++ b/src/sass/imports/_tables.scss @@ -1,63 +1,63 @@ table { - border-collapse: collapse; - border-spacing: 0; - line-height: 1.5; - margin: 0; - max-width: 100%; - text-align: left; - width: 100%; + border-collapse: collapse; + border-spacing: 0; + line-height: 1.5; + margin: 0; + max-width: 100%; + text-align: left; + width: 100%; } caption { - color: $gray-500; - font-size: 0.875em; - font-style: normal; - margin-bottom: 1em; - text-align: left; + color: $gray-500; + font-size: 0.875em; + font-style: normal; + margin-bottom: 1em; + text-align: left; } th, td { - border-bottom: 1px solid $gray-300; - padding: 0.5em 5px; + border-bottom: 1px solid $gray-300; + padding: 0.5em 5px; } th { - color: $gray-700; - font-weight: bold; + color: $gray-700; + font-weight: bold; } :not(.responsive-table) > table { - display: block; - margin: 1.875em 0; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - - &:first-child { - margin-top: 0; - } - - tbody, - thead { - width: 100%; - } - - tr { - width: 100%; - } - - td { - min-width: 10em; - } -} + display: block; + margin: 1.875em 0; + overflow-x: auto; + -webkit-overflow-scrolling: touch; -.responsive-table { - display: block; - margin: 1.875em 0; - overflow-x: auto; + &:first-child { + margin-top: 0; + } + + tbody, + thead { width: 100%; + } - &:first-child { - margin-top: 0; - } + tr { + width: 100%; + } + + td { + min-width: 10em; + } +} + +.responsive-table { + display: block; + margin: 1.875em 0; + overflow-x: auto; + width: 100%; + + &:first-child { + margin-top: 0; + } } diff --git a/src/sass/imports/_variables.scss b/src/sass/imports/_variables.scss index 3219e73757..7b7cb50513 100644 --- a/src/sass/imports/_variables.scss +++ b/src/sass/imports/_variables.scss @@ -1,23 +1,23 @@ // Fonts -$font-primary: 'Lato', Helvetica, Arial, sans-serif !default; -$font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default; +$font-primary: "Lato", Helvetica, Arial, sans-serif !default; +$font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !default; // Colors -$color-primary: #00c6ff !default; +$color-primary: #00c6ff !default; $color-secondary: #0072ff !default; -$gray-100: #f8f8fa !default; -$gray-200: #ecedf2 !default; -$gray-300: #dde0e7 !default; -$gray-400: #9aa4b9 !default; -$gray-500: #67758d !default; -$gray-600: #424b5f !default; -$gray-700: #283040 !default; +$gray-100: #f8f8fa !default; +$gray-200: #ecedf2 !default; +$gray-300: #dde0e7 !default; +$gray-400: #9aa4b9 !default; +$gray-500: #67758d !default; +$gray-600: #424b5f !default; +$gray-700: #283040 !default; -$red: #fc381d !default; -$red-pale: #ffe9e6 !default; -$yellow: #fcb41d !default; -$yellow-pale: #fff7e6 !default; +$red: #fc381d !default; +$red-pale: #ffe9e6 !default; +$yellow: #fcb41d !default; +$yellow-pale: #fff7e6 !default; // Border radius $border-radius: 5px; @@ -27,7 +27,7 @@ $border-radius-sm: 3px; $box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08); // Container max width -$container: 1200px !default; +$container: 1200px !default; $container-sm: 680px !default; $container-md: 800px !default; @@ -39,16 +39,16 @@ $grid-gap: 1.875em !default; // Alternative theme palettes $theme-palettes: ( - green: ( - primary: #20c86e, - secondary: #1ba65b - ), - navy: ( - primary: #004e92, - secondary: #000428 - ), - violet: ( - primary: #8e2de2, - secondary: #4a00e0 - ) + green: ( + primary: #20c86e, + secondary: #1ba65b + ), + navy: ( + primary: #004e92, + secondary: #000428 + ), + violet: ( + primary: #8e2de2, + secondary: #4a00e0 + ) ); diff --git a/src/sass/main.scss b/src/sass/main.scss index 41d54cf8c3..fd0fbda774 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,18 +1,18 @@ -@import 'imports/functions'; -@import 'imports/variables'; -@import 'imports/reset'; -@import 'imports/general'; -@import 'imports/tables'; -@import 'imports/forms'; -@import 'imports/buttons'; -@import 'imports/icons'; -@import 'imports/helpers'; -@import 'imports/animations'; -@import 'imports/structure'; -@import 'imports/header'; -@import 'imports/posts'; -@import 'imports/docs'; -@import 'imports/sections'; -@import 'imports/footer'; -@import 'imports/palettes'; +@import "imports/functions"; +@import "imports/variables"; +@import "imports/reset"; +@import "imports/general"; +@import "imports/tables"; +@import "imports/forms"; +@import "imports/buttons"; +@import "imports/icons"; +@import "imports/helpers"; +@import "imports/animations"; +@import "imports/structure"; +@import "imports/header"; +@import "imports/posts"; +@import "imports/docs"; +@import "imports/sections"; +@import "imports/footer"; +@import "imports/palettes"; //@import "imports/prism";