dfx.sk/dfx-jekyll-mdl
1
0
Fork 0
Code Issues Releases Activity

Highlight post layout #1 y #2

Browse source
This commit is contained in:
Byron Corrales 2015-07-20 20:49:25 -06:00
parent 52a734510b
commit 9b6a911235
3 changed files with 22 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
_layouts/default.html
View file

@ -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' %}

7
_sass/_layout.scss
View file

@ -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;

15
index.html
View file

@ -1,10 +1,13 @@
---
layout: default
---
{% if site.post_type == 'highlight' %}
<div class="mdl-grid">
{% if site.post_type == 'highlight' %}
{% include highlight_post.html %}
{% 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>
@ -12,7 +15,7 @@ layout: default
<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 @@ layout: default
</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 @@ layout: default
</div>
</div>
{% endfor %}
</div>
{% endif %}