From 42015eca8fb9d72f8aebb1c59c4c90a62cb51c64 Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Tue, 2 Mar 2021 02:30:22 +0500
Subject: [PATCH] Dirty markup

---
 src/style/base.css     |  21 ++++--
 src/style/themes.css   |   1 +
 src/views/HomeView.jsx | 165 +++++++++++++++++++++--------------------
 3 files changed, 101 insertions(+), 86 deletions(-)

diff --git a/src/style/base.css b/src/style/base.css
index 2e5d58c..ed219c4 100644
--- a/src/style/base.css
+++ b/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;
 }
diff --git a/src/style/themes.css b/src/style/themes.css
index 1b29e56..7674063 100644
--- a/src/style/themes.css
+++ b/src/style/themes.css
@@ -69,6 +69,7 @@
   --outer-padding: 8px;
   --inner-padding: 8px;
   --border-width: 2px;
+  --input-box-margin: 8px;
 }
 
 .solarized-light,
diff --git a/src/views/HomeView.jsx b/src/views/HomeView.jsx
index 1eaef41..7471b19 100644
--- a/src/views/HomeView.jsx
+++ b/src/views/HomeView.jsx
@@ -24,88 +24,93 @@ export default function ({ themeEngine }) {
         ifplayer
       </h1>
 
-      <p>
-        Interactive Fiction interpreter
-        that runs right in your browser.
-        <br />
-        Powered by <a
-          target="_blank"
-          href="https://github.com/He4eT/emglken">
-          Emglken
-        </a> and <a
-          target="_blank"
-          href="https://github.com/He4eT/cheap-glkote">
-          cheap-glkote
-        </a>.
-      </p>
-      <p>
-        Source code can be found here: <a
-          target="_blank"
-          href="https://github.com/He4eT/ifplayer">
-          ifplayer
-        </a>.
-      </p>
+      <section>
+        <p>
+          Interactive Fiction interpreter
+          that runs right in your browser.
+          <br/>
+          Source code can be found in this <a
+            target="_blank"
+            href="https://github.com/He4eT/ifplayer">
+            repository
+          </a>.
+        </p>
+      </section>
+
       <hr />
-      <h3>
-        Interface theme
-      </h3>
-      <p>
-        <ThemeSelector {...{
-          themeEngine
-        }} />
-        <br /><br />
-        <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
+
+      <section>
+        <h3>
+          Interface theme
+        </h3>
+        <p>
+          <ThemeSelector {...{
+            themeEngine
           }} />
-        </label>
-        <label>
-          <div>
-            Direct link:
-          </div>
-          <URLSelector {...{
-            setTargetName,
-            setTargetUrl
-          }} />
-        </label>
-      </p>
+          <br /><br />
+          <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>
+      </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 }