Draft index page

index.html

@@ -54,6 +54,27 @@
             <img class="icon" src="assets/images/outline.svg" />
             <img class="type" src="assets/images/type.svg" />
           </header>
+          <div>
+            <p>
+              This handbook is a collection of tweaks of the /tg/station wiki
+              pages to make them prettier and easier to navigate.
+            </p>
+            <p>Please note that:</p>
+            <ul>
+              <li>
+                It's being built with smaller windows in mind (think SS13
+                popups), large window format is planned but it's just not there
+                yet.
+              </li>
+              <li>
+                There is a lot of development still happening, so many parts are
+                not as polished as they should be.
+              </li>
+            </ul>
+          </div>
+          <p>
+            Click any guide in the top menu to open it.
+          </p>
         </div>
       </section>
     </main>

style/pages/welcome.scss

@@ -2,14 +2,18 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    font-size: 12pt;
+    line-height: 1.4em;
+    padding: 10pt;
     header {
-        flex: 1;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        padding: 20pt;
         .icon {
-            max-width: 30vw;
+            max-width: 25vw;
             width: 200px;
             margin-right: 20px;
         }
@@ -18,4 +22,8 @@
             width: 400px;
         }
     }
+    p,
+    ul {
+        max-width: 960px;
+    }
 }

style/ui.scss

@@ -88,13 +88,14 @@ body {
     .page {
         //visibility: hidden;
         will-change: display;
+        &:not(.active) {
             display: none;
+        }
         overflow-y: auto;
         grid-row: 1;
         grid-column: 1;
         &.active {
             //visibility: visible;
-            display: inherit;
             &.waiting {
                 user-select: none;
                 position: fixed;