// Article
.article {
.article-aside { padding-top: 20px; } .article-image { position: relative; padding-bottom: 25%; overflow: hidden; @include media-breakpoint-down(md) { padding-bottom: 33%; } @include media-breakpoint-down(sm) { padding-bottom: 45%; } h1 { color: theme-color("primary"); position: absolute; bottom: 10%; right: 10%; left: calc(50vw - 555px); z-index: 10; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); @include media-breakpoint-down(lg) { left: calc(50vw - 435px); } @include media-breakpoint-down(md) { left: calc(50vw - 300px); } @include media-breakpoint-down(sm) { left: calc(50vw - 235px); font-size: 5vw; } @include media-breakpoint-down(xs) { left: 35px; bottom: 20%; } } img { position: absolute; top: 50%; transform: translateY(-50%); } picture img { max-width: 100%; width: 100%; } &:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 35, 75, 0.6); } } .article-wrapper { padding-top: 100px; } .article-wrapper { @extend .d-flex; background-color: $white; @include media-breakpoint-down(sm) { flex-direction: column; } } .archive-list { border: 0; } .archive-list li:after { display: none; } .archive-list { background-color: $white; margin-bottom: 35px; padding: 10px 23px 15px; border: 1px $gray-200 solid; list-style: none; margin-top: 30px; @include media-breakpoint-down(md) { margin-top: 0; } @include media-breakpoint-down(sm) { margin-top: 30px; } li { height: auto; border: none; padding-left: 0; padding-right: 0; &:first-of-type { padding: 0; } +li { border-top: 1px $gray-200 solid; } } a { font-weight: 300; line-height: 1.5; } } @media (min-width: 1200px) { .container { max-width: 1200px; } } .article-aside { flex: 0 0 300px; max-width: 300px; @include media-breakpoint-down(md) { flex: 0 0 100%; max-width: 100%; } } .article-content { @include media-breakpoint-down(md) { flex-basis: 100%; min-width: 100%; } } .article-content { flex-grow: 1; padding: 0 30px; margin-bottom: 3em; @include media-breakpoint-down(sm) { padding: 0 1.5em; margin-top: 1.5rem; } color: #333333; p { margin: 1em 0; } a { text-decoration: underline; } ul { padding: 0; } h3 { color: theme-color("primary"); } } .article-wrapper { background: transparent; @include media-breakpoint-down(md) { flex-wrap: wrap; } @include media-breakpoint-down(sm) { padding-top: 30px; } } .archive-list {} .author { width: 100%; display: flex; align-items: center; img { margin-right: 15px; } } .article-content p { font-size: 1rem; } .article-widgets { @include media-breakpoint-down(md) { display: flex; } } .date { color: $gray-500; font-size: 0.875rem; margin-bottom: 0.5rem; }
}
.tags-group {
padding: 10px 23px 15px; border: 1px $gray-200 solid; margin-bottom: 35px; h4 { text-align: left; } ul { list-style: none; padding: 0; margin: 0; text-align: left; li+li { display: inline-block; vertical-align: top; margin: 0 5px 5px 0; padding: 2px 10px 4px; background: #f6f6f6; border: none; border-radius: 3px; font-size: 12px !important; color: #505050; line-height: 23px; transition: all 0.3s ease-in-out; } }
} // Share buttons
.social-share {
margin: 0; padding: 0; list-style: none; @extend .d-flex; li { display: inline-block; margin-left: 2px; }
}
.btn-share {
display: inline-block; width: 2.4375rem; height: 2.4375rem; line-height: 2.4375rem; padding: 0 0.8125em; color: $white; position: relative; text-align: center; @extend .fa; &:before { font-size: 20px; } &:focus, &:hover { color: $white; }
}
.btn-facebook {
background-color: $facebook-color; @extend .fa-facebook; &:focus, &:hover { background-color: $facebook-hover-color; }
}
.btn-twitter {
background-color: $twitter-color; @extend .fa-twitter; &:focus, &:hover { background-color: $twitter-hover-color; }
}
.btn-google {
background-color: $google-color; @extend .fa-google; &:focus, &:hover { background-color: $google-hover-color; }
}
.btn-addthis {
@extend .btn-primary; @extend .fa-plus; &:before { font-size: 16px; }
}
.social-share-label {
background-color: $navy; width: auto; font-family: $font-family-control; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.date {
font-family: $font-family-control; font-size: 1.125rem;
}