From 92853f4c1ea32c9785478c88fe001265b074d2ca Mon Sep 17 00:00:00 2001
From: Rowan Hogan <rowan.hogan@gmail.com>
Date: Thu, 8 Sep 2016 00:41:09 -0400
Subject: [PATCH] Style improvements

---
 app/index.html           | 16 ++++++++-------
 app/styles/_app.scss     |  8 +++++++-
 app/styles/_default.scss |  6 +++++-
 app/styles/_main.scss    | 44 +++++++++++++++++++---------------------
 4 files changed, 42 insertions(+), 32 deletions(-)
diff --git a/app/index.html b/app/index.html
index d046207..40fcbf4 100644
--- a/app/index.html
+++ b/app/index.html
@@ -17,15 +17,17 @@
 </head>
 <body>
   <header id="page-header" class="page-header">
-    <a id="home-link" class="home-link" href="/?Main_Page">Main page</a>
-    <button id="toc-toggle" class="toc-toggle">Table of contents</button>
+    <div class="page-header-container">
+      <a id="home-link" class="home-link" href="/?Main_Page">Main page</a>
+      <button id="toc-toggle" class="toc-toggle">Table of contents</button>
 
-    <form class="search-form" type="POST">
-      <input type='search' placeholder="Search...">
-      <button type="submit">Search</button>
-    </form>
+      <form class="search-form" type="POST">
+        <input type='search' placeholder="Search...">
+        <button type="submit">Search</button>
+      </form>
 
-    <button id="menu-toggle" class="menu-toggle">Menu</button>
+      <button id="menu-toggle" class="menu-toggle">Menu</button>
+    </div>
   </header>
 
   <div id="menu">
diff --git a/app/styles/_app.scss b/app/styles/_app.scss
index 9a7243f..efa7afc 100644
--- a/app/styles/_app.scss
+++ b/app/styles/_app.scss
@@ -10,7 +10,6 @@ body {
   left: 0;
   right: 0;
   padding: 0;
-  padding: 0 $header-height;
   z-index: 100;
   background: white;
   border-bottom: thin solid #ddd;
@@ -20,6 +19,13 @@ body {
     transform: translateY(-100%);
   }
 
+  .page-header-container {
+    position: relative;
+    max-width: 1000px;
+    margin: auto;
+    padding: 0 $header-height;
+  }
+
   button, a {
     width: $header-height;
     height: $header-height;
diff --git a/app/styles/_default.scss b/app/styles/_default.scss
index 772bc39..e1d4fd5 100644
--- a/app/styles/_default.scss
+++ b/app/styles/_default.scss
@@ -248,13 +248,15 @@ div.columns dd dd {
 }
 
 .navbox {
-  border: 1px solid #aaa;
+  border: 0;
   width: 100%;
+  max-width: 100%;
   margin: auto;
   clear: both;
   font-size: 88%;
   text-align: center;
   padding: 1px;
+  overflow: auto;
 }
 
 .navbox-inner,
@@ -1881,6 +1883,8 @@ a.external {
   background-repeat: no-repeat;
   background-position: center right;
   padding-right: 13px;
+  word-break: break-word;
+  word-wrap: break-word;
 }
 
 .content .return-link,
diff --git a/app/styles/_main.scss b/app/styles/_main.scss
index 9caf8cc..8f8999d 100644
--- a/app/styles/_main.scss
+++ b/app/styles/_main.scss
@@ -12,8 +12,22 @@
     max-width: 100%;
   }
 
+  .tfa-recent {
+    margin-top: 30px;
+  }
+
+  .potd-recent, .tfa-recent {
+    text-align: center !important;
+
+    ul {
+      display: block;
+    }
+  }
+
   #content {
     font-size: 1em;
+    max-width: 800px;
+    margin: auto;
 
     .mw-headline {
       margin: 0;
@@ -158,7 +172,7 @@
   }
 
   #mp-itn, #mp-otd, #mp-dyk {
-    padding: 2em $padding;
+    padding: 2em;
 
     // @media (min-width: 900px) {
     //   float: left;
@@ -206,7 +220,7 @@
     #mp-itn,
     #mp-otd {
       box-sizing: border-box;
-      width: 50vw;
+      width: 50%;
 
       ul {
         max-width: 50vw;
@@ -227,7 +241,7 @@
     display: none;
   }
 
-
+  #mp-itn .itn-img, #mp-dyk .dyk-img,
   #mp-itn-img, #mp-otd-img, #mp-dyk-img, #mp-tfl-img {
     float: none !important;
     margin: auto !important;
@@ -263,17 +277,11 @@
   //   }
   // }
 
-  #mp-right {
-    border-bottom: thin solid #ddd !important;
-  }
-
-  #mp-dyk, #mp-itn {
-    border-right: thin solid #ddd;
-  }
 
   #mp-otd > p {
     margin-top: 0;
     line-height: 1.5em;
+    text-align: center;
   }
 
 
@@ -311,19 +319,9 @@
     clear: both;
   }
 
-  #content #mp-tfp-h2 {
-    position: absolute;
-    left: 0;
-    right: 0;
-    color: white !important;
-    text-align: left;
-    text-shadow: 0 1px 30px rgba(black, .5);
-
-    .mw-headline {
-      font-size: 16px;
-      padding: 2em;
-      text-align: center;
-    }
+  #content #mp-tfp-h2 .mw-headline {
+    padding: 2em 0;
+    text-align: center;
   }
 
   #mp-bottom {
