From 564da7da1d71f187a356109e5db5d96922121707 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Thu, 7 Apr 2016 22:00:58 +0100
Subject: [PATCH] Restyle projects on homepage

---
 project/pages/views.py        |  1 +
 static/src/less/homepage.less | 51 +++++++----------------------------
 templates/index.html          | 43 ++++++++++++++++++-----------
 3 files changed, 37 insertions(+), 58 deletions(-)

diff --git a/project/pages/views.py b/project/pages/views.py
index b7437a3..12c3546 100644
--- a/project/pages/views.py
+++ b/project/pages/views.py
@@ -30,6 +30,7 @@ def page_view(request, path):
         template = get_template('markdown_content.html')
         context['markdown_content'] = parsed_content
         context['page_title'] = get_title_from_markdown(parsed_content)
+        context['html_title'] = context['page_title']
         parsed_content = template.render(context, request)
     return HttpResponse(parsed_content)
 
diff --git a/static/src/less/homepage.less b/static/src/less/homepage.less
index eee7b69..5556cf5 100644
--- a/static/src/less/homepage.less
+++ b/static/src/less/homepage.less
@@ -45,39 +45,6 @@ body.index {
     }
   }
 
-  #project-images-types {
-    background: @blueprint-logo;
-    background-size: cover;
-    background-attachment: fixed;
-    @media screen and (max-width: @screen-xs-max) {
-      background-attachment: initial;
-    }
-    .container {
-      text-align: center;
-      margin-top: @container-inset;
-      margin-bottom: @container-inset;
-      h1 {
-        margin-top: 0;
-        margin-bottom: @container-inset / 2;
-        color: white;
-        font-size: 40px;
-      }
-      .row {
-      	margin-bottom: 10px;
-
-        .college {
-          background-image: url(../img/projects/collyers-logo.gif);
-        }
-        .personal {
-          background-image: url(../img/projects/kermit-typing.gif);
-        }
-        .work {
-          background-image: url(http://www.recommendedagencies.com/pub/logos/dabapps-logo-1432733278.jpg);
-        }
-      }
-    }
-  }
-
   #twitter-feed {
     text-align: center;
     .container {
@@ -123,12 +90,17 @@ body.index {
       padding: 15px;
       height: 300px;
       text-align: center;
-      &.see-more {
-        h1 {
+      &.larger {
+        .inner {
           position: relative;
           top: 50%;
           transform: translateY(-50%);
-          margin: 0;
+          h1, h2 {
+            margin: 0;
+          }
+        }
+        &.project h2 {
+          font-size: 27px;
         }
       }
       @media (max-width: @screen-xs-max) {
@@ -136,12 +108,7 @@ body.index {
       }
       img {
         max-width: 100%;
-        @media (min-width: @screen-sm-min) {
-          max-height: 200px;
-        }
-        @media (max-width: @screen-xs-max) {
-          max-height: 275px;
-        }
+        max-height: 50%;
       }
       h3 {
         margin: 10px 0;
diff --git a/templates/index.html b/templates/index.html
index 4e7ecfe..910a619 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,8 +16,6 @@
       </div>
     </div>
 
-    <div class="container-fluid" id="project-images-types"></div>
-
     <div class="container-fluid" id="twitter-feed">
       <div class="container">
         <div class="row">
@@ -37,25 +35,38 @@
       <div class="container">
         <div class="row">
           <h1>All Projects</h1>
-          {% for key, project in projects.items %}
+          {% for project in projects %}
             <div class="col-sm-6 col-md-4">
-              <div class="thumbnail">
-                <img src="{{ project.image }}" alt="{{ key }} image">
-                <div class="caption">
-                  <h3>{{ project.title }}</h3>
-                  <p></p>
-                  <a href="/project/">
-                    Read More
-                  </a>
+              {% if project.header_image %}
+                <div class="thumbnail">
+                  <img src="{{ project.header_image }}" alt="image">
+                  <div class="caption">
+                    <h3>{{ project.name }}</h3>
+                    <p></p>
+                    <a href="{{ project.url }}">
+                      Read More
+                    </a>
+                  </div>
                 </div>
-              </div>
+              {% else %}
+                <div class="thumbnail larger project">
+                  <div class="inner">
+                    <h2>{{ project.name }}</h2>
+                    <a href="{{ project.url }}">
+                      Read More
+                    </a>
+                  </div>
+                </div>
+              {% endif %}
             </div>
           {% endfor %}
           <div class="col-sm-6 col-md-4">
-            <div class="thumbnail see-more">
-              <a href="/projects">
-                <h1>See All</h1>
-              </a>
+            <div class="thumbnail larger">
+              <div class="inner">
+                <a href="/projects/">
+                  <h1>See All</h1>
+                </a>
+              </div>
             </div>
           </div>
         </div>