rolfiee/wiki
1
Fork 0
mirror of https://github.com/rolfiee/wiki.git synced 2025-06-18 19:25:38 -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 collections_dir: pages
sass:
sass_dir: _sass
defaults: defaults:
- scope: - scope:
path: "" 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/language-alert.js" type="module"></script>
<script src="/assets/js/rescript.js" type="module"></script>
{% if content contains "tab-container" %} {% if content contains "tab-container" %}
<script src="/assets/js/tabs.js"></script> <script src="/assets/js/tabs.js"></script>
{% endif %} {% 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"> <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> <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> </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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse hover-content" id="navbarSupportedContent">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav">
{% for item in site.data[page.collection].nav %} {% for item in site.data[page.collection].nav %}
{% if item.url %} {% if item.url %}
<li class="nav-item"> <li class="nav-item">
{% assign section = "/" | append: page.section %} {% 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> <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> </li>
{% endif %} {% elsif item.items %}
{% if item.items %}
<li class="nav-item dropdown"> <li class="nav-item dropdown">
{% assign section = "/" | append: page.section %} {% 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> <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 }}"> <div class="dropdown-menu hover-content" aria-labelledby="navbar-dropdown-menu-link-{{ item.title }}">
<ul class="list-unstyled"> <ul class="list-unstyled">
{% for entry in item.items %} {% 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 %} {% endfor %}
</ul> </ul>
</div> </div>
@ -30,11 +29,11 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<li class="nav-item"> <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> </li>
</ul> </ul>
<div class="btn-group dropdown"> <div class="btn-group dropdown lang-select-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 }}"> <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"> <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"/> <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> </svg>
@ -58,10 +57,4 @@
</div> </div>
</div> </div>
</div> </div>
<script>
/* Remove hover classes */
Array.from(document.getElementsByClassName("hover-content")).forEach(r => {
r.classList.remove("hover-content");
});
</script>
</nav> </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>'" %} {% assign faqs = faqs | where_exp: "faq", "faq contains '</h4>'" %}
{% for faq in faqs %} {% for faq in faqs %}
{% assign id = faq | split: "</h4>" | first | split: ">" | first | replace: "id=", "" | replace: '"', "" %} {% assign id = faq | split: "</h4>" | first | split: ">" | first | replace: "id=", "" | replace: '"', "" %}
<div class="accordian-item"> <details class="accordian-item" id="faq-{{ id }}">
<input id="faq-{{ id }}" class="d-none" name="faqs" type="radio"> <summary class="accordion-header accordion-button collapsed flex-fill" onclick="setFaq('{{ id }}')">
<label for="faq-{{ id }}" onclick="setFaq('{{ id }}')"> {{ faq | split: "</h4>" | first | split: ">" | last }}
<h2 class="accordion-header accordion-button collapsed flex-fill"> </summary>
{{ faq | split: "</h4>" | first | split: ">" | last }} <div class="faq accordion-collapse">
</h2>
</label>
<div class="faq accordion-collapse show">
<div class="accordion-body"> <div class="accordion-body">
{{ faq | split: "</h4>" | last }} {{ faq | split: "</h4>" | last }}
</div> </div>
</div> </div>
</div> </details>
{% endfor %} {% endfor %}
</div> </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 // For the bottom aligned footer
html, body { html, body {
height: 100%; height: 100%;
@ -11,26 +5,25 @@ html, body {
body { body {
display: flex; display: flex;
flex-direction: column; 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 { footer {
flex-shrink: 0; flex-shrink: 0;
padding-top: 20px; padding-top: 20px;
} }
body { body {
color: var(--main-color); color: $main-color;
background-color: var(--main-bg); background-color: $main-bg;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: var(--header-color); color: $header-color;
} }
h2 { h2 {
border-bottom: 1px solid var(--borders); border-bottom: 1px solid $borders;
} }
hr { hr {
@ -38,15 +31,15 @@ hr {
} }
blockquote { blockquote {
color: var(--blockquote-color); color: $blockquote-color;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0 0 0 20px; padding: 0 0 0 20px;
border-left: 3px solid var(--borders); border-left: 3px solid $borders;
} }
:not(pre) > code, pre { :not(pre) > code, pre {
color: var(--code-color); color: $code-color;
background-color: var(--code-bg); background-color: $code-bg;
padding: 3px; padding: 3px;
border-radius: 0.25rem; border-radius: 0.25rem;
white-space: nowrap; white-space: nowrap;
@ -64,14 +57,14 @@ a > code {
div.language-bash pre.highlight code::before { div.language-bash pre.highlight code::before {
content: "$ "; content: "$ ";
color: var(--code-light); color: $code-light;
} }
// .a is for making other things look like <a>s // .a is for making other things look like <a>s
a, .a { a, .a {
text-decoration: none; text-decoration: none;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
color: var(--a-color); color: $a-color;
cursor: pointer; cursor: pointer;
} }
a:hover, .a:hover { a:hover, .a:hover {
@ -94,7 +87,7 @@ footer a:hover {
small { small {
font-size: 75%; font-size: 75%;
color: var(--small-color); color: $small-color;
} }
img { img {
@ -102,6 +95,15 @@ img {
height: auto; 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 { .btn, .btn a, a.btn {
text-decoration: none; text-decoration: none;
} }
@ -117,53 +119,53 @@ div .btn-primary:hover {
// Override bootstraps primary color // Override bootstraps primary color
.bg-primary { .bg-primary {
background-color: var(--primary)!important; background-color: $primary!important;
} }
.btn-primary, .btn-primary:focus { .btn-primary, .btn-primary:focus {
color: var(--nav-link-color); color: $nav-link-color;
background-color: var(--primary)!important; background-color: $primary!important;
border-color: var(--primary)!important; border-color: $primary!important;
} }
.btn-primary:hover, .btn-primary:active { .btn-primary:hover, .btn-primary:active {
color: var(--nav-link-color)!important; color: $nav-link-color!important;
opacity: 0.8; opacity: 0.8;
} }
.btn-outline-primary { .btn-outline-primary {
color: var(--primary); color: $primary;
border-color: var(--primary); border-color: $primary;
} }
.btn-outline-primary:hover, .btn-outline-primary:active { .btn-outline-primary:hover, .btn-outline-primary:active {
background-color: var(--primary)!important; background-color: $primary!important;
border-color: var(--primary)!important; border-color: $primary!important;
} }
.text-primary { .text-primary {
background-color: var(--primary)!important; background-color: $primary!important;
} }
// Override the secondary text color // Override the secondary text color
.btn-outline-secondary { .btn-outline-secondary {
color: var(--main-color); color: $main-color;
} }
.alert-secondary { .alert-secondary {
color: var(--code-color); color: $code-color;
background-color: var(--alert-secondary-bg); background-color: $alert-secondary-bg;
border-color: var(--alert-secondary-border); border-color: $alert-secondary-border;
} }
// Override the dark text too // Override the dark text too
.text-dark { .text-dark {
color: var(--dark)!important; color: $dark!important;
} }
// And the light bg // And the light bg
.bg-light { .bg-light {
background-color: var(--light)!important; background-color: $light!important;
border-color: var(--light-border)!important; border-color: $light-border!important;
} }
.bg-light::placeholder { .bg-light::placeholder {
color: var(--light-placeholder); color: $light-placeholder;
} }
// No underline on navbar links // No underline on navbar links
@ -178,23 +180,33 @@ div .btn-primary:hover {
// Override nav-link color // Override nav-link color
.navbar .nav-link { .navbar .nav-link {
color: var(--nav-link-color)!important; color: $nav-link-color!important;
} }
.navbar .nav-link:hover { .navbar .nav-link:hover {
color: var(--nav-link-color-hover)!important; color: $nav-link-color-hover!important;
} }
// And the active nav-link color // And the active nav-link color
.navbar .nav-link.active { .navbar .nav-link.active {
color: var(--nav-link-color-active)!important; color: $nav-link-color-active!important;
} }
.navbar .nav-link.active:hover { .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 // Make dropdowns site-colored and animated
.dropdown-menu, .dropdown .hover-content { .dropdown-menu, .dropdown .hover-content {
background-color: var(--primary); background-color: $primary;
-webkit-transition: 300ms ease; -webkit-transition: 300ms ease;
transition: 300ms ease; transition: 300ms ease;
display: block; display: block;
@ -216,15 +228,19 @@ div .btn-primary:hover {
visibility: visible; visibility: visible;
} }
.navbar-toggler:hover+.navbar-collapse.hover-content, .navbar-collapse.hover-content:hover {
display: block;
}
.dropdown-item { .dropdown-item {
color: var(--nav-link-color); color: $nav-link-color;
} }
.dropdown-item.active { .dropdown-item.active {
background-color: unset; background-color: unset;
} }
.dropdown-item:hover, .dropdown-item:active, .dropdown-item:focus { .dropdown-item:hover, .dropdown-item:active, .dropdown-item:focus {
background-color: var(--dropdown-item-bg-hover); background-color: $dropdown-item-bg-hover;
color: var(--nav-link-color-hover); color: $nav-link-color-hover;
} }
// Make images smaller // Make images smaller
@ -233,25 +249,77 @@ div .btn-primary:hover {
max-height: 250px; max-height: 250px;
} }
.btn-back {
position: absolute; html:not([dir=rtl]) {
left: 5px; .btn-back {
margin: 5px 0; position: absolute;
font-size: 8pt; left: 5px;
padding: 5px; margin: 5px 0;
z-index: 10; 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 box
.input-group-text { .input-group-text {
color: var(--light-placeholder); color: $light-placeholder;
background-color: var(--light); background-color: $light;
border-color: var(--light-border); border-color: $light-border;
} }
.form-control, .form-control:focus, .form-control::placeholder { .form-control, .form-control:focus, .form-control::placeholder {
color: var(--light-placeholder); color: $light-placeholder;
background-color: var(--light); background-color: $light;
border-color: var(--light-border); border-color: $light-border;
} }
// Cards // Cards
@ -264,8 +332,8 @@ div .btn-primary:hover {
font-weight: normal; font-weight: normal;
} }
.card:hover a h4 { .card a:hover h4, .card a:hover small, .card a:hover p.card-text {
color: inherit; opacity: 50%;
} }
.card-footer a { .card-footer a {
@ -284,44 +352,51 @@ div .btn-primary:hover {
} }
.card { .card {
background-color: var(--card-background); background-color: $card-background;
} }
.card-header, .card-footer { .card-header, .card-footer {
background-color: var(--card-edges-background); background-color: $card-edges-background;
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.card-qr {
color: $small-color;
}
.card-qr:hover {
opacity: 75%;
}
.qr-image { .qr-image {
border-radius: 1rem; border-radius: 1rem;
} }
.modal-content { .modal-content {
background-color: var(--main-bg); background-color: $main-bg;
} }
.modal-header { .modal-header {
border-bottom: var(--modal-borders); border-bottom: $modal-borders;
} }
.modal-footer { .modal-footer {
border-top: var(--modal-borders); border-top: $modal-borders;
} }
.carousel-label { .carousel-label {
background-color: var(--carousel-caption-bg); background-color: $carousel-caption-bg;
border-radius: 10px; border-radius: 10px;
} }
.li-bullet { html[dir=lrt] .li-bullet {
list-style: disc; list-style: disc;
margin-left: 1.25em; margin-left: 1.25em;
} }
html[dir=rtl] .li-bullet { html[dir=rtl] .li-bullet {
list-style: disc; list-style: disc;
margin-left: 0;
margin-right: 1.5em; margin-right: 1.5em;
} }
@ -331,14 +406,11 @@ html[dir=rtl] .li-bullet {
display: none; display: none;
} }
h1:hover .header-anchor, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
h2:hover .header-anchor, .header-anchor {
h3:hover .header-anchor, display: inline;
h4:hover .header-anchor, text-decoration: none;
h5:hover .header-anchor, }
h6:hover .header-anchor {
display: inline;
text-decoration: none;
} }
// Tables // Tables
@ -350,15 +422,14 @@ table th {
} }
table th, table td { table th, table td {
padding: 6px 13px; padding: 6px 13px;
border: 1px solid var(--light-borders); border: 1px solid $light-borders;
} }
table tr:nth-child(2n) { 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 // Fix bootstrap messing up the th bottom borders and dark mode text
.table>:not(:last-child)>:last-child>* { .table>:not(:last-child)>:last-child>* {
border-bottom-color: var(--light-borders); border-bottom-color: $light-borders;
} }
.table { .table {
@ -370,12 +441,12 @@ kbd {
padding: 3px 6px; padding: 3px 6px;
font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
line-height: 10px; line-height: 10px;
color: var(--main-color); color: $main-color;
vertical-align: middle; vertical-align: middle;
background-color: var(--kbd-bg); background-color: $kbd-bg;
border: 1px solid var(--kbd-border); border: 1px solid $kbd-border;
border-radius: 6px; border-radius: 6px;
box-shadow: inset 0 -1px 0 var(--kbd-border); box-shadow: inset 0 -1px 0 $kbd-border;
} }
kbd.l { kbd.l {
@ -395,7 +466,7 @@ kbd.face {
// Sidebar // Sidebar
.sidebar-container { .sidebar-container {
font-size: 0.9rem; font-size: 0.9rem;
border: 1px solid var(--borders); border: 1px solid $borders;
} }
.sidebar-container ul { .sidebar-container ul {
@ -412,7 +483,7 @@ kbd.face {
} }
.details-content { .details-content {
background-color: var(--details-bg); background-color: $details-bg;
margin-left: 1rem; margin-left: 1rem;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -460,71 +531,19 @@ a.footnote::after {
.tab-container { .tab-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
}
.tab-container > .tab { .tab {
display: none; display: none;
order: 99; order: 99;
padding-top: 1rem; padding-top: 1rem;
width: 100%; 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%;
> h2 { input:checked + label + .tab {
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 {
display: block; display: block;
} }
#faq-container > label { abel {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
@ -534,25 +553,75 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline
border-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 { input:checked + label.btn-outline-secondary:hover, input:checked + label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus {
color: #fff; color: #fff;
background-color: #5c636a; background-color: #5c636a;
border-color: #565e64; 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 // Select
.form-select-dark { .form-select-dark {
background-color: #444; background-color: #444;
border: 1px solid #333; border: 1px solid #333;
} }
@media only screen and (min-width: 576px) { // SVG
// Version of .position-absolute that only triggers for sm+ .icon {
.position-absolute-sm { display: inline-block;
position: absolute!important; 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 // Seems to be broken in RTL in bootstrap v5.0-beta1, so override here
html[dir=rtl] .dropdown-menu-sm-end { html[dir=rtl] .dropdown-menu-sm-end {
--bs-position: end; --bs-position: end;
@ -588,3 +657,21 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline
background-color: inherit; 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 { /// Variables
// Main contents // Main contents
--main-bg: #333; $main-bg: #333;
--main-color: #ccc; $main-color: #ccc;
--header-color: #ddd; $header-color: #ddd;
--borders: #555; $borders: #555;
--light-borders: #444; $light-borders: #444;
--blockquote-color: #999; $blockquote-color: #999;
--code-bg: #5559; $code-bg: #5559;
--code-color: #ddd; $code-color: #ddd;
--code-light: #999; $code-light: #999;
--a-color: #58a6ff; $a-color: #58a6ff;
--small-color: gray; $small-color: gray;
--carousel-caption-bg: #333b; $carousel-caption-bg: #333b;
--table-alt-bg: #303030; $table-alt-bg: #303030;
--kbd-bg: #666; $kbd-bg: #666;
--kbd-border: #444; $kbd-border: #444;
--alert-secondary-bg: #444; $alert-secondary-bg: #444;
--alert-secondary-border: #2f2f2f; $alert-secondary-border: #2f2f2f;
--details-bg: #3f3f3f; $details-bg: #3f3f3f;
--active-accordian-bg-color: #393939; $active-accordian-bg-color: #393939;
--active-accordian-header-color: #222; $active-accordian-header-color: #222;
--active-accordian-header-bg-color: #4477ac; $active-accordian-header-bg-color: #4477ac;
// Cards // Cards
--card-background: #444; $card-background: #444;
--card-edges-background: rgba(0, 0, 0, 0.15); $card-edges-background: rgba(0, 0, 0, 0.15);
// Modal // Modal
--modal-borders: 1px solid rgba(0, 0, 0, 0.2); $modal-borders: 1px solid rgba(0, 0, 0, 0.2);
// Nav // Nav
--nav-link-color: rgba(255, 255, 255, 0.7); $nav-link-color: rgba(255, 255, 255, 0.7);
--nav-link-color-hover: rgba(255, 255, 255, 0.5); $nav-link-color-hover: rgba(255, 255, 255, 0.5);
--nav-link-color-active: rgba(255, 255, 255, 1); $nav-link-color-active: rgba(255, 255, 255, 1);
--dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); $dropdown-item-bg-hover: rgba(0, 0, 0, 0.3);
--primary: {{ page.color | default: site.color }}; $primary: {{ page.color | default: site.color }};
--dark: #f8f9fa; $dark: #f8f9fa;
--light: #3f3f3f; $light: #3f3f3f;
--light-border: #292929; $light-border: #292929;
--light-placeholder: #999; $light-placeholder: #999;
}
/// Import base style
@import "base";
/// CSS Overrides
// Override FAQ accordian chevron color // 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"); 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"); 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); transform: rotate(-180deg);
} }

81
assets/css/light.scss
View File

@ -1,49 +1,52 @@
--- ---
--- ---
:root { /// Variables
// Main contents // Main contents
--main-bg: #fff; $main-bg: #fff;
--main-color: #222; $main-color: #222;
--header-color: #222; $header-color: #222;
--borders: #bbb; $borders: #bbb;
--light-borders: #dee2e6; $light-borders: #dee2e6;
--blockquote-color: #666; $blockquote-color: #666;
--code-bg: #ccc6; $code-bg: #ccc6;
--code-color: #333; $code-color: #333;
--code-light: #999; $code-light: #999;
--a-color: #0366d6; $a-color: #0366d6;
--small-color: gray; $small-color: gray;
--carousel-caption-bg: #fffb; $carousel-caption-bg: #fffb;
--table-alt-bg: #f3f3f3; $table-alt-bg: #f3f3f3;
--kbd-bg: #fafafa; $kbd-bg: #fafafa;
--kbd-border: #ddd; $kbd-border: #ddd;
--alert-secondary-bg: #e9e9e9; $alert-secondary-bg: #e9e9e9;
--alert-secondary-border: #bbb; $alert-secondary-border: #bbb;
--details-bg: #f9f9f9; $details-bg: #f9f9f9;
--active-accordian-bg-color: #fcfcfc; $active-accordian-bg-color: #fcfcfc;
--active-accordian-header-color: #0c63e4; $active-accordian-header-color: #0c63e4;
--active-accordian-header-bg-color: #e7f1ff; $active-accordian-header-bg-color: #e7f1ff;
// Cards // Cards
--card-background: var(--main-bg); $card-background: var(--main-bg);
--card-edges-background: rgba(0,0,0,.03); $card-edges-background: rgba(0,0,0,.03);
// Modal // Modal
--modal-borders: 1px solid #dee2e6; $modal-borders: 1px solid #dee2e6;
// Nav // Nav
--nav-link-color: rgba(255, 255, 255, 0.7); $nav-link-color: rgba(255, 255, 255, 0.7);
--nav-link-color-hover: rgba(255, 255, 255, 0.5); $nav-link-color-hover: rgba(255, 255, 255, 0.5);
--nav-link-color-active: rgba(255, 255, 255, 1); $nav-link-color-active: rgba(255, 255, 255, 1);
--dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); $dropdown-item-bg-hover: rgba(0, 0, 0, 0.3);
--primary: {{ page.color | default: site.color }}; $primary: {{ page.color | default: site.color }};
--dark: #343a40; $dark: #343a40;
--light: #f8f9fa; $light: #f8f9fa;
--light-border: #ced4da; $light-border: #ced4da;
--light-placeholder: darkgray; $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 { .carousel-dark-when-light .carousel-control-next-icon, .carousel-dark-when-light .carousel-control-prev-icon {
filter: invert(1) grayscale(100); 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) { function setFaq(faq) {
if(document.getElementById(`faq-${tab}`).checked) { const otherFaqs = document.querySelectorAll("#faq-container > .accordian-item:not(#faq-" + faq + ")");
let url = new URL(window.location); for(i = 0; i < otherFaqs.length; i++) {
url.searchParams.delete("faq"); otherFaqs[i].open = false;
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);
} }
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 // Try get FAQ from URL
let urlFaq = new URL(window.location).searchParams.get("faq"); const urlFaq = decodeURI(window.location.href).match(/[?&]faq=(.*?)(?=\&|#|$)/);
if(urlFaq) { if(urlFaq && urlFaq.length > 1) {
faq = Array.from(document.getElementById("faq-container").children).filter(r => r.children[0].id == `faq-${urlFaq}`)[0]; const faqs = document.getElementById("faq-container").children;
if(faq) { for(i = 0; i < faqs.length; i++) {
faq.children[0].click(); const faq = faqs[i];
faq.children[1].scrollIntoView(); 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 = { const platforms = {
"Win32": "tab-windows", "Win32": "windows",
"MacIntel": "tab-macos" "MacIntel": "macos",
"MacPPC": "macos"
}; };
function setTab(tab) { function setTab(tab) {
let url = new URL(window.location); var url = window.location.href;
url.searchParams.set("tab", tab); if(url.match(/[?&]tab=/)) { // Already has a tab param
history.pushState({}, "", url); 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 // Open the tabs for the current OS or the one in the URL
for(let tabGroup of document.getElementsByClassName("tab-container")) { const tabContainers = document.getElementsByClassName("tab-container");
let tab = null; for(i = 0; i < tabContainers.length; i++) {
const tabGroup = tabContainers[i];
var tab = null;
// Try get tab from URL // Try get tab from URL
let urlTab = new URL(window.location).searchParams.get("tab"); const urlTab = decodeURI(window.location.href).match(/[?&]tab=(.*?)(?=\&|#|$)/);
if(urlTab) if(urlTab && urlTab.length > 1)
tab = Array.from(tabGroup.children).filter(r => r.id == `tab-${urlTab}`)[0]; tab = findTab(tabGroup, urlTab[1]);
// Try get tab for OS // Try get tab for OS
if(!tab) 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 // Fall back to "other" tab
if(!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 a tab was found, open it
if(tab) if(tab)

10
assets/js/theme.js
View File

@ -1,17 +1,17 @@
function loadTheme() { function loadTheme() {
let themeCSS = document.getElementById("themeCSS"); const themeCSS = document.getElementById("themeCSS");
if(!localStorage.theme || localStorage.theme == "default") { if(!localStorage.theme || localStorage.theme == "default") {
if(themeCSS) if(themeCSS)
themeCSS.remove(); themeCSS.remove();
} else { } else {
if(themeCSS) { if(themeCSS) {
themeCSS.href = `/assets/css/${localStorage.theme}.css`; themeCSS.href = "/assets/css/" + localStorage.theme +".css";
} else { } else {
let l = document.createElement("link"); const l = document.createElement("link");
l.rel = "stylesheet"; l.rel = "stylesheet";
l.type = "text/css"; l.type = "text/css";
l.media = "screen"; l.media = "screen";
l.href = `/assets/css/${localStorage.theme}.css` l.href = "/assets/css/" + localStorage.theme +".css"
l.id = "themeCSS"; l.id = "themeCSS";
document.head.appendChild(l); document.head.appendChild(l);
@ -29,7 +29,7 @@ function setTheme(theme) {
loadTheme(); loadTheme();
window.onload = () => { window.onload = function() {
if(localStorage.theme) if(localStorage.theme)
document.getElementById("themeSelector").value = localStorage.theme; document.getElementById("themeSelector").value = localStorage.theme;
} }