$border: inline-image('dotted-border.png'); #articles { overflow: hidden; @media only screen and (max-width: 768px) { ul, ol { margin-left: 1.4em; } } > article { padding-bottom: 1em; &:last-child { margin-bottom: 0; border-bottom: none; } h2 { padding-top: 0.8em; background: $border top left repeat-x; &:first-child { background: none; padding-top: 0; } } .byline + time:before, time +time:before, .comments: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; } } } h1.feature { padding-top: .5em; margin-bottom: 1em; padding-bottom: 1em; background: $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%; } } } } iframe.twitter-share-button { 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; } } } } article + article { background: $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[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; p.meta { color: $text-color-light; } a { color: inherit; &:hover{ color: $link-color-hover;} } } } .separator { content: "\2022 "; padding: 0 .4em 0 .2em; display: inline-block; }