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

adding MDL html structure

Browse source
This commit is contained in:
Byron Corrales 2015-07-11 13:00:36 -06:00
parent 9e5f1c4863
commit c55d91da8f
7 changed files with 124 additions and 325 deletions
Download patch file Download diff file Expand all files Collapse all files

40
_includes/footer.html
View file

@ -1,19 +1,18 @@
<footer class="site-footer"> <footer class="mdl-mega-footer">
<div class="mdl-mega-footer--middle-section">
<div class="wrapper"> <div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h2 class="footer-heading">{{ site.title }}</h2> <h1 class="mdl-mega-footer--heading">INFO</h1>
<ul class="mdl-mega-footer--link-list">
<div class="footer-col-wrapper">
<div class="footer-col footer-col-1">
<ul class="contact-list">
<li>{{ site.title }}</li>
<li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li> <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
</ul> </ul>
</div> </div>
<div class="footer-col footer-col-2"> <div class="mdl-mega-footer--drop-down-section">
<ul class="social-media-list"> <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">SOCIAL</h1>
<ul class="mdl-mega-footer--link-list">
{% if site.github_username %} {% if site.github_username %}
<li> <li>
<a href="https://github.com/{{ site.github_username }}"> <a href="https://github.com/{{ site.github_username }}">
@ -27,7 +26,6 @@
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.twitter_username %} {% if site.twitter_username %}
<li> <li>
<a href="https://twitter.com/{{ site.twitter_username }}"> <a href="https://twitter.com/{{ site.twitter_username }}">
@ -45,11 +43,23 @@
</ul> </ul>
</div> </div>
<div class="footer-col footer-col-3"> <div class="mdl-mega-footer--drop-down-section">
<p class="text">{{ site.description }}</p> <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
</div> <h1 class="mdl-mega-footer--heading">ABOUT</h1>
<ul class="mdl-mega-footer--link-list">
<li>{{ site.description }}</li>
</ul>
</div> </div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-logo">{{ site.title }}</div>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div> </div>
</footer> </footer>

5
_includes/head.html
View file

@ -9,7 +9,10 @@
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" /> <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}"> <!-- 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">
<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 -->
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
</head> </head>

39
_includes/header.html
View file

@ -1,27 +1,32 @@
<header class="site-header"> <header class="mdl-layout__header">
<div class="wrapper"> <div class="mdl-layout__header-row">
<!-- Title -->
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a> <span class="mdl-layout-title">{{ site.title }}</span>
<!-- Add spacer, to align navigation to the right -->
<nav class="site-nav"> <div class="mdl-layout-spacer"></div>
<a href="#" class="menu-icon"> <!-- Navigation. We hide it in small screens. -->
<svg viewBox="0 0 18 15"> <nav class="mdl-navigation mdl-layout--large-screen-only">
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</a>
<div class="trigger">
{% for page in site.pages %} {% for page in site.pages %}
{% if page.title %} {% if page.title %}
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a> <a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</nav>
</div> </div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">{{ site.title }}</span>
<nav class="mdl-navigation">
{% for page in site.pages %}
{% if page.title %}
<a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %}
{% endfor %}
</nav> </nav>
</div> </div>
</header>

9
_layouts/default.html
View file

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

4
_sass/_base.scss
View file

