aboutsummaryrefslogtreecommitdiff
path: root/themes/classic/sass/partials/_blog.scss
diff options
context:
space:
mode:
Diffstat (limited to 'themes/classic/sass/partials/_blog.scss')
-rw-r--r--themes/classic/sass/partials/_blog.scss164
1 files changed, 79 insertions, 85 deletions
diff --git a/themes/classic/sass/partials/_blog.scss b/themes/classic/sass/partials/_blog.scss
index 12f596a1..0cf11ae8 100644
--- a/themes/classic/sass/partials/_blog.scss
+++ b/themes/classic/sass/partials/_blog.scss
@@ -1,111 +1,107 @@
-$border: inline-image('dotted-border.png');
#articles {
overflow: hidden;
- @media only screen and (max-width: 768px) {
- ul, ol { margin-left: 1.4em; }
+ ul, ol { margin-left: 1.4em; }
+ @media only screen and (min-width: 768px) {
+ ul, ol { margin-left: 0; }
}
> article {
padding-bottom: 1em;
- &:last-child { margin-bottom: 0; border-bottom: none; }
+ &:last-child { margin-bottom: 0; }
h2 {
padding-top: 0.8em;
- background: $border top left repeat-x;
- &:first-child {
- background: none;
- padding-top: 0;
- }
+ background: $img-border top left repeat-x;
+ &:first-child { background: none; padding-top: 0; }
}
- .byline + time:before, time +time:before, .comments:before {
+ .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
@extend .separator;
}
- header {
- position: relative;
- padding-top: 2em;
- margin-bottom: 1.5em;
- padding-bottom: 1em;
- background: $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;
- position: absolute;
- top: 0;
- }
- }
- @media only screen and (max-width: 768px) {
- padding-bottom: 1em;
- margin-bottom: 1em;
- background: $border bottom left repeat-x;
- p.meta { position: static; }
+ }
+ 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;
}
}
- h1.feature {
- padding-top: .5em;
- margin-bottom: 1em;
+ @media only screen and (min-width: 768px) {
+ margin-bottom: 1.5em;
padding-bottom: 1em;
- background: $border bottom left repeat-x;
- font-size: 2.0em; font-style: italic;
- line-height: 1.3em;
+ background: $img-border bottom left repeat-x;
+ p.meta { position: absolute; top: 0; }
}
- .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%;
- }
- }
- }
+ }
+ h1.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);
}
- iframe.twitter-share-button {
+ }
+ .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;
- top: .3em;
- padding-left: .5em;
- }
- > footer {
- margin-top: 2em;
- padding-top: 1em;
- margin-bottom: 1.5em;
- background: $border top left repeat-x;
- time, .author { color: $text-color-light; @extend .sans; }
+ 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%;
+ }
}
}
+ iframe.twitter-share-button {
+ position: relative;
+ top: .3em;
+ padding-left: .5em;
+ }
+ > article > footer {
+ margin-top: 2em;
+ padding-top: 1em;
+ margin-bottom: 1.5em;
+ background: $img-border top left repeat-x;
+ @extend .sans;
+ }
+
}
article + article {
- background: $border top left repeat-x;
+ background: $img-border top left repeat-x;
}
#articles.blog-index {
article header { background: none; padding-bottom: 0; }
article h1 {
font-size: 2.2em;
- a { color: inherit; &:hover{ color: $link-color-hover; } }
+ a { color: inherit; &:hover { color: $link-color-hover; } }
}
a[rel=full-article] {
background: darken($main-bg, 5);
@@ -125,8 +121,6 @@ article + article {
footer {
@extend .sans;
margin-top: 1em;
- p.meta { color: $text-color-light; }
- a { color: inherit; &:hover{ color: $link-color-hover;} }
}
}