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

improve new layout for post list

Browse source
This commit is contained in:
Oscar Cortez 2015-07-11 16:05:02 -06:00
parent c55d91da8f
commit 1f45261161
7 changed files with 65 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

3
_includes/footer.html
View file

@ -6,6 +6,7 @@
<h1 class="mdl-mega-footer--heading">INFO</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
<li><a href="{{ "/feed.xml" | prepend: site.baseurl }}">subscribe via RSS</a></li>
</ul>
</div>
@ -39,7 +40,7 @@
<span class="username">{{ site.twitter_username }}</span>
</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>

1
_includes/head.html
View file

@ -11,6 +11,7 @@
<!-- Material Design Lite css Library -->
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<!-- Material Design Fonts -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Custom theme css -->

21
_includes/header.html
View file

@ -13,8 +13,27 @@
{% endif %}
{% endfor %}
</nav>
</div>
<div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search-field" />
</div>
</div>
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">

19
_layouts/default.html
View file

@ -6,19 +6,18 @@
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
{% include header.html %}
<main class="mdl-layout__content">
<div class="page-content">
{{ content }}
</div>
</main>
{% include footer.html %}
</div>
<main class="mdl-layout__content">
<div class="page-content">
{{ content }}
</div>
</main>
{% include footer.html %}
<!-- Material Design Lite js Library -->
<script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>

17
_sass/_layout.scss
View file

@ -1,4 +1,15 @@
.page-content{
max-width: 1200px;
margin: 0 auto;
}
max-width: 1200px;
margin: 0 auto;
}
.mdl-card__title {
color: #fff;
height: 176px;
background: url('../img/welcome_card.jpg') center / cover;
}
.mdl-card__menu {
color: #fff;
}

BIN
img/welcome_card.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 49 KiB

39
index.html
View file

@ -3,25 +3,24 @@ layout: default
---
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h1 class="page-heading">Posts</h1>
<ul class="post-list">
{% for post in site.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
</li>
{% endfor %}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
{% 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" {{ post.url | prepend: site.baseurl }}>
<h2 class="mdl-card__title-text">{{ post.title }}</h2>
</div>
<div class="mdl-card__supporting-text">
{{ post.excerpt }}
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
{{ post.date | date: "%b %-d, %Y" }}
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
{% endfor %}
</div>