A Pen by Captain Anonymous on CodePen.
Created
August 2, 2015 21:18
-
-
Save billychappell/5a430f3ab2374fa6604f to your computer and use it in GitHub Desktop.
ZGVybo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="demo-blog mdl-layout mdl-js-layout has-drawer is-upgraded"> | |
<main class="mdl-layout__content"> | |
<div class="demo-blog__posts mdl-grid"> | |
<div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col"> | |
<div class="mdl-card__media mdl-color-text--grey-50"> | |
<h3><a href="entry.html">Coffee Pic</a></h3> | |
</div> | |
<div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> | |
<div class="minilogo"></div> | |
<div> | |
<strong>The Newist</strong> | |
<span>2 days ago</span> | |
</div> | |
</div> | |
</div> | |
<div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop"> | |
<button class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent"> | |
<i class="material-icons mdl-color-text--white" role="presentation">add</i> | |
<span class="visuallyhidden">add</span> | |
</button> | |
<div class="mdl-card__media mdl-color--grey-700 mdl-color-text--white"> | |
<img src="http://placehold.it/100x100"> | |
+1,337 | |
</div> | |
<div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600"> | |
<div> | |
<strong>The Newist</strong> | |
</div> | |
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="menubtn"> | |
<li class="mdl-menu__item mdl-js-ripple-effect">About</li> | |
<li class="mdl-menu__item mdl-js-ripple-effect">Message</li> | |
<li class="mdl-menu__item mdl-js-ripple-effect">Favorite</li> | |
<li class="mdl-menu__item mdl-js-ripple-effect">Search</li> | |
</ul> | |
<button id="menubtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> | |
<i class="material-icons" role="presentation">more_vert</i> | |
<span class="visuallyhidden">show menu</span> | |
</button> | |
</div> | |
</div> | |
<div class="mdl-card on-the-road-again mdl-cell mdl-cell--12-col"> | |
<div class="mdl-card__media mdl-color-text--grey-50"> | |
<h3><a href="entry.html">On the road again</a></h3> | |
</div> | |
<div class="mdl-color-text--grey-600 mdl-card__supporting-text"> | |
Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis. | |
</div> | |
<div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> | |
<div class="minilogo"></div> | |
<div> | |
<strong>The Newist</strong> | |
<span>2 days ago</span> | |
</div> | |
</div> | |
</div> | |
<div class="mdl-card amazing mdl-cell mdl-cell--12-col"> | |
<div class="mdl-card__title mdl-color-text--grey-50"> | |
<h3 class="quote"><a href="entry.html">I couldn’t take any pictures but this was an amazing thing…</a></h3> | |
</div> | |
<div class="mdl-card__supporting-text mdl-color-text--grey-600"> | |
Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis. | |
</div> | |
<div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> | |
<div class="minilogo"></div> | |
<div> | |
<strong>The Newist</strong> | |
<span>2 days ago</span> | |
</div> | |
</div> | |
</div> | |
<div class="mdl-card shopping mdl-cell mdl-cell--12-col"> | |
<div class="mdl-card__media mdl-color-text--grey-50"> | |
<h3><a href="entry.html">Shopping</a></h3> | |
</div> | |
<div class="mdl-card__supporting-text mdl-color-text--grey-600"> | |
Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis. | |
</div> | |
<div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> | |
<div class="minilogo"></div> | |
<div> | |
<strong>The Newist</strong> | |
<span>2 days ago</span> | |
</div> | |
</div> | |
</div> | |
<nav class="demo-nav mdl-cell mdl-cell--12-col"> | |
<div class="section-spacer"></div> | |
<a href="entry.html" class="demo-nav__button" title="show more"> | |
More | |
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> | |
<i class="material-icons" role="presentation">arrow_forward</i> | |
</button> | |
</a> | |
</nav> | |
</div> | |
<footer class="mdl-mini-footer"> | |
<div class="mdl-mini-footer--left-section"> | |
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter"> | |
<span class="visuallyhidden">Twitter</span> | |
</button> | |
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger"> | |
<span class="visuallyhidden">Facebook</span> | |
</button> | |
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus"> | |
<span class="visuallyhidden">Google Plus</span> | |
</button> | |
</div> | |
<div class="mdl-mini-footer--right-section"> | |
<button class="mdl-mini-footer--social-btn social-btn__share"> | |
<i class="material-icons" role="presentation">share</i> | |
<span class="visuallyhidden">share</span> | |
</button> | |
</div> | |
</footer> | |
</main> | |
<div class="mdl-layout__obfuscator"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Array.prototype.forEach.call(document.querySelectorAll('.mdl-card__media'), function(el) { | |
var link = el.querySelector('a'); | |
if(!link) { | |
return; | |
} | |
var target = link.getAttribute('href'); | |
if(!target) { | |
return; | |
} | |
el.addEventListener('click', function() { | |
location.href = target; | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body::before { | |
background-color: #212121; | |
background-size: cover; | |
background-attachment: fixed; | |
content: ''; | |
will-change: transform; | |
z-index: -1; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
top: 0; | |
position: fixed; | |
} | |
body .demo-blog { | |
font-family: 'Roboto', 'Helvetica', sans-serif; | |
} | |
.demo-blog .demo-blog__posts { | |
max-width: 900px; | |
padding: 0; | |
display: flex; | |
width: 100%; | |
margin: 0 auto; | |
flex-shrink: 0; | |
} | |
.demo-blog.mdl-layout .mdl-layout__content { | |
padding-top: 230px; | |
position: relative; | |
-webkit-overflow-scrolling: touch; | |
} | |
.demo-blog .mdl-card { | |
display: flex; | |
flex-direction: column; | |
align-items: stretch; | |
min-height: 360px; | |
} | |
.demo-blog .mdl-card__title { | |
padding: 16px; | |
flex-grow: 1; | |
} | |
.demo-blog .mdl-card__media { | |
box-sizing: border-box; | |
background-size: cover; | |
padding: 24px; | |
display: flex; | |
flex-grow: 1; | |
flex-direction: row; | |
align-items: flex-end; | |
cursor: pointer; | |
} | |
.demo-blog .mdl-card__media a, | |
.demo-blog .mdl-card__title a { | |
color: inherit; | |
} | |
.demo-blog .mdl-card__supporting-text { | |
width: 100%; | |
padding: 16px; | |
min-height: 64px; | |
display: flex; | |
align-items: center; | |
} | |
.demo-blog .mdl-card__supporting-text strong { | |
font-weight: 400; | |
} | |
.demo-blog .mdl-card__media ~ .mdl-card__supporting-text { | |
min-height: 64px; | |
} | |
.demo-blog .mdl-card__supporting-text:not(:last-child) { | |
box-sizing: border-box; | |
min-height: 76px; | |
} | |
.demo-blog:not(.demo-blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text { | |
border-top: 1px solid rgba(0,0,0,0.1); | |
} | |
.demo-blog .mdl-card__actions:first-child { | |
margin-left: 0; | |
} | |
.demo-blog .meta { | |
box-sizing: border-box; | |
padding: 16px; | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
justify-content: flex-start; | |
height: auto; | |
} | |
.demo-blog .meta > .meta__favorites{ | |
flex-direction: row; | |
margin: 0 8px; | |
font-size: 13px; | |
font-weight: 500; | |
} | |
.demo-blog .meta > .meta__favorites .material-icons { | |
font-size: 2em; | |
cursor: pointer; | |
margin-left: 12px; | |
} | |
.demo-blog .mdl-card .meta.meta--fill { | |
justify-content: space-between; | |
} | |
.demo-blog .meta > *:first-child { | |
margin-right: 16px; | |
} | |
.demo-blog .meta > * { | |
display: flex; | |
flex-direction: column; | |
} | |
.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.coffee-pic { | |
order: 0; | |
} | |
.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.something-else { | |
order: -1; | |
} | |
.demo-blog .coffee-pic .mdl-card__media { | |
background-image: url('http://placehold.it/900x300/f50057'); | |
} | |
.demo-blog .something-else .mdl-card__media { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
.demo-blog .something-else > button { | |
position: absolute; | |
top: 0; | |
right: 28px; | |
transform: translate(0px, -28px); | |
} | |
.demo-blog .something-else .mdl-card__media { | |
font-size: 13px; | |
font-weight: 500; | |
border-top-left-radius: 2px; | |
border-top-right-radius: 2px; | |
} | |
.demo-blog .something-else .mdl-card__media img { | |
width: 64px; | |
height: 64px; | |
margin-bottom: 10px; | |
} | |
.demo-blog .something-else .mdl-card__supporting-text { | |
background-color: #F5F5F5; | |
border-bottom-left-radius: 2px; | |
border-bottom-right-radius: 2px; | |
} | |
.demo-blog .on-the-road-again .mdl-card__media { | |
background-image: url('images/road.jpg'); | |
} | |
.demo-blog .shopping .mdl-card__media { | |
background-image: url('images/shopping.jpg'); | |
} | |
.demo-blog .demo-blog__posts > .demo-nav { | |
margin: 12px 15px; | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
align-items: center; | |
color: white; | |
font-weight: 500; | |
} | |
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button { | |
color: white; | |
text-decoration: none; | |
} | |
.demo-blog .demo-blog__posts > .demo-nav .mdl-button { | |
color: rgba(0,0,0,0.54); | |
background-color: white; | |
} | |
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:first-child .mdl-button { | |
margin-right: 16px; | |
} | |
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:last-child .mdl-button { | |
margin-left: 16px; | |
} | |
.demo-blog .mdl-card > a { | |
color: inherit; | |
text-decoration: none; | |
font-weight: inherit; | |
} | |
.demo-blog .mdl-card h3 { | |
margin: 0; | |
} | |
.demo-blog .mdl-card h3 a { | |
text-decoration: none; | |
} | |
.demo-blog .mdl-card h3.quote:before, .demo-blog .mdl-card h3.quote:after { | |
display: block; | |
font-size: 3em; | |
margin-top: 0.5em; | |
} | |
.demo-blog .mdl-card h3.quote:before { | |
content: '“'; | |
} | |
.demo-blog .mdl-card h3.quote:after { | |
content: '”'; | |
} | |
.demo-blog--blogpost .custom-header { | |
background-color: transparent; | |
} | |
.demo-blog--blogpost .demo-blog__posts > .mdl-card .mdl-card__media { | |
background-image: url('images/road_big.jpg'); | |
height: 280px; | |
} | |
.demo-blog--blogpost .comments { | |
background-color: #EEE; | |
} | |
.demo-blog--blogpost .meta > * { | |
align-items: center; | |
} | |
.demo-blog--blogpost .meta + .mdl-card__supporting-text { | |
border: 0; | |
display: flex; | |
flex-direction: column; | |
} | |
.demo-blog--blogpost .meta + .mdl-card__supporting-text p { | |
max-width: 512px; | |
margin: 16px auto; | |
font-size: 16px; | |
line-height: 28px; | |
} | |
.demo-blog--blogpost .comments { | |
display: flex; | |
flex-direction: column; | |
justify-content: flex-start; | |
align-items: stretch; | |
padding: 32px; | |
box-sizing: border-box; | |
} | |
.demo-blog--blogpost .comments > form { | |
display: flex; | |
flex-diretion: row; | |
margin-bottom: 16px; | |
} | |
.demo-blog--blogpost .comments > form .mdl-textfield { | |
flex-grow: 1; | |
margin-right: 16px; | |
color: rgb(97, 97, 97); | |
} | |
/* Workaround for Firefox. | |
* User agent stylesheet kept overwriting the font in FF only. | |
*/ | |
.demo-blog--blogpost .comments > form .mdl-textfield .mdl-textfield__input { | |
font-family: 'Roboto', 'Helvetica', sans-serif; | |
} | |
.demo-blog--blogpost .comments > form .mdl-textfield input, | |
.demo-blog--blogpost .comments > form .mdl-textfield textarea { | |
resize: none; | |
} | |
.demo-blog--blogpost .comments > form button { | |
margin-top: 20px; | |
background-color: rgba(0, 0, 0, 0.24); | |
color: white; | |
} | |
.demo-blog--blogpost .comments .comment { | |
display: flex; | |
flex-direction: column; | |
align-items: stretch; | |
} | |
.demo-blog--blogpost .comments .comment > .comment__header { | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
margin-bottom: 16px; | |
} | |
.demo-blog--blogpost .comments .comment > .comment__header > .comment__avatar { | |
width: 48px; | |
height: 48px; | |
border-radius: 24px; | |
margin-right: 16px; | |
} | |
.demo-blog--blogpost .comments .comment > .comment__header > .comment__author { | |
flex-grow: 1; | |
display: flex; | |
flex-direction: column; | |
} | |
.demo-blog--blogpost .comments .comment > .comment__text { | |
line-height: 1.5em; | |
} | |
.demo-blog--blogpost .comments .comment > .comment__actions { | |
display: flex; | |
flex-direction: row; | |
justify-content: flex-start; | |
align-items: center; | |
font-size: 0.8em; | |
margin-top: 16px; | |
} | |
.demo-blog--blogpost .comments .comment > .comment__actions button { | |
margin-right: 16px; | |
color: rgba(0, 0, 0, 0.24); | |
} | |
.demo-blog--blogpost .comments .comment > .comment__answers { | |
padding-top: 32px; | |
padding-left: 48px; | |
} | |
.demo-blog--blogpost .demo-back { | |
position: absolute; | |
top: 16px; | |
left: 16px; | |
color: white; | |
z-index: 9999; | |
} | |
.demo-blog .section-spacer { | |
flex-grow: 1; | |
} | |
.demo-blog .something-else { | |
overflow: visible; | |
z-index: 10; | |
} | |
.demo-blog .amazing .mdl-card__title { | |
background-color: #263238; | |
} | |
.demo-blog .minilogo { | |
width: 44px; | |
height: 44px; | |
background-image: url('images/avatar.png'); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: 50%; | |
border-radius: 22px; | |
background-color: #F5F5F5; | |
} | |
/* Fixes for IE 10 */ | |
.mdl-grid { | |
display: flex !important; | |
} | |
.social-btn { | |
background-position: center; | |
background-size: contain; | |
background-repeat: no-repeat; | |
background-color: transparent; | |
margin: 0 16px; | |
width: 24px; | |
height: 24px; | |
cursor: pointer; | |
opacity: 0.46; | |
border-radius: 2px; | |
} | |
.social-btn__twitter { | |
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png'); | |
} | |
.social-btn__blogger { | |
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png'); | |
} | |
.social-btn__gplus { | |
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png'); | |
} | |
.social-btn__share { | |
color: rgba(0, 0, 0, 0.54); | |
background: transparent; | |
} | |
.demo-blog .mdl-mini-footer { | |
margin-top: 80px; | |
height: 120px; | |
padding: 40px; | |
align-items: center; | |
background-color: white; | |
box-sizing: border-box; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment