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

163 lines
2.9 KiB
SCSS
Raw Normal View History

2015-01-21 15:32:22 +01:00
/* ==========================================================================
2016-03-10 17:13:54 +01:00
SINGLE PAGE/POST
2015-01-21 15:32:22 +01:00
========================================================================== */
2013-05-24 16:25:31 +02:00
#main {
@include container;
@include clearfix;
margin-top: 2em;
padding-left: 2em;
padding-right: 2em;
2016-03-10 17:13:54 +01:00
}
.page {
@include breakpoint($medium) {
@include span(10 last);
}
2016-03-10 19:06:59 +01:00
}
2016-03-11 04:29:30 +01:00
.page__title {
2016-03-11 21:55:06 +01:00
margin-top: 0;
2016-03-11 04:29:30 +01:00
font-family: $serif;
}
2016-03-10 19:06:59 +01:00
.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);
}
}
}
2015-01-21 15:32:22 +01:00
2016-03-10 19:06:59 +01:00
.page__hero {
position: relative;
margin-bottom: 2em;
@include clearfix;
&:after {
2016-03-10 19:06:59 +01:00
content: "";
display: block;
position: absolute;
bottom: 0;
left: 8%;
width: 0;
height: 0;
border: 10px solid transparent;
2016-03-10 17:13:54 +01:00
border-bottom-color: $body-color;
@include breakpoint($small) {
left: 25%;
}
@include breakpoint($large) {
border-width: 20px;
}
@include breakpoint($x-large) {
left: 33.333333333%;
}
}
2016-03-10 19:06:59 +01:00
}
.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;
}
2013-05-24 16:25:31 +02:00
}
2015-01-21 15:32:22 +01:00
2016-03-11 04:29:30 +01:00
/*
Social sharing
========================================================================== */
2016-02-23 03:44:55 +01:00
2016-03-11 04:29:30 +01:00
.page__share {
2016-03-11 22:17:41 +01:00
margin-top: 2em;
2016-03-11 04:29:30 +01:00
padding-top: 1em;
border-top: 1px solid $border-color;
2016-02-23 03:44:55 +01:00
}
2016-03-11 04:29:30 +01:00
.page__share-title {
2016-03-10 17:13:54 +01:00
font-size: 14px;
2016-03-11 04:29:30 +01:00
margin-bottom: 10px;
text-transform: uppercase;
2013-09-07 18:57:20 +02:00
}
2015-01-21 15:32:22 +01:00
2016-03-11 04:29:30 +01:00
/*
Page meta
========================================================================== */
.page__meta {
margin-top: 2em;
font-family: $sans-serif;
font-size: 14px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
p {
2016-03-11 21:55:06 +01:00
margin-bottom: 0;
}
}
2016-03-11 21:55:06 +01:00
.page__meta-title {
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
2013-05-24 16:25:31 +02:00
}
2015-01-21 15:32:22 +01:00
2016-03-11 21:55:06 +01:00
/*
Related
========================================================================== */
.page__related {
2016-03-11 22:17:41 +01:00
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 {
2016-03-11 21:55:06 +01:00
text-decoration: underline;
}
}
2013-09-07 17:59:02 +02:00
}
2016-03-11 21:55:06 +01:00
.page__related-title {
2016-03-10 17:13:54 +01:00
font-size: 14px;
2016-03-11 21:55:06 +01:00
margin-bottom: 10px;
text-transform: uppercase;
}