rolfiee/wiki
1
Fork 0
mirror of https://github.com/rolfiee/wiki.git synced 2025-06-18 11:15:33 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve support for old browsers

Browse Source 
The site is now functional, though not perfect, on the n3DS browser (and also Safari 5.0.6, the Vita browser, and probably more)
This commit is contained in:
Pk11 2021-06-27 00:28:27 -05:00
parent 69a49bddd8
commit 06f775b62e
13 changed files with 417 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -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: ""

4
_includes/common-js.html
View File

@ -1,6 +1,8 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="/assets/js/language-alert.js" type="module"></script>
<script src="/assets/js/rescript.js" type="module"></script>
{% if content contains "tab-container" %}
<script src="/assets/js/tabs.js"></script>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

23
_includes/nav.html
View File

@ -3,26 +3,25 @@
<span class="navbar-brand">
<a class="navbar-brand mb-0 h1" href="{% unless page.collection == "en-US" %}/{{ page.collection }}{% endunless %}{{ site.data[page.collection].nav[0].url }}" accesskey="h">{{ site.data[page.collection].strings.title }}</a>
</span>
<button class="navbar-toggler mr-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ site.data[page.collection].strings.toggle-navigation }}">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ site.data[page.collection].strings.toggle-navigation }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<div class="collapse navbar-collapse hover-content" id="navbarSupportedContent">
<ul class="navbar-nav">
{% for item in site.data[page.collection].nav %}
{% if item.url %}
<li class="nav-item">
{% assign section = "/" | append: page.section %}
<a class="nav-link {% if item.url == section %} active {% endif %}" href="{% unless page.collection == "en-US" %}/{{ page.collection }}{% endunless %}{{ item.url }}">{{ item.title }}</a>
</li>
{% endif %}
{% if item.items %}
{% elsif item.items %}
<li class="nav-item dropdown">
{% assign section = "/" | append: page.section %}
<a class="nav-link {% for entry in item.items %}{% if entry.url == section %} active {% endif %}{% endfor %} dropdown-toggle" href="#" id="navbar-dropdown-menu-link-{{ item.title }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ item.title }}</a>
<div class="dropdown-menu hover-content" aria-labelledby="navbar-dropdown-menu-link-{{ item.title }}">
<ul class="list-unstyled">
{% for entry in item.items %}
<li><a class="dropdown-item{% if entry.url == section %} active {% endif %}" href="{% unless page.collection == "en-US" %}/{{ page.collection }}{% endunless %}{{ entry.url }}" {% if entry.key %}accesskey="{{ entry.key }}"{% endif %}>{{ entry.title }}</a></li>
<li><a class="dropdown-item{% if entry.url == section %} active {% endif %}" href="{% unless page.collection == "en-US" %}/{{ page.collection }}{% endunless %}{{ entry.url }}" {% if entry.key %}accesskey="{{ entry.key }}"{% endif %}>{{ entry.title }}</a></li>
{% endfor %}
</ul>
</div>
@ -30,11 +29,11 @@
{% endif %}
{% endfor %}
<li class="nav-item">
<a class="nav-link" href="https://github.com/{{ page.repo | default: site.repo }}" accesskey="s">{{ site.data[page.collection].strings.source}}</a>
<a class="nav-link" href="https://github.com/{{ page.repo | default: site.repo }}" accesskey="s">{{ site.data[page.collection].strings.source }}</a>
</li>
</ul>
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ site.data[page.collection].strings.select-language }}">
<div class="btn-group dropdown lang-select-dropdown">
<button type="button" class="btn btn-primary dropdown-toggle i18n aria-label-select-language" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Select language">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4H2.255a7.025 7.025 0 0 1 3.072-2.472 6.7 6.7 0 0 0-.597.933c-.247.464-.462.98-.64 1.539zm-.582 3.5h-2.49c.062-.89.291-1.733.656-2.5H3.82a13.652 13.652 0 0 0-.312 2.5zM4.847 5H7.5v2.5H4.51A12.5 12.5 0 0 1 4.846 5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5H7.5V11H4.847a12.5 12.5 0 0 1-.338-2.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12H7.5v2.923c-.67-.204-1.335-.82-1.887-1.855A7.97 7.97 0 0 1 5.145 12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11H1.674a6.958 6.958 0 0 1-.656-2.5h2.49c.03.877.138 1.718.312 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12h2.355a7.967 7.967 0 0 1-.468 1.068c-.552 1.035-1.218 1.65-1.887 1.855V12zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5h-2.49A13.65 13.65 0 0 0 12.18 5h2.146c.365.767.594 1.61.656 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4H8.5V1.077c.67.204 1.335.82 1.887 1.855.173.324.33.682.468 1.068z"/>
</svg>
@ -58,10 +57,4 @@
</div>
</div>
</div>
<script>
/* Remove hover classes */
Array.from(document.getElementsByClassName("hover-content")).forEach(r => {
r.classList.remove("hover-content");
});
</script>
</nav>

1
_includes/script-show.html Normal file
View File

@ -0,0 +1 @@
<script>document.scripts[document.scripts.length - 1].parentElement.classList.remove("d-none")</script>

15
_layouts/faq.html
View File

@ -12,19 +12,16 @@ layout: wiki
{% assign faqs = faqs | where_exp: "faq", "faq contains '</h4>'" %}
{% for faq in faqs %}
{% assign id = faq | split: "</h4>" | first | split: ">" | first | replace: "id=", "" | replace: '"', "" %}
<div class="accordian-item">
<input id="faq-{{ id }}" class="d-none" name="faqs" type="radio">
<label for="faq-{{ id }}" onclick="setFaq('{{ id }}')">
<h2 class="accordion-header accordion-button collapsed flex-fill">
{{ faq | split: "</h4>" | first | split: ">" | last }}
</h2>
</label>
<div class="faq accordion-collapse show">
<details class="accordian-item" id="faq-{{ id }}">
<summary class="accordion-header accordion-button collapsed flex-fill" onclick="setFaq('{{ id }}')">
{{ faq | split: "</h4>" | first | split: ">" | last }}
</summary>
<div class="faq accordion-collapse">
<div class="accordion-body">
{{ faq | split: "</h4>" | last }}
</div>
</div>
</div>
</details>
{% endfor %}
</div>

393
assets/css/style.scss → _sass/base.scss
View File

@ -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 <a>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;
}
}

86
assets/css/dark.scss
View File

@ -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);
}

81
assets/css/light.scss
View File

@ -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);
}

2
assets/css/style.css Normal file
View File

@ -0,0 +1,2 @@
@import url("light.css");
@import url("dark.css") (prefers-color-scheme: dark);

44
assets/js/faq.js
View File

@ -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;
}
}
}

4
assets/js/rescript.js Normal file
View File

@ -0,0 +1,4 @@
// Make navbar not open on hover
Array.from(document.getElementsByClassName("hover-content")).forEach(r => {
r.classList.remove("hover-content");
});

44
assets/js/tabs.js
View File

@ -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)

10
assets/js/theme.js
View File

@ -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;
}