Dirty markup

src/style/base.css

@@ -1,3 +1,5 @@
+/* Layout */
+
 html, body {
   margin: 0;
   height: 100%;
@@ -52,8 +54,18 @@ a:focus {
   background-color: hsl(0, 0%, 0%, 0.1);
 }
 
+a:hover {
+  border-width: 3px;
+}
+
+ul {
+  list-style: square;
+}
+
 /* Dirty views */
 
+/* Home */
+
 .app > main.home {
   padding: var(--inner-padding);
   max-height: unset;
@@ -76,17 +88,14 @@ a:focus {
   cursor: pointer;
 }
 
-.home details > ul {
-  border-left: 4px solid currentColor;
-}
-
 .home .play label {
-  display: block;
+  display: inline-block;
   margin-bottom: 16px;
+  width: 100%;
+  max-width: 400px;
 }
 
 .home .play input {
   box-sizing: border-box;
   width: 100%;
-  max-width: 400px;
 }

src/style/themes.css

@@ -69,6 +69,7 @@
   --outer-padding: 8px;
   --inner-padding: 8px;
   --border-width: 2px;
+  --input-box-margin: 8px;
 }
 
 .solarized-light,

src/views/HomeView.jsx

@@ -24,88 +24,93 @@ export default function ({ themeEngine }) {
         ifplayer
       </h1>
 
-      <p>
+      <section>
-        Interactive Fiction interpreter
+        <p>
-        that runs right in your browser.
+          Interactive Fiction interpreter
-        <br />
+          that runs right in your browser.
-        Powered by <a
+          <br/>
-          target="_blank"
+          Source code can be found in this <a
-          href="https://github.com/He4eT/emglken">
+            target="_blank"
-          Emglken
+            href="https://github.com/He4eT/ifplayer">
-        </a> and <a
+            repository
-          target="_blank"
+          </a>.
-          href="https://github.com/He4eT/cheap-glkote">
+        </p>
-          cheap-glkote
+      </section>
-        </a>.
+
-      </p>
-      <p>
-        Source code can be found here: <a
-          target="_blank"
-          href="https://github.com/He4eT/ifplayer">
-          ifplayer
-        </a>.
-      </p>
       <hr />
-      <h3>
+
-        Interface theme
+      <section>
-      </h3>
+        <h3>
-      <p>
+          Interface theme
-        <ThemeSelector {...{
+        </h3>
-          themeEngine
+        <p>
-        }} />
+          <ThemeSelector {...{
-        <br /><br />
+            themeEngine
-        <small>
-          Themes without borders
-          are better suited for small screens.
-        </small><br />
-        <small>
-          Double-click on the input field during the game
-          to enter full-screen mode.
-        </small>
-      </p>
-      <hr />
-      <h3>
-        Play a game from the list
-      </h3>
-      <p>
-        <Link href='/top100'>IFDB Top 100 games</Link>
-      </p>
-      <hr />
-      <h3>
-        Play the game from a file
-      </h3>
-      <p>
-        <details>
-          <summary>Supported formats</summary>
-          <ul>
-            <li>TADS games (.t3, .gam);</li>
-            <li>Z-machine games (.z3, .z4, .z5, .z8, .blorb);</li>
-            <li>Glulx VM games (.gblorb, .ulx);</li>
-            <li>Hugo games (.hex);</li>
-            <li>Text-only games are supported;</li>
-          </ul>
-        </details>
-      </p>
-      <p className='play'>
-        <label>
-          <div>
-            Local file:
-          </div>
-          <FileSelector {...{
-            setTargetName,
-            setTargetUrl
           }} />
-        </label>
+          <br /><br />
-        <label>
+          <small>
-          <div>
+            Themes without borders
-            Direct link:
+            are better suited for small screens.
-          </div>
+          </small>
-          <URLSelector {...{
+          <br />
-            setTargetName,
+          <small>
-            setTargetUrl
+            Double-click on the input field during the game
-          }} />
+            to enter full-screen mode.
-        </label>
+          </small>
-      </p>
+        </p>
+      </section>
+
+      <hr />
+
+      <section>
+        <h3>
+          Play a game from the list
+        </h3>
+
+        <p>
+          <Link href='/top100'>
+            IFDB Top 100 games
+          </Link>
+        </p>
+      </section>
+
+      <hr />
+
+      <section>
+        <h3>
+          Play the game from a file
+        </h3>
+        <p>
+          <details>
+            <summary>Supported formats</summary>
+            <ul>
+              <li>TADS games (.t3, .gam);</li>
+              <li>Z-machine games (.z3, .z4, .z5, .z8, .blorb);</li>
+              <li>Glulx VM games (.gblorb, .ulx);</li>
+              <li>Hugo games (.hex);</li>
+              <li>Text-only games are supported;</li>
+            </ul>
+          </details>
+        </p>
+        <p className='play'>
+          <label>
+            Local file: <br />
+            <FileSelector {...{
+              setTargetName,
+              setTargetUrl
+            }} />
+          </label>
+          <br />
+          <label>
+            Direct link: <br />
+            <URLSelector {...{
+              setTargetName,
+              setTargetUrl
+            }} />
+          </label>
+        </p>
+      </section>
+
       { targetUrl
         ? playButton(targetName, targetUrl, themeEngine.currentTheme)
         : null }