Views: replace css files with scss modules

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%;
+    }
+  }
+}