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

Merge pull request #24 from gdg-managua/JKM-23

Browse source 
JKM-23 fix Unconventional use of floating action button
This commit is contained in:
Oscar Cortez 2015-10-31 12:25:30 -06:00
commit 0bba47462e
2 changed files with 18 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

17
_sass/_layout.scss
View file

@ -10,15 +10,18 @@
} }
// Cards styles // Cards styles
.mdl-card {
.mdl-card__title {
color: #fff;
height: 176px;
background: url('../img/welcome_card.jpg') center / cover;
}
.mdl-card__title { .mdl-card__supporting-text > span { color: #9F9F9F; }
color: #fff;
height: 176px;
background: url('../img/welcome_card.jpg') center / cover;
}
.mdl-card__menu { .mdl-card__menu {
color: #fff; color: #fff;
}
} }
.post-button{ .post-button{

22
index.html
View file

@ -15,7 +15,7 @@ layout: default
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone"> <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
<h4>{{ post.title }}</h4> <h4>{{ post.title }}</h4>
{{ post.excerpt }} <p>{{ post.excerpt }}</p>
</div> </div>
<div class="mdl-card__actions"> <div class="mdl-card__actions">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
@ -35,20 +35,16 @@ layout: default
{% else %} {% else %}
<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>
</div> </div>
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
{{ post.excerpt }} <span>{{ post.date | date: "%b %-d, %Y" }}</span>
<p>{{ post.excerpt }}</p>
</div> </div>
<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"> <div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
{{ post.date | date: "%b %-d, %Y" }}
</a>
</div> </div>
<div class="mdl-card__menu"> <div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}"> <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}">
@ -73,14 +69,12 @@ layout: default
<h2 class="mdl-card__title-text">{{ post.title }}</h2> <h2 class="mdl-card__title-text">{{ post.title }}</h2>
</div> </div>
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
{{ post.excerpt }} <span>{{ post.date | date: "%b %-d, %Y" }}</span>
<p>{{ post.excerpt }}</p>
</div> </div>
<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"> <div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">
{{ post.date | date: "%b %-d, %Y" }} Read More
</a> </a>
</div> </div>
<div class="mdl-card__menu"> <div class="mdl-card__menu">