Working till listing of post

2016-06-18 22:58:48 +05:30
parent 412ad95e56
commit a42ed793c1
4 changed files with 157 additions and 101 deletions
--- a/_includes/home_header.html
+++ b/_includes/home_header.html
@ -1,7 +1,7 @@
-{% assign cover_post =  site.categories.cover.first %}
+{% assign cover_post =  site.posts.first %}
 <div id="home-header" class="container-fluid">
-  <div class="cover-image"><img class="img-responsive" src="/images/posts/{{ cover_post.image }}" alt=""></div>
-  <div class="cover text-center">
+  <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ cover_post.image }}" alt=""></div>
+  <div class="cover center-both text-center">
    <h1 class="title">{{ cover_post.title }}</h1>
    <!--<p>{{ cover_post.excerpt | markdownify }}</p>-->
  </div>
--- a/css/base.scss
+++ b/css/base.scss
@ -7,6 +7,14 @@ $navbar-default-link-color: white;
 $navbar-default-link-active-color: darken($navbar-default-link-color, 25%);
 $navbar-default-link-hover-color: darken($navbar-default-link-color, 35%);
 $home-header-bg-color: #333;
+$new-article-img-height: 150px;
+$new-article-img-width: 225px;
+$new-article-title-color: black;
+$new-article-tag-color: #e5cb52;
+$featured-articles-bg-color: #f7f7f7;
+$featured-articles-title-color: #373737;
+$article-cover-img-width: 355px;
+$article-cover-img-height: 190px;
 $carousel-bg-color: #333;
 $carousel-height: 500px;

