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 // 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

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 { 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 {
Class applied to first choice
*/
:not(.choice)+.choice {
padding-top: 1em; padding-top: 1em;
} }
/* /*
Class applied to choice links Class applied to choice links
*/ */
.choice a, .choice span { a, span {
font-size: 15pt; 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] {
color: #ccc;
}
#controls>*:not(:last-child):after {
content: " | ";
}
@media screen and (max-width: 980px) { @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;
@media screen and (prefers-reduced-motion: no-preference) {
transition: color 0.6s;
} }
.dark .unclickable{
&:hover {
color: white;
}
}
.unclickable {
color: #c4af87; color: #c4af87;
cursor:not-allowed; cursor:not-allowed;
} }
.dark a:hover { strong {
color: white; color: white;
} }
@media screen and (prefers-reduced-motion: no-preference) { #controls {
.dark a { background: black;
transition: color 0.6s;
}
}
.dark strong { [disabled] {
color: white;
}
.dark #controls [disabled] {
color: #444; color: #444;
} }
}
.dark .end { .end {
color: white; color: white;
} }
.dark #controls {
background: black;
} }