Minor refactoring

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
@@ -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++)
+		customClasses.forEach((klass) => {
-			paragraphElement.classList.add(customClasses[i]);
+			paragraphElement.classList.add(klass);
+		});
 
 		// Fade in paragraph after a short delay
 		showAfter(delay, paragraphElement);
@@ -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");
+	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

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-family: 'Inter', sans-serif;
-    font-weight: lighter;
+    font-weight: 600;
     background: white;
     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;
         }
+    }
 }
 
-h1,
+@mixin titles {
-h2 {
     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) {
+    @media screen and (max-width: 980px) {
-    .outerContainer {
         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 {
-  Class applied to first choice
-*/
-:not(.choice)+.choice {
         padding-top: 1em;
+    }
+
+    /*
+    Class applied to choice links
+    */
+    a, span {
+        font-size: 15pt;
+    }
 }
 
-/*
-  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) {
+    @media screen and (prefers-reduced-motion: no-preference) {
-    #controls {
         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;
         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 {
+    h2 {
         color: #666;
-}
+    }
 
-.dark .container {
+    .container {
         background: black;
-}
+    }
 
-.dark .written-in-ink {
+    .written-in-ink {
         background: black;
-}
+    }
 
-.dark a {
+    a {
         color: #cc8f1a;
-}
-.dark .unclickable{
-    color: #c4af87;
-    cursor:not-allowed;
-}
 
-.dark a:hover {
+        @media screen and (prefers-reduced-motion: no-preference) {
-    color: white;
-}
-
-@media screen and (prefers-reduced-motion: no-preference) {
-    .dark a {
             transition: color 0.6s;
         }
-}
 
-.dark strong {
+        &:hover {
             color: white;
-}
+        }
+    }
 
-.dark #controls [disabled] {
+    .unclickable {
-    color: #444;
+        color: #c4af87;
-}
+        cursor:not-allowed;
+    }
 
-.dark .end {
+    strong {
         color: white;
-}
+    }
 
-.dark #controls {
+    #controls {
         background: black;
+
+        [disabled] {
+            color: #444;
+        }
+    }
+
+    .end {
+        color: white;
+    }
 }