From 06f775b62e880d5a1d2e00a86e2cc4bdc4f70070 Mon Sep 17 00:00:00 2001 From: Pk11 Date: Sun, 27 Jun 2021 00:28:27 -0500 Subject: [PATCH] Improve support for old browsers The site is now functional, though not perfect, on the n3DS browser (and also Safari 5.0.6, the Vita browser, and probably more) --- _config.yml | 3 + _includes/common-js.html | 4 +- _includes/nav.html | 23 +- _includes/script-show.html | 1 + _layouts/faq.html | 15 +- assets/css/style.scss => _sass/base.scss | 393 ++++++++++++++--------- assets/css/dark.scss | 86 ++--- assets/css/light.scss | 81 ++--- assets/css/style.css | 2 + assets/js/faq.js | 44 ++- assets/js/rescript.js | 4 + assets/js/tabs.js | 44 ++- assets/js/theme.js | 10 +- 13 files changed, 417 insertions(+), 293 deletions(-) create mode 100644 _includes/script-show.html rename assets/css/style.scss => _sass/base.scss (54%) create mode 100644 assets/css/style.css create mode 100644 assets/js/rescript.js diff --git a/_config.yml b/_config.yml index 10071882..77c0e60a 100644 --- a/_config.yml +++ b/_config.yml @@ -6,6 +6,9 @@ image : "https://avatars1.githubusercontent.com/u/46971470?s=200&v=4" collections_dir: pages +sass: + sass_dir: _sass + defaults: - scope: path: "" diff --git a/_includes/common-js.html b/_includes/common-js.html index e5181b50..83ae12f3 100644 --- a/_includes/common-js.html +++ b/_includes/common-js.html @@ -1,6 +1,8 @@ - + {% if content contains "tab-container" %} {% endif %} + + diff --git a/_includes/nav.html b/_includes/nav.html index 07ac25ae..77edae45 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -3,26 +3,25 @@ {{ site.data[page.collection].strings.title }} - - - diff --git a/_includes/script-show.html b/_includes/script-show.html new file mode 100644 index 00000000..f3053c62 --- /dev/null +++ b/_includes/script-show.html @@ -0,0 +1 @@ + diff --git a/_layouts/faq.html b/_layouts/faq.html index c39b1436..7065c99d 100644 --- a/_layouts/faq.html +++ b/_layouts/faq.html @@ -12,19 +12,16 @@ layout: wiki {% assign faqs = faqs | where_exp: "faq", "faq contains ''" %} {% for faq in faqs %} {% assign id = faq | split: "" | first | split: ">" | first | replace: "id=", "" | replace: '"', "" %} -
- - -
+
+ +
{{ faq | split: "" | last }}
-
+ {% endfor %}
diff --git a/assets/css/style.scss b/_sass/base.scss similarity index 54% rename from assets/css/style.scss rename to _sass/base.scss index b22cd96d..71f142a6 100644 --- a/assets/css/style.scss +++ b/_sass/base.scss @@ -1,9 +1,3 @@ ---- ---- - -@import url("light.css"); -@import url("dark.css") (prefers-color-scheme: dark); - // For the bottom aligned footer html, body { height: 100%; @@ -11,26 +5,25 @@ html, body { body { display: flex; flex-direction: column; + font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; } -.content { - flex: 1 0 auto; -} + footer { flex-shrink: 0; padding-top: 20px; } body { - color: var(--main-color); - background-color: var(--main-bg); + color: $main-color; + background-color: $main-bg; } h1, h2, h3, h4, h5, h6 { - color: var(--header-color); + color: $header-color; } h2 { - border-bottom: 1px solid var(--borders); + border-bottom: 1px solid $borders; } hr { @@ -38,15 +31,15 @@ hr { } blockquote { - color: var(--blockquote-color); + color: $blockquote-color; margin-bottom: 20px; padding: 0 0 0 20px; - border-left: 3px solid var(--borders); + border-left: 3px solid $borders; } :not(pre) > code, pre { - color: var(--code-color); - background-color: var(--code-bg); + color: $code-color; + background-color: $code-bg; padding: 3px; border-radius: 0.25rem; white-space: nowrap; @@ -64,14 +57,14 @@ a > code { div.language-bash pre.highlight code::before { content: "$ "; - color: var(--code-light); + color: $code-light; } // .a is for making other things look like s a, .a { text-decoration: none; text-decoration-thickness: 1px; - color: var(--a-color); + color: $a-color; cursor: pointer; } a:hover, .a:hover { @@ -94,7 +87,7 @@ footer a:hover { small { font-size: 75%; - color: var(--small-color); + color: $small-color; } img { @@ -102,6 +95,15 @@ img { height: auto; } +.content { + flex: 1 0 auto; +} + +.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + .btn, .btn a, a.btn { text-decoration: none; } @@ -117,53 +119,53 @@ div .btn-primary:hover { // Override bootstraps primary color .bg-primary { - background-color: var(--primary)!important; + background-color: $primary!important; } .btn-primary, .btn-primary:focus { - color: var(--nav-link-color); - background-color: var(--primary)!important; - border-color: var(--primary)!important; + color: $nav-link-color; + background-color: $primary!important; + border-color: $primary!important; } .btn-primary:hover, .btn-primary:active { - color: var(--nav-link-color)!important; + color: $nav-link-color!important; opacity: 0.8; } .btn-outline-primary { - color: var(--primary); - border-color: var(--primary); + color: $primary; + border-color: $primary; } .btn-outline-primary:hover, .btn-outline-primary:active { - background-color: var(--primary)!important; - border-color: var(--primary)!important; + background-color: $primary!important; + border-color: $primary!important; } .text-primary { - background-color: var(--primary)!important; + background-color: $primary!important; } // Override the secondary text color .btn-outline-secondary { - color: var(--main-color); + color: $main-color; } .alert-secondary { - color: var(--code-color); - background-color: var(--alert-secondary-bg); - border-color: var(--alert-secondary-border); + color: $code-color; + background-color: $alert-secondary-bg; + border-color: $alert-secondary-border; } // Override the dark text too .text-dark { - color: var(--dark)!important; + color: $dark!important; } // And the light bg .bg-light { - background-color: var(--light)!important; - border-color: var(--light-border)!important; + background-color: $light!important; + border-color: $light-border!important; } .bg-light::placeholder { - color: var(--light-placeholder); + color: $light-placeholder; } // No underline on navbar links @@ -178,23 +180,33 @@ div .btn-primary:hover { // Override nav-link color .navbar .nav-link { - color: var(--nav-link-color)!important; + color: $nav-link-color!important; } .navbar .nav-link:hover { - color: var(--nav-link-color-hover)!important; + color: $nav-link-color-hover!important; } // And the active nav-link color .navbar .nav-link.active { - color: var(--nav-link-color-active)!important; + color: $nav-link-color-active!important; } .navbar .nav-link.active:hover { - color: var(--nav-link-color-hover)!important; + color: $nav-link-color-hover!important; +} + +// Fixes for navbar on older browsers +.navbar-toggler { + position: absolute; + right: 0.75rem; +} + +.navbar { + min-height: 3.5rem; } // Make dropdowns site-colored and animated .dropdown-menu, .dropdown .hover-content { - background-color: var(--primary); + background-color: $primary; -webkit-transition: 300ms ease; transition: 300ms ease; display: block; @@ -216,15 +228,19 @@ div .btn-primary:hover { visibility: visible; } +.navbar-toggler:hover+.navbar-collapse.hover-content, .navbar-collapse.hover-content:hover { + display: block; +} + .dropdown-item { - color: var(--nav-link-color); + color: $nav-link-color; } .dropdown-item.active { background-color: unset; } .dropdown-item:hover, .dropdown-item:active, .dropdown-item:focus { - background-color: var(--dropdown-item-bg-hover); - color: var(--nav-link-color-hover); + background-color: $dropdown-item-bg-hover; + color: $nav-link-color-hover; } // Make images smaller @@ -233,25 +249,77 @@ div .btn-primary:hover { max-height: 250px; } -.btn-back { - position: absolute; - left: 5px; - margin: 5px 0; - font-size: 8pt; - padding: 5px; - z-index: 10; + +html:not([dir=rtl]) { + .btn-back { + position: absolute; + left: 5px; + margin: 5px 0; + font-size: 8pt; + padding: 5px; + z-index: 10; + } + + .btn-with-qr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: 0!important; + padding-right: 0.25rem; + } + + .btn-qr { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -5px!important; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .end-3 { + right: 1rem; + } +} + +html[dir=rtl] { + .btn-back { + position: absolute; + right: 5px; + margin: 5px 0; + font-size: 8pt; + padding: 5px; + z-index: 10; + } + + .btn-with-qr { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: 0!important; + padding-left: 0.25rem; + } + + .btn-qr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -5px!important; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .end-3 { + left: 1rem; + } } // Input box .input-group-text { - color: var(--light-placeholder); - background-color: var(--light); - border-color: var(--light-border); + color: $light-placeholder; + background-color: $light; + border-color: $light-border; } .form-control, .form-control:focus, .form-control::placeholder { - color: var(--light-placeholder); - background-color: var(--light); - border-color: var(--light-border); + color: $light-placeholder; + background-color: $light; + border-color: $light-border; } // Cards @@ -264,8 +332,8 @@ div .btn-primary:hover { font-weight: normal; } -.card:hover a h4 { - color: inherit; +.card a:hover h4, .card a:hover small, .card a:hover p.card-text { + opacity: 50%; } .card-footer a { @@ -284,44 +352,51 @@ div .btn-primary:hover { } .card { - background-color: var(--card-background); + background-color: $card-background; } .card-header, .card-footer { - background-color: var(--card-edges-background); + background-color: $card-edges-background; } .pointer { cursor: pointer; } +.card-qr { + color: $small-color; +} + +.card-qr:hover { + opacity: 75%; +} + .qr-image { border-radius: 1rem; } .modal-content { - background-color: var(--main-bg); + background-color: $main-bg; } .modal-header { - border-bottom: var(--modal-borders); + border-bottom: $modal-borders; } .modal-footer { - border-top: var(--modal-borders); + border-top: $modal-borders; } .carousel-label { - background-color: var(--carousel-caption-bg); + background-color: $carousel-caption-bg; border-radius: 10px; } -.li-bullet { +html[dir=lrt] .li-bullet { list-style: disc; margin-left: 1.25em; } html[dir=rtl] .li-bullet { list-style: disc; - margin-left: 0; margin-right: 1.5em; } @@ -331,14 +406,11 @@ html[dir=rtl] .li-bullet { display: none; } -h1:hover .header-anchor, -h2:hover .header-anchor, -h3:hover .header-anchor, -h4:hover .header-anchor, -h5:hover .header-anchor, -h6:hover .header-anchor { - display: inline; - text-decoration: none; +h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover { + .header-anchor { + display: inline; + text-decoration: none; + } } // Tables @@ -350,15 +422,14 @@ table th { } table th, table td { padding: 6px 13px; - border: 1px solid var(--light-borders); + border: 1px solid $light-borders; } table tr:nth-child(2n) { - background-color: var(--table-alt-bg); + background-color: $table-alt-bg; } - // Fix bootstrap messing up the th bottom borders and dark mode text .table>:not(:last-child)>:last-child>* { - border-bottom-color: var(--light-borders); + border-bottom-color: $light-borders; } .table { @@ -370,12 +441,12 @@ kbd { padding: 3px 6px; font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; line-height: 10px; - color: var(--main-color); + color: $main-color; vertical-align: middle; - background-color: var(--kbd-bg); - border: 1px solid var(--kbd-border); + background-color: $kbd-bg; + border: 1px solid $kbd-border; border-radius: 6px; - box-shadow: inset 0 -1px 0 var(--kbd-border); + box-shadow: inset 0 -1px 0 $kbd-border; } kbd.l { @@ -395,7 +466,7 @@ kbd.face { // Sidebar .sidebar-container { font-size: 0.9rem; - border: 1px solid var(--borders); + border: 1px solid $borders; } .sidebar-container ul { @@ -412,7 +483,7 @@ kbd.face { } .details-content { - background-color: var(--details-bg); + background-color: $details-bg; margin-left: 1rem; padding: 0.5rem; border-radius: 0.5rem; @@ -460,71 +531,19 @@ a.footnote::after { .tab-container { display: flex; flex-wrap: wrap; -} -.tab-container > .tab { - display: none; - order: 99; - padding-top: 1rem; - width: 100%; -} - -input:checked+label+.tab { - display: block; -} - -.tab-container > label { - margin-right: 0.25rem; -} - -input:checked+label.btn-outline-secondary { - color: #fff; - background-color: #6c757d; - border-color: #6c757d; -} - -input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus { - color: #fff; - background-color: #5c636a; - border-color: #565e64; -} - -// FAQs -#faq-container { - margin-bottom: 1rem; - - > div { - > .faq { - display: none; - background-color: var(--active-accordian-bg-color); - } - - > label { - width: 100%; + .tab { + display: none; + order: 99; + padding-top: 1rem; + width: 100%; + } - > h2 { - font-weight: normal; - color: var(--header-color); - } - } - } - - - input:checked + label > h2 { - color: var(--active-accordian-header-color); - background-color: var(--active-accordian-header-bg-color); - } - - input:checked + label > h2::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); - transform: rotate(-180deg); - } - - input:checked + label + .faq { + input:checked + label + .tab { display: block; } - #faq-container > label { + abel { margin-right: 0.25rem; } @@ -534,25 +553,75 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline border-color: #6c757d; } - input:checked + label.btn-outline-secondary:hover, input:checked + label.btn-outline-secondary:active, input:checked + label.btn-outline-secondary:focus { + input:checked + label.btn-outline-secondary:hover, input:checked + label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus { color: #fff; background-color: #5c636a; border-color: #565e64; } } + +// FAQs +#faq-container { + margin-bottom: 1rem; + + > details.accordian-item { + margin-bottom: 0; + + > summary.accordion-button { + color: $header-color; + + &::-webkit-details-marker { + display: none; + } + + &::after { + position: absolute; + right: 1rem; + } + } + + > .faq { + background-color: $active-accordian-bg-color; + } + + &[open] { + summary.accordion-button { + color: $active-accordian-header-color; + background-color: $active-accordian-header-bg-color; + + &::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + transform: rotate(-180deg); + } + } + } + } +} + // Select .form-select-dark { background-color: #444; border: 1px solid #333; } -@media only screen and (min-width: 576px) { - // Version of .position-absolute that only triggers for sm+ - .position-absolute-sm { - position: absolute!important; - } +// SVG +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +.icon-qr_code { + font-size: 14px; + margin-top: -3px; +} + + +@media only screen and (min-width: 576px) { // Seems to be broken in RTL in bootstrap v5.0-beta1, so override here html[dir=rtl] .dropdown-menu-sm-end { --bs-position: end; @@ -588,3 +657,21 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline background-color: inherit; } } + +@media only screen and (min-width: 576px) { + // Fix nav on old browsers that don't support flex + .navbar-expand-sm .navbar-collapse { + display: block; + } + + nav { + .navbar-brand, .navbar-toggler, .navbar-collapse, .navbar-nav, li.nav-item, .dropdown { + display: inline-block; + } + } + + .lang-select-dropdown, .navbar-toggler { + position: absolute; + right: 0.75rem; + } +} diff --git a/assets/css/dark.scss b/assets/css/dark.scss index 79d833c2..bafff61c 100755 --- a/assets/css/dark.scss +++ b/assets/css/dark.scss @@ -1,56 +1,58 @@ --- --- -:root { - // Main contents - --main-bg: #333; - --main-color: #ccc; - --header-color: #ddd; - --borders: #555; - --light-borders: #444; - --blockquote-color: #999; - --code-bg: #5559; - --code-color: #ddd; - --code-light: #999; - --a-color: #58a6ff; - --small-color: gray; - --carousel-caption-bg: #333b; - --table-alt-bg: #303030; - --kbd-bg: #666; - --kbd-border: #444; - --alert-secondary-bg: #444; - --alert-secondary-border: #2f2f2f; - --details-bg: #3f3f3f; - --active-accordian-bg-color: #393939; - --active-accordian-header-color: #222; - --active-accordian-header-bg-color: #4477ac; +/// Variables +// Main contents +$main-bg: #333; +$main-color: #ccc; +$header-color: #ddd; +$borders: #555; +$light-borders: #444; +$blockquote-color: #999; +$code-bg: #5559; +$code-color: #ddd; +$code-light: #999; +$a-color: #58a6ff; +$small-color: gray; +$carousel-caption-bg: #333b; +$table-alt-bg: #303030; +$kbd-bg: #666; +$kbd-border: #444; +$alert-secondary-bg: #444; +$alert-secondary-border: #2f2f2f; +$details-bg: #3f3f3f; +$active-accordian-bg-color: #393939; +$active-accordian-header-color: #222; +$active-accordian-header-bg-color: #4477ac; - // Cards - --card-background: #444; - --card-edges-background: rgba(0, 0, 0, 0.15); +// Cards +$card-background: #444; +$card-edges-background: rgba(0, 0, 0, 0.15); - // Modal - --modal-borders: 1px solid rgba(0, 0, 0, 0.2); +// Modal +$modal-borders: 1px solid rgba(0, 0, 0, 0.2); - // Nav - --nav-link-color: rgba(255, 255, 255, 0.7); - --nav-link-color-hover: rgba(255, 255, 255, 0.5); - --nav-link-color-active: rgba(255, 255, 255, 1); - --dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); - --primary: {{ page.color | default: site.color }}; - --dark: #f8f9fa; - --light: #3f3f3f; - --light-border: #292929; - --light-placeholder: #999; -} +// Nav +$nav-link-color: rgba(255, 255, 255, 0.7); +$nav-link-color-hover: rgba(255, 255, 255, 0.5); +$nav-link-color-active: rgba(255, 255, 255, 1); +$dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); +$primary: {{ page.color | default: site.color }}; +$dark: #f8f9fa; +$light: #3f3f3f; +$light-border: #292929; +$light-placeholder: #999; +/// Import base style +@import "base"; + +/// CSS Overrides // Override FAQ accordian chevron color -#faq-container input + label > h2::after { +#faq-container > details.accordian-item > summary.accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ddd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } -#faq-container input:checked + label > h2::after { +#faq-container > details.accordian-item[open] > summary.accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); - color: red; transform: rotate(-180deg); } diff --git a/assets/css/light.scss b/assets/css/light.scss index 6c26f804..44d14832 100755 --- a/assets/css/light.scss +++ b/assets/css/light.scss @@ -1,49 +1,52 @@ --- --- -:root { - // Main contents - --main-bg: #fff; - --main-color: #222; - --header-color: #222; - --borders: #bbb; - --light-borders: #dee2e6; - --blockquote-color: #666; - --code-bg: #ccc6; - --code-color: #333; - --code-light: #999; - --a-color: #0366d6; - --small-color: gray; - --carousel-caption-bg: #fffb; - --table-alt-bg: #f3f3f3; - --kbd-bg: #fafafa; - --kbd-border: #ddd; - --alert-secondary-bg: #e9e9e9; - --alert-secondary-border: #bbb; - --details-bg: #f9f9f9; - --active-accordian-bg-color: #fcfcfc; - --active-accordian-header-color: #0c63e4; - --active-accordian-header-bg-color: #e7f1ff; +/// Variables +// Main contents +$main-bg: #fff; +$main-color: #222; +$header-color: #222; +$borders: #bbb; +$light-borders: #dee2e6; +$blockquote-color: #666; +$code-bg: #ccc6; +$code-color: #333; +$code-light: #999; +$a-color: #0366d6; +$small-color: gray; +$carousel-caption-bg: #fffb; +$table-alt-bg: #f3f3f3; +$kbd-bg: #fafafa; +$kbd-border: #ddd; +$alert-secondary-bg: #e9e9e9; +$alert-secondary-border: #bbb; +$details-bg: #f9f9f9; +$active-accordian-bg-color: #fcfcfc; +$active-accordian-header-color: #0c63e4; +$active-accordian-header-bg-color: #e7f1ff; - // Cards - --card-background: var(--main-bg); - --card-edges-background: rgba(0,0,0,.03); +// Cards +$card-background: var(--main-bg); +$card-edges-background: rgba(0,0,0,.03); - // Modal - --modal-borders: 1px solid #dee2e6; +// Modal +$modal-borders: 1px solid #dee2e6; - // Nav - --nav-link-color: rgba(255, 255, 255, 0.7); - --nav-link-color-hover: rgba(255, 255, 255, 0.5); - --nav-link-color-active: rgba(255, 255, 255, 1); - --dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); - --primary: {{ page.color | default: site.color }}; - --dark: #343a40; - --light: #f8f9fa; - --light-border: #ced4da; - --light-placeholder: darkgray; -} +// Nav +$nav-link-color: rgba(255, 255, 255, 0.7); +$nav-link-color-hover: rgba(255, 255, 255, 0.5); +$nav-link-color-active: rgba(255, 255, 255, 1); +$dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); +$primary: {{ page.color | default: site.color }}; +$dark: #343a40; +$light: #f8f9fa; +$light-border: #ced4da; +$light-placeholder: darkgray; +/// Import base style +@import "base"; + +/// CSS Overrides .carousel-dark-when-light .carousel-control-next-icon, .carousel-dark-when-light .carousel-control-prev-icon { filter: invert(1) grayscale(100); } diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 00000000..d557ab04 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,2 @@ +@import url("light.css"); +@import url("dark.css") (prefers-color-scheme: dark); diff --git a/assets/js/faq.js b/assets/js/faq.js index 98e7a290..a04fca5e 100644 --- a/assets/js/faq.js +++ b/assets/js/faq.js @@ -1,24 +1,34 @@ -function setFaq(tab) { - if(document.getElementById(`faq-${tab}`).checked) { - let url = new URL(window.location); - url.searchParams.delete("faq"); - history.pushState({}, "", url); - // TODO: This is dumb, try do it better - window.setTimeout(() => document.getElementById(`faq-${tab}`).checked = false, 100); - } else { - let url = new URL(window.location); - url.searchParams.set("faq", tab); - history.pushState({}, "", url); +function setFaq(faq) { + const otherFaqs = document.querySelectorAll("#faq-container > .accordian-item:not(#faq-" + faq + ")"); + for(i = 0; i < otherFaqs.length; i++) { + otherFaqs[i].open = false; } + var url = window.location.href; + if(document.getElementById("faq-" + faq).open) { // Remove FAQ param from URL if was open + url = url.replace(/([?&])faq=.*?(\&|#|$)/, function(m, m1, m2) { return (m1 == "?" && m2 == "&") ? "?" : ""; }); + } else if(url.match(/[?&]faq=/)) { // Already has a FAQ param + url = url.replace(/([?&]faq=)(.*?)(?=\&|#|$)/, "$1" + faq); + } else if(url.match(/\?/)) { // Already has other search params + url = url.replace(/[?&].*?(?=#|$)/, "$&&faq=" + faq); + } else { // No search params + url = url.replace(/(?=#|$)/, "?faq=" + faq); + } + + if(url != window.location.href) // Don't update if not changed + history.pushState({}, "", encodeURI(url)); } // Try get FAQ from URL -let urlFaq = new URL(window.location).searchParams.get("faq"); -if(urlFaq) { - faq = Array.from(document.getElementById("faq-container").children).filter(r => r.children[0].id == `faq-${urlFaq}`)[0]; - if(faq) { - faq.children[0].click(); - faq.children[1].scrollIntoView(); +const urlFaq = decodeURI(window.location.href).match(/[?&]faq=(.*?)(?=\&|#|$)/); +if(urlFaq && urlFaq.length > 1) { + const faqs = document.getElementById("faq-container").children; + for(i = 0; i < faqs.length; i++) { + const faq = faqs[i]; + if(faq.id == "faq-" + urlFaq[1]) { + faq.open = true; + faq.scrollIntoView(); + break; + } } } diff --git a/assets/js/rescript.js b/assets/js/rescript.js new file mode 100644 index 00000000..601fdc45 --- /dev/null +++ b/assets/js/rescript.js @@ -0,0 +1,4 @@ +// Make navbar not open on hover +Array.from(document.getElementsByClassName("hover-content")).forEach(r => { + r.classList.remove("hover-content"); +}); diff --git a/assets/js/tabs.js b/assets/js/tabs.js index 59bfc96a..78fd2ded 100644 --- a/assets/js/tabs.js +++ b/assets/js/tabs.js @@ -1,30 +1,50 @@ const platforms = { - "Win32": "tab-windows", - "MacIntel": "tab-macos" + "Win32": "windows", + "MacIntel": "macos", + "MacPPC": "macos" }; function setTab(tab) { - let url = new URL(window.location); - url.searchParams.set("tab", tab); - history.pushState({}, "", url); + var url = window.location.href; + if(url.match(/[?&]tab=/)) { // Already has a tab param + url = url.replace(/([?&]tab=)(.*?)(?=\&|#|$)/, "$1" + tab) + } else if(url.match(/\?/)) { // Already has other search params + url = url.replace(/[?&].*?(?=#|$)/, "$&&tab=" + tab); + } else { // No search params + url = url.replace(/(?=#|$)/, "?tab=" + tab); + } + + if(url != window.location.href) // Don't update if not changed + history.pushState({}, "", encodeURI(url)); +} + +function findTab(tabGroup, tabName) { + for(j = 0; j < tabGroup.children.length; j++) { + if(tabGroup.children[j].id == "tab-" + tabName) { + return tabGroup.children[j]; + } + } } // Open the tabs for the current OS or the one in the URL -for(let tabGroup of document.getElementsByClassName("tab-container")) { - let tab = null; +const tabContainers = document.getElementsByClassName("tab-container"); +for(i = 0; i < tabContainers.length; i++) { + const tabGroup = tabContainers[i]; + + var tab = null; // Try get tab from URL - let urlTab = new URL(window.location).searchParams.get("tab"); - if(urlTab) - tab = Array.from(tabGroup.children).filter(r => r.id == `tab-${urlTab}`)[0]; + const urlTab = decodeURI(window.location.href).match(/[?&]tab=(.*?)(?=\&|#|$)/); + if(urlTab && urlTab.length > 1) + tab = findTab(tabGroup, urlTab[1]); // Try get tab for OS if(!tab) - tab = Array.from(tabGroup.children).filter(r => r.id == platforms[navigator.platform])[0]; + tab = findTab(tabGroup, platforms[navigator.platform]); // Fall back to "other" tab if(!tab) - tab = Array.from(tabGroup.children).filter(r => r.id == "tab-other")[0]; + tab = findTab(tabGroup, "other"); // If a tab was found, open it if(tab) diff --git a/assets/js/theme.js b/assets/js/theme.js index 8c86f2dc..afc38dba 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,17 +1,17 @@ function loadTheme() { - let themeCSS = document.getElementById("themeCSS"); + const themeCSS = document.getElementById("themeCSS"); if(!localStorage.theme || localStorage.theme == "default") { if(themeCSS) themeCSS.remove(); } else { if(themeCSS) { - themeCSS.href = `/assets/css/${localStorage.theme}.css`; + themeCSS.href = "/assets/css/" + localStorage.theme +".css"; } else { - let l = document.createElement("link"); + const l = document.createElement("link"); l.rel = "stylesheet"; l.type = "text/css"; l.media = "screen"; - l.href = `/assets/css/${localStorage.theme}.css` + l.href = "/assets/css/" + localStorage.theme +".css" l.id = "themeCSS"; document.head.appendChild(l); @@ -29,7 +29,7 @@ function setTheme(theme) { loadTheme(); -window.onload = () => { +window.onload = function() { if(localStorage.theme) document.getElementById("themeSelector").value = localStorage.theme; }