Added cover image to jumbotron

_includes/head.html

@@ -40,7 +40,7 @@
 
   <link rel="stylesheet" href="/css/base.css" type="text/css" media="screen, projection" />
 
-  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+  <script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript" src="/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="/js/masonry.min.js"></script>
   <script type="text/javascript" src="/js/application.js"></script>

_includes/home_header.html

@@ -1,9 +1,10 @@
 {% assign cover_post =  site.categories.cover.first %}
-  <div id="home-header" class="container-fluid">
+<div id="home-header" class="container-fluid">
-      <div class="cover text-center">
+  <div class="cover-image"><img class="img-responsive" src="/images/posts/{{ cover_post.image }}" alt=""></div>
-        <h1 class="title">{{ cover_post.title }}</h1>
+  <div class="cover text-center">
-            <!--<p>{{ cover_post.excerpt | markdownify }}</p>-->
+    <h1 class="title">{{ cover_post.title }}</h1>
-      </div>
+    <!--<p>{{ cover_post.excerpt | markdownify }}</p>-->
-      <div class="left"></div>
-      <div class="right"></div>
   </div>
+  <div class="left"></div>
+  <div class="right"></div>
+</div>

css/base.scss

@@ -40,6 +40,27 @@ $carousel-height: 500px;
 	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
 }
 
