Dirty markup

src/style/base.css

@@ -3,7 +3,10 @@
 html, body {
   margin: 0;
   height: 100%;
+
   font-family: 'Open Sans', sans-serif;
+  font-size: 18px;
+  line-height: 27px;
 }
 
 #root {
@@ -19,9 +22,6 @@ html, body {
   justify-content: center;
   align-items: center;
 
-  font-size: 18px;
-  line-height: 27px;
-
   background-color: var(--bg-color);
   color: var(--main-color);
 }
@@ -62,6 +62,11 @@ ul {
   list-style: square;
 }
 
+/* Status */
+.status {
+  padding: 8px;
+}
+
 /* Dirty views */
 
 /* Home */
@@ -90,7 +95,6 @@ ul {
 
 .view.home .play label {
   display: inline-block;
-  margin-bottom: 16px;
   width: 100%;
   max-width: 400px;
 }

src/views/HomeView.jsx

@@ -43,11 +43,14 @@ export default function ({ themeEngine }) {
         <h3>
           Interface theme
         </h3>
+
         <p>
           <ThemeSelector {...{
             themeEngine
           }} />
-          <br /><br />
+        </p>
+
+        <p>
           <small>
             Themes without borders
             are better suited for small screens.
@@ -80,6 +83,7 @@ export default function ({ themeEngine }) {
         <h3>
           Play the game from a file
         </h3>
+
         <p>
           <details>
             <summary>Supported formats</summary>
@@ -92,6 +96,7 @@ export default function ({ themeEngine }) {
             </ul>
           </details>
         </p>
+
         <p className='play'>
           <label>
             Local file: <br />
@@ -100,7 +105,9 @@ export default function ({ themeEngine }) {
               setTargetUrl
             }} />
           </label>
-          <br />
+        </p>
+
+        <p className='play'>
           <label>
             Direct link: <br />
             <URLSelector {...{