diff --git a/src/index.ts b/src/index.ts index bd82896..25031b5 100644 --- a/src/index.ts +++ b/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 diff --git a/src/style.scss b/src/style.scss index fbc778d..e39ce0a 100644 --- a/src/style.scss +++ b/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; -}