Restyle projects on homepage

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)
 

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,25 +90,25 @@ body.index {
       padding: 15px;
       height: 300px;
       text-align: center;
-      &.see-more {
+      &.larger {
-        h1 {
+        .inner {
           position: relative;
           top: 50%;
           transform: translateY(-50%);
+          h1, h2 {
             margin: 0;
           }
         }
+        &.project h2 {
+          font-size: 27px;
+        }
+      }
       @media (max-width: @screen-xs-max) {
         height: 400px;
       }
       img {
         max-width: 100%;
-        @media (min-width: @screen-sm-min) {
+        max-height: 50%;
-          max-height: 200px;
-        }
-        @media (max-width: @screen-xs-max) {
-          max-height: 275px;
-        }
       }
       h3 {
         margin: 10px 0;

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,23 +35,35 @@
       <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">
+              {% if project.header_image %}
                 <div class="thumbnail">
-                <img src="{{ project.image }}" alt="{{ key }} image">
+                  <img src="{{ project.header_image }}" alt="image">
                   <div class="caption">
-                  <h3>{{ project.title }}</h3>
+                    <h3>{{ project.name }}</h3>
                     <p></p>
-                  <a href="/project/">
+                    <a href="{{ project.url }}">
                       Read More
                     </a>
                   </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">
+            <div class="thumbnail larger">
-              <a href="/projects">
+              <div class="inner">
+                <a href="/projects/">
                   <h1>See All</h1>
                 </a>
               </div>
@@ -61,4 +71,5 @@
           </div>
         </div>
       </div>
+    </div>
 {% endblock %}