android.moparisthebest.org/.themes/classic/sass/partials/_blog.scss
Brandon Mathis 5d1d04c52c 1. Made default layout more generic.
2. Added a page layout and improved html on post layout.
3. Improved flexibility of stylesheets for different layout types.
4. Collapsing sidebar now moves it to the bottom of the page and floats
content into columns.
5. Improved sharing settings, added Google plus one.
2011-07-12 19:40:57 -04:00

129 lines
3.1 KiB
SCSS

#content {
article { ul, ol { margin-left: 1.4em; }}
@media only screen and (min-width: 768px) {
ul, ol { margin-left: 0; }
}
> article, > div > article {
overflow: hidden;
padding-bottom: 1em;
&:last-child { margin-bottom: 0; }
h2 {
padding-top: 0.8em;
background: $img-border top left repeat-x;
.entry-content &:first-child { padding-top: 0; }
&:first-child { background: none; }
}
.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
@extend .separator;
}
}
header {
position: relative;
padding-top: 2em;
padding-bottom: 1em;
margin-bottom: 1em;
background: $img-border bottom left repeat-x;
h1 {
margin: 0;
a { text-decoration: none;
&:hover { text-decoration: underline; } }
}
p {
font-size: .9em;
color: $text-color-light;
margin: 0;
@extend .sans;
&.meta {
text-transform: uppercase;
}
}
@media only screen and (min-width: 768px) {
margin-bottom: 1.5em;
padding-bottom: 1em;
background: $img-border bottom left repeat-x;
p.meta { position: absolute; top: 0; }
}
}
.feature {
padding-top: .5em;
margin-bottom: 1em;
padding-bottom: 1em;
background: $img-border bottom left repeat-x;
font-size: 2.0em; font-style: italic;
line-height: 1.3em;
}
.entry-content {
img, video { max-width: 100%; height: auto; }
video {
width: 100%; display: block; margin-bottom: 1.5em;
padding: .8em; background: #fff; border: 1px solid #eee;
@include box-sizing(border-box);
}
}
.flash-video {
max-width: 100%;
margin-bottom: 1.5em;
@include box-sizing(border-box);
padding: .8em; background: #fff; border: 1px solid #eee;
> div {
position: relative;
display: block;
padding-bottom: 56.25%;
padding-top: 1px;
height: 0;
overflow: hidden;
iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
> div > article > footer {
margin-bottom: 1.5em;
background: $img-border top left repeat-x;
margin-top: 2em;
padding-top: 1em;
@extend .sans;
p.meta { display: inline-block; font-size: .8em; }
}
}
article + article {
background: $img-border top left repeat-x;
}
#content .blog-index {
article header { background: none; padding-bottom: 0; }
article h1 {
font-size: 2.2em;
a { color: inherit; &:hover { color: $link-color-hover; } }
}
a[rel=full-article] {
background: darken($main-bg, 5);
display: inline-block;
padding: .4em .8em;
margin-right: .5em;
text-decoration: none;
color: mix($text-color, $text-color-light);
@extend .serif;
@include transition(background-color, .5s);
&:hover {
background: $link-color-hover;
text-shadow: none;
color: $main-bg;
}
}
footer {
@extend .sans;
margin-top: 1em;
}
}
.separator {
content: "\2022 ";
padding: 0 .4em 0 .2em;
display: inline-block;
}