Minor refactoring
This commit is contained in:
parent
cb5edfe635
commit
7701e7119f
GPG Key ID:
1C1B12600D81DE05
20
src/index.ts
20
src/index.ts
|
|
@ -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
|
||||
|
|
|
|||
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 {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue