5d1d04c52c
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.
129 lines
3.1 KiB
SCSS
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;
|
|
}
|