Merge pull request #90 from KindleModding/css-reset-and-fix-layout

CSS reset and fix layout

Author: ThatHackerDudeFromCyberspace

content/_index.html

@@ -50,7 +50,6 @@
     .buttons > *
     {
         min-width: 0;
-        margin: 1em;
     }
 
     @media (max-width: 500px) {
@@ -60,19 +59,48 @@
         }
     }
 
-    .card > h1, .card > h2
+    .card
     {
-        width: 100%;
+        padding: 2em 1em;
         text-align: center;
+        margin: 2em;
+    }
+
+    .card h1
+    {
+        font-size: 24pt;
+        margin: 0;
+        margin-bottom: 1.5ex;
+    }
+
+    .card h2
+    {
+        font-size: 18pt;
+        margin: 0;
+        margin-bottom: 1.2ex;
+    }
+
+    .card p
+    {
+        font-size: 12pt;
+        margin: 0;
+        margin-bottom: 2.5ex;
+    }
+
+    .card > :last-child
+    {
+        margin-bottom: 0;
     }
 </style>
 </head>
 <div class="main">
-    <div class="landing-section card" style="margin-bottom: 3em; margin-top: 2em;">
-        <h1 style="color: var(--text-colour) !important;">Kindle Modding Wiki</h1>
-        <p>Welcome to the Kindle Modding Wiki</p>
-        <p>Your one-stop shop for all things related to hacking Kindles</p>
-        <a class="button" href="/kindle-models.html">Get Started</a>
+    <div class="landing-section">
+        <div class="card">
+            <h1 style="color: var(--text-colour) !important;">Kindle Modding Wiki</h1>
+            <p>Welcome to the Kindle Modding Wiki</p>
+            <p>Your one-stop shop for all things related to hacking Kindles</p>
+            <a class="button" href="/kindle-models.html">Get Started</a>
+        </div>
     </div>
 
     <div class="landing-section buttons">