Main page styling

src/routes/home/index.js

@@ -2,14 +2,17 @@ import React from 'react'
 import Page from '../../components/page'
 
 export default () => (
-  <div>
+  <div className="home-page">
     <div className="container">
-      <h1 className="logo">Wikipadia</h1>
+      <h1 className="page-title">Wikipadia</h1>
       <div className="blurb">
         <p>
           <em>WikiPadia</em> is a beautiful, customisable Wikipedia reader. It
           was specifically built for leisurely reading on an iPad.
         </p>
+        <p>
+          <a href="https://github.com/rowanhogan/wikipadia">Source code</a>
+        </p>
       </div>
     </div>
 

src/styles/_home.scss

@@ -0,0 +1,118 @@
+.home-page {
+  .blurb {
+    text-align: center;
+  }
+
+  .container + .container {
+    padding-top: 0;
+
+    .page-title {
+      display: none;
+    }
+  }
+
+  .loading {
+    &:before,
+    &:after {
+      top: 0;
+    }
+  }
+
+  .page {
+    .root h2 .mw-headline:before {
+      display: none;
+    }
+  }
+
+  #mp-topbanner {
+    > div {
+      display: none;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      text-align: center;
+
+      &:before {
+        content: 'Categories';
+        display: block;
+        font-family: $title-stack;
+        margin-bottom: 1rem;
+        font-size: 1.25rem;
+      }
+
+      li {
+        display: inline-block;
+
+        a {
+          padding: 0.25rem;
+        }
+      }
+    }
+  }
+
+  #mp-upper {
+    tr {
+      display: flex;
+
+      td {
+        flex: 50%;
+      }
+    }
+  }
+
+  #mp-left {
+    padding-right: 1.5rem;
+
+    + td {
+      display: none !important;
+    }
+  }
+
+  #mp-right {
+    padding-left: 1.5rem;
+  }
+
+  #mp-upper,
+  #mp-lower,
+  #mp-upper td,
+  #mp-lower td {
+    display: block;
+  }
+
+  #mp-otd p:first-child {
+    text-align: center;
+  }
+
+  #mp-tfp img {
+    width: 100%;
+  }
+
+  #mp-sister-content .plainlinks tbody {
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    justify-content: center;
+
+    tr {
+      margin: 1rem;
+    }
+  }
+
+  #lang > ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: block;
+      margin-right: 1.5rem;
+    }
+  }
+
+  #metalink {
+    text-align: center;
+  }
+}

src/styles/_thumbs.scss

@@ -1,12 +1,8 @@
+.mp-thumb,
 .thumb {
   margin: 2em auto;
   text-align: center;
 
-  .thumbinner {
-    margin: auto;
-    width: auto;
-  }
-
   .thumbcaption {
     font-size: 75%;
     margin: 1rem auto;
@@ -16,7 +12,13 @@
   }
 }
 
+.thumbinner {
+  margin: auto;
+  width: auto;
+}
+
 .infobox :only-child > .image,
+.mp-thumb .image,
 .thumb {
   display: block;
 

src/styles/styles.scss

@@ -9,7 +9,7 @@ $header-height: 3.25rem;
 
 @import 'layout';
 @import 'typography';
-@import 'main';
+@import 'home';
 @import 'page';
 @import 'themes';
 @import 'loading';