Highlight post layout #1 y #2

gdgmanagua · Jul 21, 2015 · 9b6a911 · 9b6a911
1 parent 52a7345
commit 9b6a911
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,6 +5,7 @@
 
   <body>
 
+    <!-- Start Layout -->
     {% if site.header_type == 'drawer' %}
     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
       {% include header_fixed.html %}
@@ -15,15 +16,16 @@
 
       <main class="mdl-layout__content">
         <div class="page-content">
-          {% if site.post_type == 'highlight' %}
-          {% include highlight_post.html %}
-          {% endif %}
-          {{ content }}
+          <div class="mdl-grid">
+            {{ content }}
+          </div>
         </div>
         {% include footer.html %}
       </main>
 
     </div>
+    <!-- /End Layout-->
+
     <!-- Material Design Lite js Library -->
     <script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
     {% if site.pagination_type == 'ops' %}

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -13,8 +13,15 @@
   color: #fff;
 }
 
+.post-button{
+  position: absolute;
+  right: 15px;
+  bottom: 25px;
+}
+
 .section-highlight {
   position: relative;
+  margin: 10px;
 
   .mdl-card__supporting-text {
     margin: 40px;

diff --git a/index.html b/index.html
@@ -1,18 +1,21 @@
 ---
 layout: default
 ---
+
 {% if site.post_type == 'highlight' %}
+
+  {% include highlight_post.html %}
 
-<div class="mdl-grid">
   {% for post in site.posts offset:1 %}
+
   <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone">
     <div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
       <h2 class="mdl-card__title-text">{{ post.title }}</h2>
     </div>
     <div class="mdl-card__supporting-text">
       {{ post.excerpt }}
     </div>
-    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='{{ post.url | prepend: site.baseurl }}'">
+    <button class="post-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='{{ post.url | prepend: site.baseurl }}'">
       <i class="material-icons">keyboard_arrow_right</i>
     </button>
     <div class="mdl-card__actions mdl-card--border">
@@ -42,11 +45,11 @@ <h2 class="mdl-card__title-text">{{ post.title }}</h2>
     </div>
   </div>
   {% endfor %}
-</div>
+
 
 {% else %}
 
-<div class="mdl-grid">
+
   {% for post in site.posts %}
   <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone">
     <div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
@@ -85,6 +88,6 @@ <h2 class="mdl-card__title-text">{{ post.title }}</h2>
     </div>
   </div>
   {% endfor %}
-</div>
+
 
 {% endif %}