@ -13,6 +13,7 @@ dl, dd, ol, ul, figure {
/** /**
* Basic styling * Basic styling
*/ */
/*
body { body {
font-family: $base-font-family; font-family: $base-font-family;
font-size: $base-font-size; font-size: $base-font-size;
@ -22,6 +23,7 @@ body {
background-color: $background-color; background-color: $background-color;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
*/
@ -88,6 +90,7 @@ h1, h2, h3, h4, h5, h6 {
/** /**
* Links * Links
*/ */
/*
a { a {
color: $brand-color; color: $brand-color;
text-decoration: none; text-decoration: none;
@ -101,6 +104,7 @@ a {
text-decoration: underline; text-decoration: underline;
} }
} }
*/

238
_sass/_layout.scss
View file

@ -1,236 +1,4 @@
/** .page-content{
* Site header max-width: 1200px;
*/ margin: 0 auto;
.site-header {
border-top: 5px solid $grey-color-dark;
border-bottom: 1px solid $grey-color-light;
min-height: 56px;
// Positioning context for the mobile navigation icon
position: relative;
}
.site-title {
font-size: 26px;
line-height: 56px;
letter-spacing: -1px;
margin-bottom: 0;
float: left;
&,
&:visited {
color: $grey-color-dark;
}
}
.site-nav {
float: right;
line-height: 56px;
.menu-icon {
display: none;
}
.page-link {
color: $text-color;
line-height: $base-line-height;
// Gaps between nav items, but not on the first one
&:not(:first-child) {
margin-left: 20px;
}
}
@include media-query($on-palm) {
position: absolute;
top: 9px;
right: 30px;
background-color: $background-color;
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
.menu-icon {
display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;
> svg {
width: 18px;
height: 15px;
path {
fill: $grey-color-dark;
}
}
}
.trigger {
clear: both;
display: none;
}
&:hover .trigger {
display: block;
padding-bottom: 5px;
}
.page-link {
display: block;
padding: 5px 10px;
}
}
}
/**
* Site footer
*/
.site-footer {
border-top: 1px solid $grey-color-light;
padding: $spacing-unit 0;
}
.footer-heading {
font-size: 18px;
margin-bottom: $spacing-unit / 2;
}
.contact-list,
.social-media-list {
list-style: none;
margin-left: 0;
}
.footer-col-wrapper {
font-size: 15px;
color: $grey-color;
margin-left: -$spacing-unit / 2;
@extend %clearfix;
}
.footer-col {
float: left;
margin-bottom: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}
.footer-col-1 {
width: -webkit-calc(35% - (#{$spacing-unit} / 2));
width: calc(35% - (#{$spacing-unit} / 2));
}
.footer-col-2 {
width: -webkit-calc(20% - (#{$spacing-unit} / 2));
width: calc(20% - (#{$spacing-unit} / 2));
}
.footer-col-3 {
width: -webkit-calc(45% - (#{$spacing-unit} / 2));
width: calc(45% - (#{$spacing-unit} / 2));
}
@include media-query($on-laptop) {
.footer-col-1,
.footer-col-2 {
width: -webkit-calc(50% - (#{$spacing-unit} / 2));
width: calc(50% - (#{$spacing-unit} / 2));
}
.footer-col-3 {
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
}
}
@include media-query($on-palm) {
.footer-col {
float: none;
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
}
}
/**
* Page content
*/
.page-content {
padding: $spacing-unit 0;
}
.page-heading {
font-size: 20px;
}
.post-list {
margin-left: 0;
list-style: none;
> li {
margin-bottom: $spacing-unit;
}
}
.post-meta {
font-size: $small-font-size;
color: $grey-color;
}
.post-link {
display: block;
font-size: 24px;
}
/**
* Posts
*/
.post-header {
margin-bottom: $spacing-unit;
}
.post-title {
font-size: 42px;
letter-spacing: -1px;
line-height: 1;
@include media-query($on-laptop) {
font-size: 36px;
}
}
.post-content {
margin-bottom: $spacing-unit;
h2 {
font-size: 32px;
@include media-query($on-laptop) {
font-size: 28px;
}
}
h3 {
font-size: 26px;
@include media-query($on-laptop) {
font-size: 22px;
}
}
h4 {
font-size: 20px;
@include media-query($on-laptop) {
font-size: 18px;
}
}
} }

6
index.html
View file

@ -2,7 +2,9 @@
layout: default layout: default
--- ---
<div class="home"> <div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h1 class="page-heading">Posts</h1> <h1 class="page-heading">Posts</h1>
@ -20,4 +22,6 @@ layout: default
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p> <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>
</div> </div>