Minor refactoring

This commit is contained in:
Matteo Settenvini 2024-08-31 17:27:19 +02:00
parent cb5edfe635
commit 7701e7119f
Signed by: matteo
GPG Key ID: 1C1B12600D81DE05
2 changed files with 110 additions and 120 deletions

View File

@ -46,7 +46,6 @@ continueStory(true);
// Main story processing function. Each time this is called it generates
// all the next content up as far as the next set of choices.
function continueStory(this: any, firstTime: boolean) {
var paragraphIndex = 0;
var delay = 0.0;
// Don't over-scroll past new content
@ -57,7 +56,7 @@ function continueStory(this: any, firstTime: boolean) {
// Get ink to generate the next paragraph
var paragraphText = story.Continue()!;
// Any special tags included with this line
var customClasses: string[] = [];
@ -91,7 +90,7 @@ function continueStory(this: any, firstTime: boolean) {
this.audioLoop.play();
this.audioLoop.loop = true;
break;
// IMAGE: src
case "IMAGE":
var imageElement = document.createElement('img');
@ -111,13 +110,13 @@ function continueStory(this: any, firstTime: boolean) {
case "LINK":
window.location.href = splitTag.val;
break;
// LINKOPEN: url
case "LINKOPEN":
window.open(splitTag.val);
break;
// BACKGROUND: src
case "BACKGROUND":
outerScrollContainer.style.backgroundImage = 'url(' + splitTag.val + ')';
@ -151,8 +150,9 @@ function continueStory(this: any, firstTime: boolean) {
storyContainer.appendChild(paragraphElement);
// Add any custom classes derived from ink tags
for (var i = 0; i < customClasses.length; i++)
paragraphElement.classList.add(customClasses[i]);
customClasses.forEach((klass) => {
paragraphElement.classList.add(klass);
});
// Fade in paragraph after a short delay
showAfter(delay, paragraphElement);
@ -172,7 +172,7 @@ function continueStory(this: any, firstTime: boolean) {
case "UNCLICKABLE":
isClickable = false;
break;
case "CLASS":
customClasses.push(splitTag.val);
@ -380,8 +380,8 @@ function setupTheme(globalTagTheme: string | null) {
// Check whether the OS/browser is configured for dark mode
var browserDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
let preferredTheme = savedTheme ?? globalTagTheme ?? (browserDark ? "dark" : "light");
document.body.classList.add(preferredTheme);
let preferredTheme = savedTheme ?? globalTagTheme ?? (browserDark ? "dark" : null);
preferredTheme && document.body.classList.add(preferredTheme);
}
// Used to hook up the functionality for global functionality buttons

View File

@ -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 {
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
font-family: 'Inter', sans-serif;
font-weight: 600;
background: white;
overflow: hidden;
}
@media screen and (prefers-reduced-motion: no-preference) {
body.switched {
transition: color 0.6s, background-color 0.6s;
@media screen and (prefers-reduced-motion: no-preference) {
&.switched {
transition: color 0.6s, background-color 0.6s;
}
}
}
h1,
h2 {
@mixin titles {
text-align: center;
font-family: "Quattrocento", Georgia, 'Times New Roman', Times, serif;
margin: 0;
@ -22,11 +21,15 @@ h2 {
}
h1 {
@include titles;
font-size: 30pt;
margin-bottom: 10px;
}
h2 {
@include titles;
font-size: 14pt;
font-style: italic;
font-family: sans-serif;
@ -88,10 +91,8 @@ h2 {
margin-top: 24px;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (max-width: 980px) {
.outerContainer {
@media screen and (max-width: 980px) {
margin-top: 44px;
background-size: cover;
background-repeat: no-repeat;
@ -105,6 +106,22 @@ h2 {
padding: 20px;
padding-top: 4em;
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) {
@ -125,6 +142,18 @@ a {
color: #b97c2c;
font-family: sans-serif;
text-decoration: none;
&:hover {
color: black;
}
@media screen and (prefers-reduced-motion: no-preference) {
transition: color 0.6s;
&:hover {
transition: color 0.1s;
}
}
}
.unclickable {
@ -135,20 +164,6 @@ a {
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 {
color: black;
font-weight: bold;
@ -160,23 +175,6 @@ img {
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
@ -185,21 +183,19 @@ img {
.choice {
text-align: center;
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:
@ -223,84 +219,78 @@ img {
top: 4px;
user-select: none;
background: white;
}
@media screen and (prefers-reduced-motion: no-preference) {
#controls {
@media screen and (prefers-reduced-motion: no-preference) {
transition: color 0.6s, background 0.6s;
}
}
#controls [disabled] {
color: #ccc;
}
#controls>*:not(:last-child):after {
content: " | ";
}
@media screen and (max-width: 980px) {
#controls {
@media screen and (max-width: 980px) {
z-index: 2;
padding-top: 24px;
top: 0;
left: 0;
right: 0;
}
[disabled] {
color: #ccc;
}
> *:not(:last-child):after {
content: " | ";
}
}
/*
Dark Theme (Added in Inky 0.10.0)
# theme: dark
*/
body.dark {
background: black;
color: white;
}
.dark h2 {
color: #666;
}
h2 {
color: #666;
}
.dark .container {
background: black;
}
.container {
background: black;
}
.dark .written-in-ink {
background: black;
}
.written-in-ink {
background: black;
}
.dark a {
color: #cc8f1a;
}
.dark .unclickable{
color: #c4af87;
cursor:not-allowed;
}
a {
color: #cc8f1a;
.dark a:hover {
color: white;
}
@media screen and (prefers-reduced-motion: no-preference) {
transition: color 0.6s;
}
@media screen and (prefers-reduced-motion: no-preference) {
.dark a {
transition: color 0.6s;
&:hover {
color: white;
}
}
.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;
}