Views: replace css files with scss modules

src/App.jsx

@@ -12,7 +12,9 @@ import HomeView from '~/src/views/HomeView/HomeView'
 import GamesView from '~/src/views/GamesView/GamesView'
 import ThemesView from '~/src/views/ThemesView/ThemesView'
 import PlayerView from '~/src/views/PlayerView/PlayerView'
-import NotFoundView from '~/src/views/NotFoundView'
+import NotFoundView from '~/src/views/NotFoundView/NotFoundView'
+
+import * as style from './style/App.module.scss'
 
 export default function App () {
   const themeEngine = useThemeEngine()
@@ -30,8 +32,8 @@ export default function App () {
   return (
     <Router hook={useHashLocation}>
       <div className={[
-        'app',
-        extractView(currentLocation),
+        style.app,
+        style[extractView(currentLocation)],
         themeEngine.currentTheme].join(' ')}>
 
         <Switch>

src/components/Player/Status/Status.jsx

@@ -3,7 +3,7 @@ import { Link } from 'wouter-preact'
 import * as s from './Status.module.scss'
 
 const fail = (details) => (
-  <div className={[s.status, s.fail].join(' ')}>
+  <div className={[s.status].join(' ')}>
     <h1>
       Error
     </h1>

src/components/Player/Status/Status.module.scss

@@ -6,8 +6,12 @@
 }
 
 .status {
-  padding: var(--inner-padding);
   word-break: break-word;
+  padding-block: var(--inner-padding);
+
+  @media (max-width: 800px) {
+    padding: var(--inner-padding);
+  }
 
   &.loading > div:after {
     animation: dots0123 1s infinite;

src/routing.js

@@ -9,7 +9,10 @@ export const buildPlayLinkHref = ({ url }) =>
   `/#/play/${encodeURIComponent(url)}`
 
 export const extractView = (location) => {
+  if (location === '/') return 'home'
+
   const currentView = location.split('/').filter(Boolean)[0]
+
   return currentView || ''
 }
 

src/style/App.module.scss

@@ -0,0 +1,49 @@
+.app {
+  min-height: 100%;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  color: var(--main-color);
+  background-color: var(--bg-color);
+
+  /* */
+  &.home, &.games, &.themes {
+    padding: var(--inner-padding);
+
+    /* Fix for Jumping Scrollbar Issue */
+    @media (min-width: 800px) {
+      padding-left: calc(100vw - 100% + var(--inner-padding));
+    }
+  }
+
+  /* Player view */
+  &.play, &.focus {
+    height: 100%;
+    max-height: 100dvh;
+
+    @media (min-width: 800px) {
+      & > main {
+        max-height: 90%;
+        margin: auto;
+      }
+    }
+  }
+
+  /* */
+  & > main {
+    flex: 1 1 auto;
+
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+
+    @media (min-width: 800px) {
+      margin: 5vh 0;
+      max-width: 800px;
+    }
+  }
+}

src/style/base.scss

@@ -15,34 +15,3 @@ html, body {
 #root {
   height: 100%;
 }
-
-.app {
-  min-height: 100%;
-  box-sizing: border-box;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  color: var(--main-color);
-  background-color: var(--bg-color);
-
-  /* Fix for Jumping Scrollbar Issue */
-  @media (min-width: 800px) {
-    padding-left: calc(100vw - 100%);
-  }
-
-  & > main {
-    flex: 1 1 auto;
-
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
-
-    @media (min-width: 800px) {
-      margin: 5vh 0;
-      max-width: 800px;
-    }
-  }
-}

src/views/GamesView/GamesView.css

@@ -1,11 +0,0 @@
-.app > .view.games {
-  padding: var(--inner-padding);
-}
-
-.view.games h4 {
-  margin: 0;
-}
-
-.view.games li {
-  margin-bottom: 1em;
-}

src/views/GamesView/GamesView.jsx

@@ -5,7 +5,7 @@ import GameEntry from
 
 import top2019 from './top2019'
 
-import './GamesView.css'
+import * as s from './GamesView.module.scss'
 
 const tutorialGame = {
   name: 'The Dreamhold',
@@ -15,8 +15,7 @@ const tutorialGame = {
 
 export default function GamesView () {
   return (
-    <main className='view games'>
-
+    <main className={s.games}>
       <h1>
         <a
           target='_blank'
@@ -32,25 +31,25 @@ export default function GamesView () {
           go back</Link>.
       </p>
 
-      <h2>
-        Tutorial
-      </h2>
+      <section className={s.tutorial}>
+        <h2>
+          Tutorial
+        </h2>
 
-      <p>
-        If you are not familiar with Interactive Fiction,
-        you should start with this tutorial game
-        by&nbsp;Andrew&nbsp;Plotkin:
-      </p>
+        <p>
+          If you are not familiar with Interactive Fiction,
+          you should start with this tutorial game
+          by&nbsp;Andrew&nbsp;Plotkin:
+        </p>
 
-      <ul>
-        <li>
-          <GameEntry {...{
-            ...tutorialGame,
-          }} />
-        </li>
-      </ul>
-
-      <br />
+        <ul>
+          <li>
+            <GameEntry {...{
+              ...tutorialGame,
+            }} />
+          </li>
+        </ul>
+      </section>
 
       <h2>
         Interactive Fiction Top 50 of All Time

src/views/GamesView/GamesView.module.scss

@@ -0,0 +1,13 @@
+.games {
+  .tutorial {
+    margin-block: 64px;
+  }
+
+  h4 {
+    margin: 0;
+  }
+
+  li {
+    margin-bottom: 1em;
+  }
+}

src/views/HomeView/HomeView.css

@@ -1,3 +0,0 @@
-.app > .view.home {
-  padding: var(--inner-padding);
-}

src/views/HomeView/HomeView.jsx

@@ -12,13 +12,11 @@ import TargetURLSelector from
 import ThemeSelector from
   '~/src/components/ThemeSelector/ThemeSelector'
 
-import './HomeView.css'
-
 export default function HomeView ({ themeEngine }) {
   const setLocation = useHashLocation()[1]
 
   return (
-    <main className='view home'>
+    <main>
       <h1>
         ElseIFPlayer
       </h1>

src/views/PlayerView/PlayerView.css

@@ -1,13 +0,0 @@
-.app.play,
-.app.focus {
-  height: 100%;
-  max-height: 100dvh;
-}
-
-@media (min-width: 800px) {
-  .app.play main,
-  .app.focus main {
-    max-height: 90%;
-    margin: auto;
-  }
-}

src/views/PlayerView/PlayerView.jsx

@@ -3,8 +3,6 @@ import { useState, useEffect } from 'preact/hooks'
 import UrlPlayer from '~/src/components/Player/UrlPlayer'
 import MenuOverlay from '~/src/components/Player/MenuOverlay/MenuOverlay'
 
-import './PlayerView.css'
-
 const decode = (encodedUrl) => decodeURIComponent(encodedUrl)
 
 export default function PlayerView ({

src/views/ThemesView/ThemesView.css

@@ -1,39 +0,0 @@
-.app > .view.themes {
-  padding: var(--inner-padding);
-  --current-border: var(--main-color);
-}
-
-.themePreview {
-  border: 2px solid var(--current-border);
-  padding: calc(2 * var(--inner-padding));
-  margin-bottom: 32px;
-
-  background-color: var(--bg-color);
-  color: var(--main-color);
-}
-
-.themePreview.current {
-  padding: 0;
-  border: none;
-  margin-bottom: 64px;
-}
-
-.themePreview .output {
-  border: 2px solid var(--main-color);
-  padding: var(--inner-padding);
-  margin-bottom: 8px;
-}
-
-.themePreview .output .message.subheader {
-  font-weight: bold;
-  color: var(--accent-color);
-  text-transform: capitalize;
-}
-
-.themePreview .output .message.input {
-  color: var(--input-color);
-}
-
-.themePreview button {
-  width: 100%;
-}

src/views/ThemesView/ThemesView.jsx

@@ -1,15 +1,15 @@
 import { Link } from 'wouter-preact'
 
-import './ThemesView.css'
+import * as s from './ThemesView.module.scss'
 
 const Preview = (themeEngine, theme) =>
-  <section key={theme} className={`themePreview ${theme}`}>
-    <div className='output'>
-      <div className='message input'>
+  <section key={theme} className={[s.themePreview, theme].join(' ')}>
+    <div className={s.output}>
+      <div className={[s.message, s.input].join(' ')}>
         &gt; look
       </div>
       <div><br /></div>
-      <div className='message subheader'>
+      <div className={[s.message, s.subheader].join(' ')}>
         {theme}
       </div>
       <div>
@@ -29,7 +29,7 @@ export default function ThemesView ({ themeEngine }) {
     .map((theme) => Preview(themeEngine, theme))
 
   return (
-    <main className='view themes'>
+    <main className={s.themes}>
       <h1>
         Themes Page
       </h1>
@@ -39,17 +39,16 @@ export default function ThemesView ({ themeEngine }) {
           go back</Link>.
       </p>
 
-      <h2>
-        Current Theme
-      </h2>
-
-      <section className={'themePreview current'}>
-        <div className='output'>
-          <div className='message input'>
+      <section className={[s.themePreview, s.current].join(' ')}>
+        <h2>
+          Current Theme
+        </h2>
+        <div className={s.output}>
+          <div className={[s.message, s.input].join(' ')}>
             &gt; look
           </div>
           <div><br /></div>
-          <div className='message subheader'>
+          <div className={[s.message, s.subheader].join(' ')}>
             Selected: {themeEngine.currentTheme}
           </div>
           <div>

src/views/ThemesView/ThemesView.module.scss

@@ -0,0 +1,38 @@
+.themes {
+  --current-border: var(--main-color);
+
+  .themePreview {
+    border: 2px solid var(--current-border);
+    padding: calc(2 * var(--inner-padding));
+    margin-bottom: 32px;
+
+    background-color: var(--bg-color);
+    color: var(--main-color);
+
+    &.current {
+      padding: 0;
+      border: none;
+      margin-block: 64px;
+    }
+
+    .output {
+      border: 2px solid var(--main-color);
+      padding: var(--inner-padding);
+      margin-bottom: 8px;
+
+      .message.subheader {
+        font-weight: bold;
+        color: var(--accent-color);
+        text-transform: capitalize;
+      }
+
+      .message.input {
+        color: var(--input-color);
+      }
+    }
+
+    button {
+      width: 100%;
+    }
+  }
+}