Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
366 lines (285 sloc) 5.2 KB
/* Blocks
---------------------------------------------------------------------------------------------------- */
/* General
--------------------------------------------- */
.entry > .entry-header,
.entry > .entry-footer,
.entry-comments,
.comment-respond,
.archive .site-main {
margin: 0 $base-margin;
max-width: calc(100vw - (2 * #{ $base-margin }));
& > *:first-child {
margin-top: 0;
}
@include media(">=tablet") {
margin: 0 calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
}
@include media(">=desktop") {
max-width: $content-width;
margin-left: auto;
margin-right: auto;
}
}
.entry-content > * {
margin: $block-margin $base-margin;
max-width: calc(100vw - (2 * #{ $base-margin }));
@include media(">=tablet") {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
}
@include media(">=desktop") {
max-width: $content-width;
margin-left: auto;
margin-right: auto;
}
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
&.alignwide {
margin-left: auto;
margin-right: auto;
@include media(">=tablet") {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
&.alignfull {
margin-top: calc(2 * #{$block-margin});
margin-right: 0;
margin-bottom: calc(2 * #{$block-margin});
margin-left: 0;
max-width: 100%;
}
&.alignleft {
float: left;
max-width: calc(5 * (100vw / 12));
margin-top: 0;
@include media(">=tablet") {
max-width: calc(4 * (100vw / 12));
margin-right: calc(2 * #{$base-margin});
}
@include media(">=desktop") {
max-width: calc(3 * (100vw / 12));
}
}
&.alignright {
float: right;
max-width: calc(5 * (100vw / 12));
margin-top: 0;
margin-left: $base-margin;
margin-right: $base-margin;
@include media(">=tablet") {
max-width: calc(4 * (100vw / 12));
margin-left: calc(2 * #{$base-margin});
margin-right: calc(2 * (100vw / 12));
}
}
}
.entry-content {
ul, ol {
padding-left: 1rem;
li {
padding-bottom: .5rem;
&:last-child {
padding-bottom: 0;
}
ul, ol {
padding-top: .5rem;
}
}
}
}
/* Image
--------------------------------------------- */
.wp-block-image {
img {
display: block;
max-width: 100%;
height: auto;
}
figcaption {
color: $grey_7;
text-align: left;
font-size: 14px;
font-style: italic;
}
}
/* Button
--------------------------------------------- */
.wp-block-button {
margin-bottom: $block-margin;
text-align: center;
.wp-block-button__link {
@extend %button;
}
}
/* Blockquote
--------------------------------------------- */
blockquote,
blockquote.wp-block-quote {
background: transparent;
text-align: left;
p {
color: $highlight;
font-size: 24px;
font-style: normal;
font-weight: 400;
}
cite,
.wp-block-quote__citation {
color: $highlight;
display: block;
font-size: 16px;
font-weight: 700;
margin-top: 12px;
text-transform: uppercase;
}
p:last-of-type {
margin-bottom: 0;
}
&.is-large,
&.is-style-large {
margin: $block-margin auto;
p {
@include font-sizes( 24px, 36px );
}
}
}
/* Pull Quote
--------------------------------------------- */
.wp-block-pullquote {
border: none;
padding: 0;
blockquote {
border-left: 0;
border-top: 8px solid $highlight;
border-bottom: 8px solid $highlight;
padding: 16px 0;
text-align: center;
max-width: 50%;
margin: 0 auto;
}
&.alignleft,
&.alignright {
blockquote {
max-width: 100%;
}
}
}
/* Separator
--------------------------------------------- */
.wp-block-separator,
hr {
&:not(.is-style-dots) {
background-color: $border-color;
border: 0;
height: 1px;
}
&:not(.is-style-wide):not(.is-style-dots) {
width: 100%;
height: 4px;
background: transparent;
&::before {
content: '';
display: block;
height: 4px;
width: 40px;
background: $highlight;
}
}
&.is-style-dots:before {
color: $grey_9;
font-size: 18px;
letter-spacing: 12px;
padding-left: 12px;
}
}
/* Headings
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
color: $highlight;
line-height: 1.2;
font-weight: 600;
margin-bottom: 16px;
a {
color: $highlight;
&:hover {
color: $highlight;
text-decoration: underline;
}
}
&:focus {
color: $highlight;
outline: none;
}
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 15px;
}
/* Tables
--------------------------------------------- */
.table,
.wp-block-table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
max-width: $grid-width;
margin-bottom: $block-margin;
th,
td {
padding: 16px;
vertical-align: center;
border-top: 1px solid $border-color;
}
thead th {
vertical-align: bottom;
border-bottom: 2px solid $border-color;
}
tbody + tbody {
border-top: 2px solid $border-color;
}
}
/* Columns
--------------------------------------------- */
.wp-block-columns {
.wp-block-column > * {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&[class*='has-'] > * {
margin-right: $base-margin;
&:last-child {
margin-right: 0;
}
}
}