-
{ box-sizing: border-box;
}
html, body {
margin: 0; padding: 0;
}
html {
background: $header-bg;
}
body {
@extend %body-type; background-color: $body-bg; color: $text-color; font-size: $body-font-size; line-height: 1.5; text-rendering: optimizeLegibility;
}
a {
color: $link-color; text-decoration: none; transition: $link-transition; &:hover { color: $link-hover; text-decoration: underline; transition: $link-transition; }
}
.img-center {
display: block; margin: 0 auto;
}
%text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
video {
max-width: 100%;
}
picture, img {
display: block; margin: 2em auto;
}
.img-polaroid {
background-color: $white; border: 1px solid $dark-transparent02; box-shadow: 0 1px 3px $dark-transparent01; margin: 1em 0.25em 2em; padding: 0.25em;
}
.img-full {
margin-left: auto; margin-right: auto; max-width: $container-width;
}
.img-half {
.post & { max-width: 500px; } @include breakpoint(medium) { width: 49.6%; }
}
.img-thirds {
@include breakpoint(medium) { width: 32.89%; }
}
.thirds {
float: left; margin-bottom: 1em; @include breakpoint(medium) { width: 31.8%; }
}
.img-fourths {
@include breakpoint(medium) { width: 24.5%; }
}
.post {
video + video { @include breakpoint(medium) { margin-left: 0.65%; } }
}
.img-split-wide, .img-wide {
@include breakpoint(medium) { width: 62.7%; }
}
.img-split-tall, .img-tall {
@include breakpoint(medium) { width: 35.25%; }
}
.rotate-left {
transform: rotate(-90deg);
}
.img-half, .img-thirds, .img-fourths, .img-split-wide, .img-wide, .img-split-tall, .img-tall {
@include breakpoint(medium) { //display: inline-block; }
}