hacks-guide-minimal-mistake.../_assets/css/_page.scss

163 lines
No EOL
2.9 KiB
SCSS

/* ==========================================================================
SINGLE PAGE/POST
========================================================================== */
#main {
@include container;
@include clearfix;
margin-top: 2em;
padding-left: 2em;
padding-right: 2em;
}
.page {
@include breakpoint($medium) {
@include span(10 last);
}
}
.page__title {
margin-top: 0;
font-family: $serif;
}
.page__content {
p, li {
font-size: 16px;
}
// keep content from going to wide when toc is disabled
@include breakpoint($large) {
> h1, > h2, > h3, > h4, > h5, > h6, > hr,
> p, > ul, > ol, > blockquote, > table, > figure,
> div, > section, > img, > video, > form {
max-width: span(7 of 10);
}
}
}
.page__hero {
position: relative;
margin-bottom: 2em;
@include clearfix;
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 8%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: $body-color;
@include breakpoint($small) {
left: 25%;
}
@include breakpoint($large) {
border-width: 20px;
}
@include breakpoint($x-large) {
left: 33.333333333%;
}
}
}
.page__hero-image {
width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
}
.page__hero-caption {
position: absolute;
bottom: 0;
right: 0;
margin: 0 auto;
padding: 2px 5px;
color: #fff;
font-family: $sans-serif;
font-size: 10px;
background: #000;
text-align: right;
z-index: 5;
opacity: 0.5;
border-radius: $border-radius 0 $border-radius 0;
@include breakpoint($medium) {
padding: 5px 10px;
}
a {
color: #fff;
text-decoration: none;
}
}
/*
Social sharing
========================================================================== */
.page__share {
margin-top: 2em;
padding-top: 1em;
border-top: 1px solid $border-color;
}
.page__share-title {
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
}
/*
Page meta
========================================================================== */
.page__meta {
margin-top: 2em;
font-family: $sans-serif;
font-size: 14px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
p {
margin-bottom: 0;
}
}
.page__meta-title {
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
}
/*
Related
========================================================================== */
.page__related {
margin-top: 2em;
padding-top: 1em;
border-top: 1px solid $border-color;
@include breakpoint($medium) {
@include span(10);
@include pre(2);
}
li {
margin-bottom: 0;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.page__related-title {
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
}