m/persona5-negotiation
1
0
Fork 0
mirror of https://github.com/joyce-chen/persona5-negotiation.git synced 2025-11-18 16:47:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added dark mode toggle and css theme

Browse Source
This commit is contained in:
Joyce Chen
2020-08-11 02:13:41 -04:00
parent 65a50ceda0
commit 7dcff4a52e
6 changed files with 180 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -11,13 +11,19 @@ Submitted questions are up-to-date as of **August 10th**.
--- ---
August 10th:
- Added a dark mode.
- Added icon labels to the text/icon toggle for both question pages.
- Used local storage to keep toggle state.
TODOS: TODOS:
- Organize the filters to show all the questions for pools of Shadows. - Organize the filters to show all the questions for pools of Shadows.
- Show corresponding personality only when filtering by Persona. - Show corresponding personality only when filtering by Persona.
- Organize Shadows by level instead. - Organize Shadows by level instead.
- Make and merge PRs from other users that forked this repo. - Make and merge PRs from other users that forked this repo.
- Maybe add a dark mode of the theme.
--- ---

59
_includes/header.html
View File

@@ -1,3 +1,10 @@
<script>
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
<!doctype html> <!doctype html>
<html lang="{{ site.lang | default: "en-US" }}"> <html lang="{{ site.lang | default: "en-US" }}">
<head> <head>
@@ -5,14 +12,14 @@
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>{{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }}</title> <title>{{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}"> <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="./favicon.ico" type="image/x-icon">
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
@@ -21,7 +28,51 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header> <header>
<h1>{{ site.title | default: site.github.repository_name }}</h1> <div style="display: flex">
<h1 style="flex: 1">{{ site.title | default: site.github.repository_name }}</h1>
<div>
<label class="switch" id="themeSwitchLabel">
<input type="checkbox" id="themeSwitch" onClick="toggleTheme()"/>
<span class="slider round">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
</span>
</label>
</div>
</div>
<p class="view"><a href="{{ site.github.repository_url }}">View this joyce-chen Project on GitHub <small>{{ github_name }}</small></a></p> <p class="view"><a href="{{ site.github.repository_url }}">View this joyce-chen Project on GitHub <small>{{ github_name }}</small></a></p>
<p><a href="https://forms.gle/JtH9YUekRKVEkYgc6">If you want to contribute to the guide, fill out this form. Thank you! [New: Confirm reaction option]</a></p> <p><a href="https://forms.gle/JtH9YUekRKVEkYgc6">If you want to contribute to the guide, fill out this form. Thank you! [New: Confirm reaction option]</a></p>
</header> </header>
<script>
const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
if (theme === "dark") {
document.getElementById("themeSwitch").checked = true;
} else if (theme === "light") {
document.getElementById("themeSwitch").checked = false;
} else if (userPrefers === "dark") {
document.documentElement.setAttribute('data-theme', 'dark');
window.localStorage.setItem('theme', 'dark');
document.getElementById("themeSwitch").checked = true;
} else {
document.documentElement.setAttribute('data-theme', 'light');
window.localStorage.setItem('theme', 'light');
document.getElementById("themeSwitch").checked = false;
}
function toggleTheme() {
let currentMode = document.documentElement.getAttribute('data-theme');
if (currentMode === "dark") {
document.documentElement.setAttribute('data-theme', 'light');
window.localStorage.setItem('theme', 'light');
document.getElementById("themeSwitch").checked = false;
} else {
document.documentElement.setAttribute('data-theme', 'dark');
window.localStorage.setItem('theme', 'dark');
document.getElementById("themeSwitch").checked = true;
}
}
</script>

139
assets/css/style.scss
View File

@@ -3,43 +3,74 @@
@import "{{ site.theme }}"; @import "{{ site.theme }}";
html { html, html[data-theme='light'] {
--bg-color: #fff; --bg-color: #fff;
--p5-red: #dc3545; --p5-red: #dc3545;
--headings: #222; --headings: #222;
--text: #727272; --text: #727272;
--table-heading: #444; --table-heading: #444;
--table-head-bg: rgba(0,0,0,0.05); --table-head-bg: rgba(0, 0, 0, 0.05);
--table-text: #727272; --table-text: #727272;
--table-result-text: rgb(60, 60, 60);
--table-unconfirmed-bg: rgb(247, 205, 209);
--table-unconfirmed-text: rgb(60, 60, 60);
--table-border: #e5e5e5; --table-border: #e5e5e5;
--hr-line: #e5e5e5;
--form-bg: #fff; --form-bg: #fff;
--form-border: #dee2e6;
--form-text: #495057;
--filter-head-bg: #f7f7f7; --filter-head-bg: #f7f7f7;
--filter-bg: #fff; --filter-bg: #fff;
--filter-btn: #f1f1f1; --filter-btn: #f1f1f1;
--filter-btn-text: #727272;
--filter-btn-text-hover: #727272;
--filter-btn-text-active: white;
--filter-btn-hover: #ddd; --filter-btn-hover: #ddd;
--filter-btn-active: #666; --filter-btn-active: #666;
--switch-bg: #ccc;
--theme-switch-bg: #2a2a2a;
--fa-font-icon: black;
} }
html[data-theme='dark'] { html[data-theme='dark'] {
--bg-color: #1d1d1d; --bg-color: #121212;// #1d1d1d;
--p5-red: #dc3545; --p5-red: #dc3545;
--headings: #dedede; --headings: #dedede;
--text: #e6e6e6; --text: #e6e6e6;
--table-heading: #dedede; --table-heading: #dedede;
--table-head-bg: #2a2a2a; --table-head-bg: #2a2a2a;
--table-text: #e6e6e6; --table-text: #e6e6e6;
--table-border: #dedede; --table-result-text: #e6e6e6;
--table-bg: #1d1d1d; --table-unconfirmed-text: #e6e6e6;
--form-bg: #1d1d1d; --table-unconfirmed-bg: rgba(182, 76, 87, 0.705);
--table-border: #383838;//#dedede;
--table-bg: #121212;//#1d1d1d;
--hr-line: #2e2e2e;
--form-bg: #2e2e2e;//#121212;//#1d1d1d;
--form-border: #383838;
--form-text: #e6e6e6;
--filter-head: #2e2e2e; --filter-head: #2e2e2e;
--filter-body: #1d1d1d; --filter-body: #121212;//#1d1d1d;
--filter-btn: #f1f1f1; --filter-btn: #373737;
--filter-btn-hover: #ddd; --filter-btn-text: #e6e6e6;
--filter-btn-active: #666; --filter-btn-text-hover: #121212;
--filter-btn-text-active: #121212;
--filter-btn-hover: #666;
--filter-btn-active: #ddd;
--switch-bg: #2a2a2a;
--theme-switch-bg: #2a2a2a;
--fa-font-icon: white;
}
@media (prefers-color-scheme: dark) {
html {
content: "dark";
}
} }
body { body {
background-color: var(--bg-color); background-color: var(--bg-color);
transition: background 0.2s linear;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: var(--headings); color: var(--headings);
@@ -61,23 +92,37 @@ nav {
width: auto; width: auto;
position: static !important; position: static !important;
} }
strong {
color: var(--headings);
}
hr {
background: var(--hr-line);
}
// FORM // ----------- FORM ----------- //
#searchBar { #searchBar {
background-color: var(--form-bg); background-color: var(--form-bg);
border: 1px solid var(--form-border) !important;
}
.form-control {
color: var(--form-text);
} }
.form-control:focus { .form-control:focus {
color: var(--form-text);
outline: 0 !important; outline: 0 !important;
border-color: initial; border-color: initial;
box-shadow: none; box-shadow: none;
} }
.input-group-text {
border: 1px solid var(--form-border) !important;
}
// ALL QUESTIONS // ----------- ALL QUESTIONS ----------- //
#questions { #questions {
margin-top: 1rem; margin-top: 1rem;
} }
// LINKS // ----------- LINKS ----------- //
a { a {
color: var(--p5-red); color: var(--p5-red);
font-weight: normal; font-weight: normal;
@@ -90,17 +135,22 @@ a:active {
color: var(--p5-red); color: var(--p5-red);
font-weight: normal; font-weight: normal;
} }
a:focus {
color: var(--p5-red);
font-weight: bold;
}
a:visited { a:visited {
color: var(--p5-red); color: var(--p5-red);
font-weight: normal; font-weight: normal;
} }
// TABLES // ----------- TABLES ----------- //
table { table {
width: auto; width: auto;
background-color: var(--table-bg); background-color: var(--table-bg);
border: 1px solid var(--table-border); border: 1px solid var(--table-border);
color: var(--table-text); color: var(--table-text);
font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
th { th {
font-weight: bold; font-weight: bold;
@@ -109,39 +159,34 @@ table {
background-color: var(--table-head-bg); background-color: var(--table-head-bg);
border-color: var(--table-border); border-color: var(--table-border);
} }
td {
border-bottom: 1px solid var(--table-border);
}
.subheader { .subheader {
text-align: center; text-align: center;
font-variant: small-caps; font-variant: small-caps;
font-weight: bold; font-weight: bold;
} }
.extra { .extra {
display: inline; display: inline;
} }
.result { .result {
text-align: center; text-align: center;
color: rgb(60, 60, 60); color: var(--table-result-text);
} }
.text { .text {
display: block; display: block;
} }
.symbol { .symbol {
display: none; display: none;
} }
} }
.unconfirmed { .unconfirmed {
background-color:rgb(247, 205, 209); background-color: var(--table-unconfirmed-bg);
color: rgb(60, 60, 60); color: var(--table-unconfirmed-text) !important;
} }
// ----------- SWITCH ----------- //
// SWITCH
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -160,7 +205,7 @@ table {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccc; background-color: var(--switch-bg);
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
@@ -179,21 +224,47 @@ input:checked + .slider {
background-color: var(--p5-red); background-color: var(--p5-red);
} }
input:focus + .slider { input:focus + .slider {
box-shadow: 0 0 1px var(--p5-red); box-shadow: 0 0 5px var(--p5-red);
} }
input:checked + .slider:before { input:checked + .slider:before {
-webkit-transform: translateX(26px); left: calc(100% - 30px);
-ms-transform: translateX(26px);
transform: translateX(26px);
} }
.slider.round { .slider.round {
border-radius: 34px; border-radius: 34px;
display: flex;
padding: 11px;
justify-content: space-between;
} }
.slider.round:before { .slider.round:before {
border-radius: 50%; border-radius: 50%;
z-index: 2;
}
.fa-icons {
color: black;
transform: scale(1.25);
}
.fa-font {
color: var(--fa-font-icon);
transform: scale(1.15);
} }
// FILTER // ----------- DARK MODE ----------- //
#themeSwitchLabel .slider {
background-color: var(--theme-switch-bg);
}
#themeSwitchLabel .slider.round {
padding: 10px;
}
.fa-moon {
color: #f1c40f;
transform: scale(1.5);
}
.fa-sun {
color: #f39c12;
transform: scale(1.5);
}
// ----------- FILTER ----------- //
.card { .card {
background-color: var(--filter-head); background-color: var(--filter-head);
} }
@@ -207,9 +278,11 @@ input:checked + .slider:before {
cursor: pointer; cursor: pointer;
font-size: small; font-size: small;
margin: .2rem .2rem; margin: .2rem .2rem;
color: var(--filter-btn-text);
} }
.filter-btn:hover { .filter-btn:hover {
background-color: var(--filter-btn-hover); background-color: var(--filter-btn-hover);
color: var(--filter-btn-text-hover);
} }
.filter-btn:focus { .filter-btn:focus {
outline: none; outline: none;
@@ -217,7 +290,7 @@ input:checked + .slider:before {
} }
.filter-btn.active { .filter-btn.active {
background-color: var(--filter-btn-active); background-color: var(--filter-btn-active);
color: white; color: var(--filter-btn-text-active);
} }
.hidden { .hidden {
display: none; display: none;

5
index.md
View File

@@ -12,7 +12,10 @@
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<label class="switch"> <label class="switch">
<input type="checkbox" id="originalCompact" onClick="toggleOriginalCompact(false)"> <input type="checkbox" id="originalCompact" onClick="toggleOriginalCompact(false)">
<span class="slider round"></span> <span class="slider round">
<i class="fas fa-icons"></i>
<i class="fas fa-font"></i>
</span>
</label> </label>
</div> </div>
</div> </div>

5
royal.md
View File

@@ -12,7 +12,10 @@
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<label class="switch"> <label class="switch">
<input type="checkbox" id="royalCompact" onClick="toggleRoyalCompact(false)"> <input type="checkbox" id="royalCompact" onClick="toggleRoyalCompact(false)">
<span class="slider round"></span> <span class="slider round">
<i class="fas fa-icons"></i>
<i class="fas fa-font"></i>
</span>
</label> </label>
</div> </div>
</div> </div>