hacks-guide-minimal-mistake.../_sass/minimal-mistakes/_page.scss

579 lines
9.7 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 clearfix;
margin-left: auto;
margin-right: auto;
padding-left: 1em;
padding-right: 1em;
-webkit-animation: $intro-transition;
animation: $intro-transition;
max-width: 100%;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
2016-03-21 21:36:24 +01:00
@include breakpoint($x-large) {
2019-04-09 02:59:58 +02:00
max-width: $max-width;
}
2016-03-10 17:13:54 +01:00
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.initial-content,
.search-content {
flex: 1 0 auto;
}
2016-03-10 17:13:54 +01:00
.page {
@include breakpoint($large) {
float: right;
width: calc(100% - #{$right-sidebar-width-narrow});
padding-right: $right-sidebar-width-narrow;
}
@include breakpoint($x-large) {
width: calc(100% - #{$right-sidebar-width});
padding-right: $right-sidebar-width;
}
2016-03-23 21:33:21 +01:00
.page__inner-wrap {
float: left;
margin-top: 1em;
margin-left: 0;
margin-right: 0;
width: 100%;
clear: both;
2016-03-23 21:33:21 +01:00
.page__content,
.page__meta,
.page__share {
position: relative;
float: left;
margin-left: 0;
margin-right: 0;
width: 100%;
clear: both;
2016-03-23 21:33:21 +01:00
}
}
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-24 03:03:27 +01:00
line-height: 1;
a {
color: $text-color;
text-decoration: none;
}
& + .page__meta {
margin-top: -0.5em;
}
2016-03-11 04:29:30 +01:00
}
2016-03-10 19:06:59 +01:00
.page__lead {
font-family: $global-font-family;
font-size: $type-size-4;
}
.page__content {
h2 {
padding-bottom: 0.5em;
border-bottom: 1px solid $border-color;
}
h1, h2, h3, h4, h5, h6 {
.header-link {
position: relative;
left: 0.5em;
opacity: 0;
font-size: 0.8em;
-webkit-transition: opacity 0.2s ease-in-out 0.1s;
-moz-transition: opacity 0.2s ease-in-out 0.1s;
-o-transition: opacity 0.2s ease-in-out 0.1s;
transition: opacity 0.2s ease-in-out 0.1s;
}
&:hover .header-link {
opacity: 1;
}
}
p,
li,
dl {
font-size: 1em;
}
2016-03-25 14:11:13 +01:00
/* paragraph indents */
p {
margin: 0 0 $indent-var;
/* sibling indentation*/
2016-03-25 14:11:13 +01:00
@if $paragraph-indent == true {
& + p {
text-indent: $indent-var;
margin-top: -($indent-var);
}
}
}
a:not(.btn) {
2016-04-06 03:37:16 +02:00
&:hover {
text-decoration: underline;
2016-04-06 21:50:10 +02:00
img {
box-shadow: 0 0 10px rgba(#000, 0.25);
}
2016-04-06 03:37:16 +02:00
}
}
:not(pre) > code {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
font-size: 0.8em;
background: $code-background-color;
border-radius: $border-radius;
&::before,
&::after {
letter-spacing: -0.2em;
content: "\00a0"; /* non-breaking space*/
}
}
dt {
margin-top: 1em;
2016-03-31 04:20:55 +02:00
font-family: $sans-serif;
font-weight: bold;
}
dd {
margin-left: 1em;
2016-03-31 04:20:55 +02:00
font-family: $sans-serif;
font-size: $type-size-6;
}
.small {
font-size: $type-size-6;
}
/* blockquote citations */
blockquote + .small {
margin-top: -1.5em;
padding-left: 1.25rem;
}
}
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;
-webkit-animation: $intro-transition;
animation: $intro-transition;
2017-02-14 18:42:50 +01:00
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
2016-03-24 02:50:22 +01:00
&--overlay {
position: relative;
margin-bottom: 2em;
padding: 3em 0;
@include clearfix;
background-size: cover;
background-repeat: no-repeat;
2016-03-24 17:04:23 +01:00
background-position: center;
-webkit-animation: $intro-transition;
animation: $intro-transition;
2017-02-14 18:42:50 +01:00
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
2016-03-24 02:50:22 +01:00
2016-06-07 04:28:51 +02:00
a {
color: #fff;
}
.wrapper {
padding-left: 1em;
padding-right: 1em;
@include breakpoint($x-large) {
max-width: $x-large;
}
}
.page__title,
.page__meta,
.page__lead,
.btn {
2016-03-24 02:50:22 +01:00
color: #fff;
text-shadow: 1px 1px 4px rgba(#000, 0.5);
}
2016-03-24 03:03:27 +01:00
.page__lead {
max-width: $medium;
}
2016-03-24 03:03:27 +01:00
.page__title {
font-size: $type-size-2;
@include breakpoint($small) {
font-size: $type-size-1;
}
}
2016-03-24 02:50:22 +01:00
}
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: $caption-font-family;
font-size: $type-size-7;
2016-03-10 19:06:59 +01:00
background: #000;
text-align: right;
z-index: 5;
opacity: 0.5;
border-radius: $border-radius 0 0 0;
2016-03-21 21:36:24 +01:00
2016-03-20 20:20:33 +01:00
@include breakpoint($large) {
2016-03-10 19:06:59 +01:00
padding: 5px 10px;
}
2016-03-21 21:36:24 +01:00
2016-03-10 19:06:59 +01:00
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;
@include breakpoint(max-width $small) {
.btn span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
}
2016-02-23 03:44:55 +01:00
}
2016-03-11 04:29:30 +01:00
.page__share-title {
margin-bottom: 10px;
font-size: $type-size-6;
2016-03-11 04:29:30 +01:00
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;
color: $muted-text-color;
2016-03-11 04:29:30 +01:00
font-family: $sans-serif;
font-size: $type-size-6;
2016-03-21 21:36:24 +01:00
2016-03-11 04:29:30 +01:00
p {
margin: 0;
}
a {
color: inherit;
}
}
2016-03-11 21:55:06 +01:00
.page__meta-title {
margin-bottom: 10px;
font-size: $type-size-6;
2016-03-11 21:55:06 +01:00
text-transform: uppercase;
2013-05-24 16:25:31 +02:00
}
2015-01-21 15:32:22 +01:00
.page__meta-sep::before {
content: "\2022";
padding-left: 0.5em;
padding-right: 0.5em;
}
2016-03-20 02:50:18 +01:00
/*
Page taxonomy
========================================================================== */
.page__taxonomy {
.sep {
display: none;
}
2016-03-23 16:43:16 +01:00
strong {
margin-right: 10px;
}
2016-03-20 02:50:18 +01:00
}
.page__taxonomy-item {
display: inline-block;
margin-right: 5px;
margin-bottom: 8px;
padding: 5px 10px;
text-decoration: none;
border: 1px solid mix(#000, $border-color, 25%);
2016-03-20 02:50:18 +01:00
border-radius: $border-radius;
2016-03-21 21:36:24 +01:00
2016-03-20 02:50:18 +01:00
&:hover {
text-decoration: none;
2016-04-06 20:46:35 +02:00
color: $link-color-hover;
2016-03-20 02:50:18 +01:00
}
}
2018-03-20 20:38:24 +01:00
.taxonomy__section {
margin-bottom: 2em;
padding-bottom: 1em;
&:not(:last-child) {
border-bottom: solid 1px $border-color;
}
.archive__item-title {
margin-top: 0;
}
.archive__subtitle {
2018-03-20 19:39:15 +01:00
clear: both;
border: 0;
}
2018-03-20 20:38:24 +01:00
+ .taxonomy__section {
margin-top: 2em;
}
}
2018-03-20 20:38:24 +01:00
.taxonomy__title {
margin-bottom: 0.5em;
color: $muted-text-color;
}
2018-03-20 20:38:24 +01:00
.taxonomy__count {
color: $muted-text-color;
}
2018-03-20 20:38:24 +01:00
.taxonomy__index {
display: grid;
grid-column-gap: 2em;
grid-template-columns: repeat(2, 1fr);
2018-03-20 20:38:24 +01:00
margin: 1.414em 0;
padding: 0;
font-size: 0.75em;
list-style: none;
@include breakpoint($large) {
grid-template-columns: repeat(3, 1fr);
}
a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0.25em 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
color: inherit;
text-decoration: none;
border-bottom: 1px solid $border-color;
}
}
.back-to-top {
display: block;
2018-03-20 19:39:15 +01:00
clear: both;
color: $muted-text-color;
font-size: 0.6em;
text-transform: uppercase;
text-align: right;
text-decoration: none;
}
/*
Comments
========================================================================== */
2016-03-23 21:33:21 +01:00
.page__comments {
float: left;
margin-left: 0;
margin-right: 0;
width: 100%;
clear: both;
2016-03-23 21:33:21 +01:00
}
.page__comments-title {
margin-top: 2rem;
margin-bottom: 10px;
padding-top: 2rem;
font-size: $type-size-6;
border-top: 1px solid $border-color;
text-transform: uppercase;
}
.page__comments-form {
2017-02-14 18:42:50 +01:00
-webkit-transition: $global-transition;
transition: $global-transition;
&.disabled {
input,
button,
textarea,
label {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
box-shadow: none;
opacity: 0.65;
}
}
}
2016-08-10 21:45:48 +02:00
.comment {
@include clearfix();
margin: 1em 0;
2016-08-10 21:45:48 +02:00
&:not(:last-child) {
border-bottom: 1px solid $border-color;
}
}
.comment__avatar-wrapper {
float: left;
2016-08-10 21:45:48 +02:00
width: 60px;
height: 60px;
@include breakpoint($large) {
width: 100px;
height: 100px;
}
}
.comment__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
@include breakpoint($large) {
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid $border-color;
}
}
.comment__content-wrapper {
float: right;
width: calc(100% - 60px);
@include breakpoint($large) {
width: calc(100% - 100px);
}
2016-08-10 21:45:48 +02:00
}
.comment__author {
margin: 0;
a {
text-decoration: none;
}
}
.comment__date {
@extend .page__meta;
margin: 0;
a {
text-decoration: none;
}
}
2016-03-11 21:55:06 +01:00
/*
Related
========================================================================== */
.page__related {
@include clearfix();
float: left;
2016-03-11 22:17:41 +01:00
margin-top: 2em;
padding-top: 1em;
border-top: 1px solid $border-color;
2016-03-21 21:36:24 +01:00
2016-03-20 20:20:33 +01:00
@include breakpoint($large) {
float: right;
width: calc(100% - #{$right-sidebar-width-narrow});
}
@include breakpoint($x-large) {
width: calc(100% - #{$right-sidebar-width});
}
2016-03-21 21:36:24 +01:00
a {
color: inherit;
text-decoration: none;
}
2013-09-07 17:59:02 +02:00
}
2016-03-11 21:55:06 +01:00
.page__related-title {
margin-bottom: 10px;
font-size: $type-size-6;
2016-03-11 21:55:06 +01:00
text-transform: uppercase;
}
/*
Wide Pages
========================================================================== */
.wide {
.page {
@include breakpoint($large) {
padding-right: 0;
}
@include breakpoint($x-large) {
padding-right: 0;
}
}
.page__related {
@include breakpoint($large) {
padding-right: 0;
}
@include breakpoint($x-large) {
padding-right: 0;
}
}
}