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> <body>
<!-- Start Layout -->
{% if site.header_type == 'drawer' %} {% if site.header_type == 'drawer' %}
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
{% include header_fixed.html %} {% include header_fixed.html %}
@ -15,15 +16,16 @@
<main class="mdl-layout__content"> <main class="mdl-layout__content">
<div class="page-content"> <div class="page-content">
{% if site.post_type == 'highlight' %} <div class="mdl-grid">
{% include highlight_post.html %} {{ content }}
{% endif %} </div>
{{ content }}
</div> </div>
{% include footer.html %} {% include footer.html %}
</main> </main>
</div> </div>
<!-- /End Layout-->
<!-- Material Design Lite js Library --> <!-- Material Design Lite js Library -->
<script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
{% if site.pagination_type == 'ops' %} {% if site.pagination_type == 'ops' %}

7
_sass/_layout.scss
View file

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

15
index.html
View file

@ -1,10 +1,13 @@
--- ---
layout: default 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 %} {% 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 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 %}> <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> <h2 class="mdl-card__title-text">{{ post.title }}</h2>
@ -12,7 +15,7 @@ layout: default
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
{{ post.excerpt }} {{ post.excerpt }}
</div> </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> <i class="material-icons">keyboard_arrow_right</i>
</button> </button>
<div class="mdl-card__actions mdl-card--border"> <div class="mdl-card__actions mdl-card--border">
@ -42,11 +45,11 @@ layout: default
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div>
{% else %} {% else %}
<div class="mdl-grid">
{% for post in site.posts %} {% 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 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 %}> <div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
@ -85,6 +88,6 @@ layout: default
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div>
{% endif %} {% endif %}