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

1
_includes/footer.html
View file

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

1
_includes/head.html
View file

@ -11,6 +11,7 @@
<!-- Material Design Lite css Library --> <!-- 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"> <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"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Custom theme css --> <!-- Custom theme css -->

19
_includes/header.html
View file

@ -13,8 +13,27 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</nav> </nav>
<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> </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> </header>
<div class="mdl-layout__drawer"> <div class="mdl-layout__drawer">

5
_layouts/default.html
View file

@ -6,8 +6,8 @@
<body> <body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
{% include header.html %} {% include header.html %}
</div>
<main class="mdl-layout__content"> <main class="mdl-layout__content">
<div class="page-content"> <div class="page-content">
@ -15,9 +15,8 @@
</div> </div>
</main> </main>
{% include footer.html %}
</div> {% include footer.html %}
<!-- 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>

11
_sass/_layout.scss
View file

@ -2,3 +2,14 @@
max-width: 1200px; max-width: 1200px;
margin: 0 auto; 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

37
index.html
View file

@ -3,25 +3,24 @@ layout: default
--- ---
<div class="mdl-grid"> <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 %} {% for post in site.posts %}
<li> <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">
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span> <div class="mdl-card__title" {{ post.url | prepend: site.baseurl }}>
<h2 class="mdl-card__title-text">{{ post.title }}</h2>
<h2> </div>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> <div class="mdl-card__supporting-text">
</h2> {{ post.excerpt }}
</li> </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 %} {% endfor %}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>
</div> </div>