@ -40,27 +48,7 @@ $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 {
@ -87,12 +75,12 @@ $carousel-height: 500px;
 body {
 	font-size: 13px;
 	color: #081522;
-	background: #ddd url('/images/bg.png');
+	background: #fff;
 	@include box-sizing();
 }

 *{	
-	font-family: Open Sans, sans-serif;
+	font-family: Merriweather, Open Sans, sans-serif;
 }


@ -155,18 +143,15 @@ body {
 #home-header {
  position: relative;
  height: 500px;
-  margin-bottom: -60px;
+  margin-bottom: -($new-article-img-height / 4);
  background: $home-header-bg-color;
  padding: 0;
  z-index: -10;
  overflow: hidden;

  .cover {
-    position: absolute;
    z-index: 10;
-    @include center-vertical();
-    @include center-horizontal();
-   color: white;
+    color: white;
  }

  .title {
@ -179,7 +164,6 @@ body {
  .cover-image {
    width: 100%;
    position: absolute;
-    @include center-vertical();

    .img-responsive {
      width: 100%;
@ -210,15 +194,86 @@ body {
 // ============= NEW-ARTICLES ============ //
 #new-articles {
  .img-container {
-    position: absolute;
-    margin: 0 auto;
-    width: 250px;
-    height: 175px;
-    overflow: hidden;
+    width: $new-article-img-width;
+    height: $new-article-img-height;
+    border-radius: 1%;
+  }
+
+  .details {
+    margin: 10 auto;
+    font-weight: bold;
+
+    .title {
+      color: $new-article-title-color;
+      text-transform: capitalize;
+      font-size: 20px;
+    }
+
+    .tag {
+      text-transform: uppercase;
+      font-family: AvenirNext;
+      font-size: 14px;
+      color: $new-article-title-color;
+    }
  }
 }
 // ============ /NEW-ARTICLES ============ //

+// ========== FEATURED-ARTICLE =========== //
+#featured-articles-container {
+  background: $featured-articles-bg-color;
+}
+
+#featured-articles-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: $featured-articles-title-color;
+  margin-top: 22px;
+  margin-bottom: 22px;
+}
+
+#featured-articles {
+  .article-cover-container {
+    width: $article-cover-img-width;
+    height: $article-cover-img-height;
+    box-shadow: 0px 35px 40px -20px;
+  }
+
+  .article-container {
+    margin-bottom: 10px + 0.1 * $article-cover-img-height;
+
+    .details {
+      position: relative;
+      z-index: 10;
+      margin: 0 auto;
+      top: -0.1 * $article-cover-img-height;
+      background: $featured-articles-bg-color;
+      width: 0.9 * $article-cover-img-width; ;
+
+      .tag {
+        position: absolute;
+        top:0;
+        left: 50%;
+        transform: translate(-50%,-100%); 
+        text-transform: capitalize;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+      }
+
+      .title {
+
+      }
+      &:before {
+        content: " ";
+        display: table;
+
+      }
+
+    }
+  }
+}
+// ========= /FEATURED-ARTICLES ========== //
 // ============= CAROUSEL ============= //

 /* Carousel base class */
@ -249,10 +304,38 @@ body {
 // ============ /CAROUSEL ============= //

 // ============== COMPONENTS ============== //
+.center-vertical {
+  position: absolute;
+  -ms-transform: translateY(50%);
+  -webkit-transform: translateY(50%);
+  transform: translateY(50%);
+  bottom: 50%;
+}
+
+.center-horizontal {
+  -ms-transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+.center-both {
+  position: absolute;
+  -ms-transform: translate(-50%, 50%);
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+  left: 50%;
+  bottom: 50%;
+}
+
+.center-fill-container {
+    position: relative;
+    margin: 0 auto;
+    overflow: hidden;
+}

 .img-center-fill {
  position: absolute;
-  @include center-both();
  width: 100%;

  &.wide {
@ -370,23 +453,7 @@ blockquote {
 }


-.content {
-	.pure-u-1-3 {
-		@include box-sizing();
-	}
-}
-
-
-.article-container {
-	/*width: 280px;*/
-	width: 30%;
-	margin: 0 1.5%;
-	margin-bottom: 50px;
-	float: left;
-	@include box-sizing();
-}
-
-.article {
+.article-old {
 	border: 1px solid #ccc;
 	background: white;
 	padding-bottom: 10px;
--- a/index.html
+++ b/index.html
@ -5,55 +5,57 @@ title: "Home"

 {% include home_header.html %}

-<div class="container">
+<div class="container content">
  <section id="new-articles" class="row">

-  {% for post in site.posts limit: 4 %}
-    <div class="col-sm-3">
+  {% for post in site.posts limit: 4 offset: 1 %}
+    <div class="new-article col-sm-3">
      <a href="{{ post.url }}">
-        <div class="img-container">
+        <div class="center-fill-container img-container">
          <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">
        </div>
-        <div class="details">
-          <h2>{{ post.title }}</h2>
-          {{ post.excerpt | markdownify }}
+        <div class="details text-center ">
+          <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
+          <p class="tag">{{ post.tag}}</p>
        </div>
      </a>
    </div>
  {% endfor %}
  </section>
+</div>

-  <div class="content masonry">
-    {% for post in paginator.posts %}
-      {% if post.categories contains 'wona' %}
-        {% if post.categories contains 'cover' %}
-        {% else %}
-          <div class="article-container">
-            <div class="article {{post.tag}}">
+<div id="featured-articles-container" class=" container-fluid">
+  <div id="featured-articles" class=" container">
+    <div class="row">
+      <h1 class="col-sm-12" id="featured-articles-title">Featured Articles</h1>
+      {% for cat in site.categories %}
+        {{ cat | inspect }}
+        {% assign post = cat.second.first %}
+        {% if post.categories contains 'wona' and post.image != null %}
+            <div class="article-container col-sm-4">
+              <div class="article {{post.tag}}">

-              {% if post.tag %}
-                <img src="/images/tags/{{post.tag}}.png" class="tag">
-              {% endif %}
-              
-              <a href="{{ post.url }}">
-                {% if post.image %}
-                  <div class="article-cover-container">
-                    <img src="/images/posts/{{ post.image }}" class="article-cover">
+                <a href="{{ post.url }}">
+                  {% if post.image %}
+                    <div class="center-fill-container article-cover-container">
+                      <img src="/images/posts/{{ post.image }}" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
+                    </div>
+                  {% else %}
+                    <br><br>
+                  {% endif %}
+                  <div class="details text-center">
+                    <span class="tag">{{ post.tag }}</span>
+                    <h3 class="title">{{ post.title  | truncatewords: 4}}</h3>
+                    <p class="excerpt">{{ post.excerpt | markdownify | truncate: 75 }}</p>
                  </div>
-                {% else %}
-                  <br><br>
-                {% endif %}
-                <div class="details">
-                  <h3>{{ post.title }}</h3>
-                  {{ post.excerpt | markdownify }}
-                </div>
-              </a>
+                </a>
+              </div>
            </div>
-          </div>
        {% endif %}
-      {% endif %}
-    {% endfor %}
+      {% endfor %}
+    </div>
  </div>
+</div>

  <div class="pagination">
    {% if paginator.previous_page == 1 %}
@ -70,16 +72,3 @@ title: "Home"
      <span class="next "><img src="/images/right.png" class="disabled"></span>
    {% endif %}
  </div>
-</div>
-
-<script>
-	window.onload = function(){
-		width = document.getElementsByClassName('content')[0].offsetWidth;
-		width = Math.floor(width/3) - 1;
-		container = document.querySelector('.content');
-		msnry = new Masonry( container, {
-			columnWidth: width,
-			itemSelector: '.article-container'
-		});
-	}
-</script>
--- a/js/application.js
+++ b/js/application.js
@ -1,6 +1,6 @@
 // Your JavaScript
 $(function() {
-  $('.container').find('img').each(function(){
+  $('.img-center-fill').each(function(){
    var parent = $(this).parent();
    var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall';
    $(this).addClass(imgClass);