Minor refactoring
This commit is contained in:
parent
cb5edfe635
commit
7701e7119f
10
src/index.ts
10
src/index.ts
|
@ -46,7 +46,6 @@ continueStory(true);
|
||||||
// Main story processing function. Each time this is called it generates
|
// Main story processing function. Each time this is called it generates
|
||||||
// all the next content up as far as the next set of choices.
|
// all the next content up as far as the next set of choices.
|
||||||
function continueStory(this: any, firstTime: boolean) {
|
function continueStory(this: any, firstTime: boolean) {
|
||||||
var paragraphIndex = 0;
|
|
||||||
var delay = 0.0;
|
var delay = 0.0;
|
||||||
|
|
||||||
// Don't over-scroll past new content
|
// Don't over-scroll past new content
|
||||||
|
@ -151,8 +150,9 @@ function continueStory(this: any, firstTime: boolean) {
|
||||||
storyContainer.appendChild(paragraphElement);
|
storyContainer.appendChild(paragraphElement);
|
||||||
|
|
||||||
// Add any custom classes derived from ink tags
|
// Add any custom classes derived from ink tags
|
||||||
for (var i = 0; i < customClasses.length; i++)
|
customClasses.forEach((klass) => {
|
||||||
paragraphElement.classList.add(customClasses[i]);
|
paragraphElement.classList.add(klass);
|
||||||
|
});
|
||||||
|
|
||||||
// Fade in paragraph after a short delay
|
// Fade in paragraph after a short delay
|
||||||
showAfter(delay, paragraphElement);
|
showAfter(delay, paragraphElement);
|
||||||
|
@ -380,8 +380,8 @@ function setupTheme(globalTagTheme: string | null) {
|
||||||
// Check whether the OS/browser is configured for dark mode
|
// Check whether the OS/browser is configured for dark mode
|
||||||
var browserDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
var browserDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||||
|
|
||||||
let preferredTheme = savedTheme ?? globalTagTheme ?? (browserDark ? "dark" : "light");
|
let preferredTheme = savedTheme ?? globalTagTheme ?? (browserDark ? "dark" : null);
|
||||||
document.body.classList.add(preferredTheme);
|
preferredTheme && document.body.classList.add(preferredTheme);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Used to hook up the functionality for global functionality buttons
|
// Used to hook up the functionality for global functionality buttons
|
||||||
|
|
210
src/style.scss
210
src/style.scss
|
@ -1,20 +1,19 @@
|
||||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700|Quattrocento:700');
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quattrocento:wght@400;700&display=swap');
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
font-weight: lighter;
|
font-weight: 600;
|
||||||
background: white;
|
background: white;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
body.switched {
|
&.switched {
|
||||||
transition: color 0.6s, background-color 0.6s;
|
transition: color 0.6s, background-color 0.6s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
@mixin titles {
|
||||||
h2 {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "Quattrocento", Georgia, 'Times New Roman', Times, serif;
|
font-family: "Quattrocento", Georgia, 'Times New Roman', Times, serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -22,11 +21,15 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@include titles;
|
||||||
|
|
||||||
font-size: 30pt;
|
font-size: 30pt;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
@include titles;
|
||||||
|
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
@ -88,10 +91,8 @@ h2 {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 980px) {
|
@media screen and (max-width: 980px) {
|
||||||
.outerContainer {
|
|
||||||
margin-top: 44px;
|
margin-top: 44px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -105,6 +106,22 @@ h2 {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-top: 4em;
|
padding-top: 4em;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
opacity: 0.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invisible {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
opacity: 1.0;
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
transition: opacity 1.0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
@ -125,6 +142,18 @@ a {
|
||||||
color: #b97c2c;
|
color: #b97c2c;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
transition: color 0.6s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transition: color 0.1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.unclickable {
|
.unclickable {
|
||||||
|
@ -135,20 +164,6 @@ a {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
|
||||||
a {
|
|
||||||
transition: color 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
transition: color 0.1s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -160,23 +175,6 @@ img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container .hide {
|
|
||||||
opacity: 0.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .invisible {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container>* {
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
|
||||||
.container>* {
|
|
||||||
transition: opacity 1.0s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Class applied to all choices
|
Class applied to all choices
|
||||||
|
@ -185,21 +183,19 @@ img {
|
||||||
.choice {
|
.choice {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.7em;
|
line-height: 1.7em;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Class applied to choice links
|
||||||
|
*/
|
||||||
|
a, span {
|
||||||
|
font-size: 15pt;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
Class applied to first choice
|
|
||||||
*/
|
|
||||||
:not(.choice)+.choice {
|
|
||||||
padding-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Class applied to choice links
|
|
||||||
*/
|
|
||||||
.choice a, .choice span {
|
|
||||||
font-size: 15pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Built-in class:
|
Built-in class:
|
||||||
|
@ -223,84 +219,78 @@ img {
|
||||||
top: 4px;
|
top: 4px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
#controls {
|
|
||||||
transition: color 0.6s, background 0.6s;
|
transition: color 0.6s, background 0.6s;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#controls [disabled] {
|
@media screen and (max-width: 980px) {
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
#controls>*:not(:last-child):after {
|
|
||||||
content: " | ";
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 980px) {
|
|
||||||
#controls {
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[disabled] {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
> *:not(:last-child):after {
|
||||||
|
content: " | ";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Dark Theme (Added in Inky 0.10.0)
|
Dark Theme (Added in Inky 0.10.0)
|
||||||
# theme: dark
|
# theme: dark
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body.dark {
|
body.dark {
|
||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
|
||||||
|
|
||||||
.dark h2 {
|
h2 {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .container {
|
.container {
|
||||||
background: black;
|
background: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .written-in-ink {
|
.written-in-ink {
|
||||||
background: black;
|
background: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark a {
|
a {
|
||||||
color: #cc8f1a;
|
color: #cc8f1a;
|
||||||
}
|
|
||||||
.dark .unclickable{
|
|
||||||
color: #c4af87;
|
|
||||||
cursor:not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark a:hover {
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
color: white;
|
transition: color 0.6s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
&:hover {
|
||||||
.dark a {
|
color: white;
|
||||||
transition: color 0.6s;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.unclickable {
|
||||||
|
color: #c4af87;
|
||||||
|
cursor:not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls {
|
||||||
|
background: black;
|
||||||
|
|
||||||
|
[disabled] {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.end {
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark strong {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark #controls [disabled] {
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .end {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark #controls {
|
|
||||||
background: black;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue