Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
redesign segmentfault.com/blogs as card view without sidebar
/**
[preview](http://minus.com/i/7myP2XHfeHXv.png)
*/
.layout-main {
width: 100%;
}
.layout-secondary {
display: none;
}
.article-list {
background: #f3f6f5;
text-align: center;
}
.article-item {
width: 31%;
height: 220px;
margin-top: 1em;
background: #fff;
position: relative;
vertcal-align: top;
text-align: left;
display: inline-block;
}
.article-item.q-highlight {
background: #fff;
}
.article-item:nth-child(3n-1) {
margin: 0 1em;
}
.article-item .push-40 {
margin-left: 0;
}
.push-40 .title {
font-size: 20px;
line-height: 1.5;
}
.push-40 .meta {
position: absolute;
bottom: 30px;
left: 10px;
font-size: 0;
}
.push-40 .meta span, .push-40 .meta .tags {
font-size: 12px;
}
.push-40 .meta .vote {
width: auto;
}
.push-40 .tags {
display: inline-block;
width: 85%;
}
.article-item .left {
position: absolute;
right: 10px;
bottom: 10px;
}
.article-item .rank {
position: absolute;
left: 0px;
bottom: 10px;
width: auto;
}
.article-item .meta, .article-item .rank {
line-height: 24px;
}
.article-item .meta span, .article-item .rank li {
display: inline-block;
width: 100px;
font-size: 12px;
}
.article-item .rank li {
color: #aaa;
font-weight: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment