@import 'variables_and_mixins'; .article { max-width: $max-width; font-family: $Merriweather; line-height: 1.5em; color: $black; h1, h2, h3, h4, h5, h6 { font-family: $SourceSansPro; } .article_header, .article_teaser, .article_content { margin: 0 auto; * { margin: 1.1em auto;} & > * { padding: 0 13%; } & > blockquote { padding: 0 5%; } & > p img { max-width: 100%; margin: 3em auto; } } .article_header { text-align: center; h1 { font-size: 3.0em; font-weight: 900; line-height: 120%; color: $black; a { color: $black; } a:hover { color:$red; } } h2 { font-size: 1.5em; font-weight: 400; color: $grey; line-height: 120%; } .author_name { font-family: $MerriweatherSans; font-size: 0.8em; text-transform: uppercase; } } .hero_image { text-align: center; a, img { display: block; margin: 0 auto; text-align: center; } } .article_teaser { font-size: 1.375em; line-height: 1.8em; font-weight: 400; } .more-link { display: block; margin: 0 auto 2em auto; text-align: center; font-family: $SourceSansPro; a { margin: 0; font-weight: 600; display: inline-block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.25rem; padding:5px 10px; color: #4d4d4d; display:block; width:100%; text-align:center; &:hover { background-color: darken($white, 10%); } } } .article_content { line-height: 1.9em; a { border-bottom: 1px solid $grey; &:hover { color: $red; border-bottom: 1px solid $red; } } h1, h2, h3, h4, h5, h6 { margin-top: 1.8em; line-height: 120%; color: $black } h2, h3, h4, h5 { font-weight: 700; } h6 { font-weight: 600; } h1 { font-size: 2.5em; } h2 { font-size: 2.0em;} h3 { font-size: 1.5em; color: $red; margin-bottom: 1.0em; a { color: $red; } a:hover { color: $black; border-bottom: 1px solid $black; } } h4 { font-size: 1.25em; text-transform: uppercase; } h5 { font-size: 1.25em; } h6 { font-size: 1.25em; color: $grey; a { color: $grey; } } p { font-size: 1.125em; display: block; a { color: $black; } a:hover { color: $red; } } img { display: block; margin: 0 auto; } br { display: block; margin: 0; padding: 0;} ul, ol { list-style: none; font-size: 1.125rem; margin-left: 0; margin-right: 2em; li { margin: 0.75em 0; padding-left: 1.5em; line-height: 1.4em; list-style-type: none; position: relative; &:before { top: 0.03em; left: 0; content: '\2022 '; color: $grey; font-size: 2em; position: absolute; } } } ol { counter-reset: list; li { counter-increment: list; &:before { content: counter(list) "."; position: absolute; top: 0; left: 0; font-size: 1.125rem; font-family: $SourceSansPro; font-weight: 600; } } ol { counter-reset: sublist; li { counter-increment: sublist; padding-left: 3rem; &:before { content: counter(list) "." counter(sublist) "."; } } } } svg { margin: 0 auto; display: block; max-width: 100%; } iframe { width: auto; max-width: 100%; position: relative; left: 50%; transform: translateX(-50%); } blockquote { font-family: $Merriweather; font-style: italic; font-size: 1.5em; line-height: 1.5em; color:#999; text-align: center; em { font-weight: 700;} strong { font-weight: 900; } } blockquote strong:last-child, img + br + strong { em { font-family: $SourceSansPro; font-style: normal; font-weight: normal; font-size: 1.0rem; color: $black; } } img + br + strong em { display: block; text-align: center; margin-top: -3em; } pre { border-left: 2px solid $grey; font-family: $Monospace; font-weight: 400; font-size: 1.25em; line-height: 140%; color: $grey; padding: 0 20px; } .highlight pre { font-size: 0.875em; } table { border: none; text-align: left; margin: 40px 13%; border-spacing: 0; border-collapse: collapse; th, td { border: 1px solid $grey; font-family: $SourceSansPro; line-height: 120%; font-size: 1.25em; color: $black; padding: 0.6em; } th { text-transform: uppercase; font-weight: 600; } td { font-weight: 400; } } .article_document { a { display: block; text-align: center; background-color: $black; color: $white; font-family: $SourceSansPro; font-size: 1.25rem; font-weight: 600; line-height: 3rem; &:hover { background-color: $red; } } } } .article_footer { margin: 4em 13%; line-height: 130%; font-family: $SourceSansPro; color: $grey; text-align: left; a { font-weight: 600; &:hover { color: $black; } } } .article_googleplus { text-align: center; font-family: $SourceSansPro; margin-top: $gutter-gamma; a { margin: 0 auto; display: inline-block; color: $black; line-height: 32px; font-size: 1.25rem; &:before { content: ""; display: inline-block; margin-right: 10px; float: left; color: #fff; width: 32px; height: 32px; border-radius: 50%; background: url('/assets/gplus.svg') $red center center no-repeat; background-size: 80% auto; } &:hover { color: lighten($grey, 10%); } } } &.small { max-width: 50%; float: left; .article_header { h1 { font-size: 1.75rem; } h2 { display: none; } } .article_teaser { p { font-size: 1.0rem; line-height: 1.5em; } } .article_googleplus, .article_footer, .article_content { display:none; } } }