+@mixin center-vertical() {
+  -ms-transform: translateY(50%);
+  -webkit-transform: translateY(50%);
+  transform: translateY(50%);
+  bottom: 50%;
+}
+
+@mixin center-horizontal() {
+  -ms-transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+@mixin center-both() {
+  -ms-transform: translate(-50%, 50%);
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+  left: 50%;
+  bottom: 50%;
+}
 // ============== /MIXINS ============== //
 
 @font-face {
@@ -74,53 +95,6 @@ body {
 	font-family: Open Sans, sans-serif;
 }
 
-// ============== COMPONENTS ============== //
-
-a {
-	color: inherit;
-	text-decoration: none;
-	@include transition(all, 0.2s, ease-in);
-
-	&:hover{
-		color: #e74c3c;
-		border-bottom: 1px solid #e74c3c;
-		@include transition(all, 0.2s, ease-in);
-	}
-}
-
-blockquote {
-	border-left: 5px solid #e74c3c;
-	padding-left: 10px;
-	font-style: italic;
-}
-
-.pagination {
-	text-align: center;
-	font-style: italic;
-
-	img {
-		position: relative;
-		top: 12px;
-		opacity: 0.7;
-		cursor: pointer;
-		@include transition(all, 0.2s, ease-in);
-
-		&:hover {
-			opacity: 1;
-			@include transition(all, 0.2s, ease-in);
-		}
-
-		&.disabled {
-			opacity: 0.5;
-
-			&:hover {
-				opacity: 0.5;
-			}
-		}
-	}
-}
-
-// ============== /COMPONENETS ============== //
 
 // ================ NAV ================//
 
@@ -179,18 +153,20 @@ blockquote {
 // ============= HOME-HEADER ============= //
 
 #home-header {
+  position: relative;
   height: 500px;
   margin-bottom: -60px;
   background: $home-header-bg-color;
   padding: 0;
+  z-index: -10;
+  overflow: hidden;
 
   .cover {
     position: absolute;
     z-index: 10;
-    bottom: 50%;
+    @include center-vertical();
-    left: 50%;
+    @include center-horizontal();
-    transform: translate(-50%, -50%);
+   color: white;
-    color: white;
   }
 
   .title {
@@ -200,6 +176,16 @@ blockquote {
     color: #ffffff;
   }
 
+  .cover-image {
+    width: 100%;
+    position: absolute;
+    @include center-vertical();
+
+    .img-responsive {
+      width: 100%;
+    }
+  }
+  
    .left {
     position: absolute;
     top: 0;
@@ -221,6 +207,18 @@ blockquote {
 }
 // ============= /HOME-HEADER ============= //
 
+// ============= NEW-ARTICLES ============ //
+#new-articles {
+  .img-container {
+    position: absolute;
+    margin: 0 auto;
+    width: 250px;
+    height: 175px;
+    overflow: hidden;
+  }
+}
+// ============ /NEW-ARTICLES ============ //
+
 // ============= CAROUSEL ============= //
 
 /* Carousel base class */
@@ -250,49 +248,67 @@ blockquote {
 }
 // ============ /CAROUSEL ============= //
 
+// ============== COMPONENTS ============== //
 
-// ============== HEADER ============== //
+.img-center-fill {
+  position: absolute;
+  @include center-both();
+  width: 100%;
 
-header {
+  &.wide {
-	font-family: AvenirNext, Sans-serif;
+    height: 100%
-	color: white;
+  }
-	padding: 10px 10px;
+  
-	margin: auto;
+  &.tall {
+    width: 100%;
+  }
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+	@include transition(all, 0.2s, ease-in);
+
+	&:hover{
+		color: #e74c3c;
+		border-bottom: 1px solid #e74c3c;
+		@include transition(all, 0.2s, ease-in);
+	}
+}
+
+blockquote {
+	border-left: 5px solid #e74c3c;
+	padding-left: 10px;
+	font-style: italic;
+}
+
+.pagination {
 	text-align: center;
-	
+	font-style: italic;
-	&.pure-u-2-3{
-		display: block;
-	}
-	
-	h1, h3 {
-		margin: 0px;
-	}
-	
-	h3 {
-		font-weight: 500;
-	}
 
 	img {
-		width: 30px;
+		position: relative;
-	}
+		top: 12px;
+		opacity: 0.7;
+		cursor: pointer;
+		@include transition(all, 0.2s, ease-in);
 
-	nav {
+		&:hover {
-		padding: 10px 0px 50px 0px;
+			opacity: 1;
-		margin-top: 30px;
+			@include transition(all, 0.2s, ease-in);
+		}
 
-		a {
+		&.disabled {
-			margin: 0px 10px;
+			opacity: 0.5;
-			padding: 2px 0px;
 
-			&:hover{
+			&:hover {
-				color: #333;
+				opacity: 0.5;
-				border-bottom: 1px solid #333;
 			}
 		}
 	}
 }
 
-// ============== /HEADER ============== //
+// ============== /COMPONENETS ============== //
 
 // ============== CONTENT ============== //
 .cover-oold {

index.html

@@ -6,20 +6,22 @@ title: "Home"
 {% include home_header.html %}
 
 <div class="container">
-  {% for post in site.posts %}
+  <section id="new-articles" class="row">
-    {% if post.categories contains 'cover' %}
+
-      <section class="cover">
+  {% for post in site.posts limit: 4 %}
-        <img src="/images/tags/featured.png" class="tag">
+    <div class="col-sm-3">
-        <a href="{{ post.url }}">
+      <a href="{{ post.url }}">
-          <img src="/images/posts/{{post.image}}" alt="" {% if post.image == null %} class="hidden" {% endif %}>
+        <div class="img-container">
-          <div class="details">
+          <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">
-            <h2>{{ post.title }}</h2>
+        </div>
-            {{ post.excerpt | markdownify }}
+        <div class="details">
-          </div>
+          <h2>{{ post.title }}</h2>
-        </a>
+          {{ post.excerpt | markdownify }}
-      </section>
+        </div>
-    {% endif %}
+      </a>
+    </div>
   {% endfor %}
+  </section>
 
   <div class="content masonry">
     {% for post in paginator.posts %}

js/application.js

@@ -1 +1,8 @@
 // Your JavaScript
+$(function() {
+  $('.container').find('img').each(function(){
+    var parent = $(this).parent();
+    var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall';
+    $(this).addClass(imgClass);
+  })
+});