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,28 +24,22 @@ export default function ({ themeEngine }) {
         ifplayer
       </h1>
 
+      <section>
         <p>
           Interactive Fiction interpreter
           that runs right in your browser.
-        <br />
+          <br/>
-        Powered by <a
+          Source code can be found in this <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
+            repository
           </a>.
         </p>
+      </section>
+
       <hr />
+
+      <section>
         <h3>
           Interface theme
         </h3>
@@ -57,20 +51,32 @@ export default function ({ themeEngine }) {
           <small>
             Themes without borders
             are better suited for small screens.
-        </small><br />
+          </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>
+          <Link href='/top100'>
+            IFDB Top 100 games
+          </Link>
         </p>
+      </section>
+
       <hr />
+
+      <section>
         <h3>
           Play the game from a file
         </h3>
@@ -88,24 +94,23 @@ export default function ({ themeEngine }) {
         </p>
         <p className='play'>
           <label>
-          <div>
+            Local file: <br />
-            Local file:
-          </div>
             <FileSelector {...{
               setTargetName,
               setTargetUrl
             }} />
           </label>
+          <br />
           <label>
-          <div>
+            Direct link: <br />
-            Direct link:
-          </div>
             <URLSelector {...{
               setTargetName,
               setTargetUrl
             }} />
           </label>
         </p>
+      </section>
+
       { targetUrl
         ? playButton(targetName, targetUrl, themeEngine.currentTheme)
         : null }