From d7f1d29ce6919e868772debe1aa2cfad0cb6faad Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 28 Feb 2016 22:27:55 +0000
Subject: [PATCH] Restyle a load of things

---
 static/src/less/homepage.less  |  1 -
 static/src/less/style.less     | 75 +++++++++++++++++-----------------
 static/src/less/variables.less |  2 +-
 templates/base.html            |  6 ++-
 templates/content_base.html    |  5 ++-
 5 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/static/src/less/homepage.less b/static/src/less/homepage.less
index e9ac845..41c183f 100644
--- a/static/src/less/homepage.less
+++ b/static/src/less/homepage.less
@@ -40,7 +40,6 @@
       margin-top: 35px;
       margin-bottom: 35px;
       color: white;
-      font-size: 18px;
     }
   }
 
diff --git a/static/src/less/style.less b/static/src/less/style.less
index 6702993..5c165e0 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -17,6 +17,8 @@
 html, body{
   height: 100%;
   width: 100%;
+  font-weight: 300;
+
 }
 
 p {
@@ -78,7 +80,6 @@ footer {
   padding-top: 10px;
   padding-bottom: 15px;
   color: white;
-  font-size: 16px;
   background-color: #232323;
   a {
     color: #ff7f00;
@@ -88,12 +89,14 @@ footer {
     }
   }
   .triple {
-    padding: 7px;
+    margin: 0 7px;
+  }
+  .powered-by {
+    font-size: @font-size-h6;
   }
   .social {
-    font-size: 25px;
+    font-size: 23px;
     margin: 0;
-    margin-top: 6px;
     padding: 7px;
     a {
       margin: 0 4px;
@@ -104,7 +107,7 @@ footer {
     }
   }
   .ci-badge {
-    height: 23px;
+    height: @font-size-h4;
     margin-top: 10px;
   }
 }
@@ -155,46 +158,42 @@ footer {
 .jumbotron.header {
   padding-top: 10px;
   padding-bottom: 0;
-  background-color: #232323;
-  color: white;
-  .box-shadow(0px 8px 10px 3px rgba(0,0,0,0.6));
-  margin-bottom: 27px;
+  margin-bottom: 0;
+  background-color: @body-bg;
   @media (max-width: @screen-xs-max) {
     padding-top: 50px;
   }
   h1 {
-    margin: 15px 0;
+    margin: 5px 0;
     display: inline-block;
   }
-  .container {
-    position: relative;
-    #breadcrumbs {
-      text-align: right;
-      position: absolute;
-      bottom: 5px;
-      right: 0;
-      .breadcrumb {
-        background: transparent;
-        margin-bottom: 3px;
-        font-size: 17px;
-        padding: 0;
-        li::before {
-          content: "/";
-          padding: 0 3px;
-        }
-        a {
-          .transition(color 0.4s);
-          color: white;
-          &:hover {
-            color: #ff7f00;
-          }
-        }
-      }
-    }
+  .image {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 225px;
+    margin: 10px 0;
   }
-  @media (min-width: @screen-sm-min) {
-    & + div {
-      margin-top: 65px;
+}
+
+#breadcrumbs {
+  text-align: right;
+  .breadcrumb {
+    background: transparent;
+    font-size: @font-size-h4;
+    margin: 10px 0;
+    padding: 0;
+    li::before {
+      content: "/";
+      padding: 0 3px;
+    }
+    a {
+      .transition(color 0.4s);
+      color: #333;
+      &:hover {
+        color: #ff7f00;
+      }
     }
   }
 }
diff --git a/static/src/less/variables.less b/static/src/less/variables.less
index 8155f87..7ec8801 100644
--- a/static/src/less/variables.less
+++ b/static/src/less/variables.less
@@ -18,7 +18,7 @@
 @font-family-serif: 'Roboto';
 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base: @font-family-sans-serif;
-@font-size-base: 17px;
+@font-size-base: 15px;
 @font-size-large: ceil((@font-size-base * 1.25));
 @font-size-small: ceil((@font-size-base * 0.85));
 @font-size-h1: floor((@font-size-base * 2.6));
diff --git a/templates/base.html b/templates/base.html
index 3a25fdf..7713b67 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -29,12 +29,14 @@
         <div class="row">
           <div class="col-xs-12">
             <p class="triple">
-              <a href="{% url 'about:index' %}">About</a> | <a href="https://github.com/RealOrangeOne/theorangeone.net" target="_blank">View Source</a> | <a href="">Contact</a>
+              <a href="{% url 'about:index' %}">About</a> |
+              <a href="https://github.com/RealOrangeOne/theorangeone.net" target="_blank">View Source</a> |
+              <a href="">Contact</a>
             <p>
           </div>
         </div>
         <div class="row">
-          <div class="col-xs-12">
+          <div class="col-xs-12 powered-by">
             <p>Powered by <a href="https://www.djangoproject.com/">Django</a>, <a href="https://clients.inceptionhosting.com/aff.php?aff=256">Inception Hosting</a>, and a whole heap of <a href="https://github.com/RealOrangeOne/theorangeone.net">Magic</a>!</p>
           </div>
         </div>
diff --git a/templates/content_base.html b/templates/content_base.html
index 667a20b..da82d32 100644
--- a/templates/content_base.html
+++ b/templates/content_base.html
@@ -8,9 +8,12 @@
   <div class="jumbotron header">
     <div class="container">
       <h1>{% block pageTitle %}{% endblock %}</h1>
+      {% if header_image %}
+        <div class="image" style="background-image: url({{ header_image }});"></div>
+      {% endif %}
       <div id="breadcrumbs"></div>
+      <navbar></navbar>
     </div>
-    <navbar></navbar>
   </div>
   {% block content %}{% endblock %}
 {% endblock %}