/**
* Site header */
.site-header {
margin-top: $spacing-unit; width: 100%; #homepage & { position: absolute; } a { transition: color $link-transition-speed linear; -webkit-transition: color $link-transition-speed linear; -moz-transition: color $link-transition-speed linear; -o-transition: color $link-transition-speed linear; &:hover { color: $grey-color; } } @include media-query($on-laptop) { margin-top: $spacing-unit / 2; position: relative; #homepage & { position: relative; } }
}
.site-title {
@include relative-font-size(1.625); font-weight: 300; letter-spacing: -1px; margin-bottom: 0; float: left; &, &:visited { color: $grey-color-dark; }
}
.site-nav {
float: right; .page-link { color: $text-color; line-height: $base-line-height; // Gaps between nav items, but not on the last one &:not(:last-child) { margin-right: 20px; } } @include media-query($on-laptop) { float: none; }
}
/**
* Site footer */
.site-footer {
border-top: 1px solid $grey-color-light; padding: $spacing-unit 0;
}
.footer-heading {
@include relative-font-size(1); margin-bottom: $spacing-unit / 2; color: $grey-color;
}
/**
* Page content */
.page-content {
padding: $spacing-unit 0; flex: 1;
}
.post-list {
margin-left: 0; list-style: none; p { margin-bottom: $spacing-unit; }
}
.post-meta {
font-size: $small-font-size; color: $grey-color;
}
.post-link {
display: block;
}
/**
* Social */
.social-media-sentence {
a { white-space: nowrap; } > span { &::after { content: ","; } &:last-child { &::before { content: "and "; } &::after { content: ""; } } }
}
/**
* Home */
.home-content {
margin-bottom: $spacing-unit * 2; max-width: #{$home-content-width}; width: -webkit-calc(100% - (#{$spacing-unit})); width: calc(100% - (#{$spacing-unit}));
}
@include media-query($on-laptop) {
.home-content { width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2)); }
}
.home-col-wrapper {
@include relative-font-size(0.9375); color: $grey-color; margin-left: -$spacing-unit / 2; @extend %clearfix;
}
.home-col {
float: left; margin-bottom: $spacing-unit / 2; padding-left: $spacing-unit / 2;
}
.home-col-1, .home-col-2 {
width: -webkit-calc(50% - (#{$spacing-unit} / 2)); width: calc(50% - (#{$spacing-unit} / 2));
}
@include media-query($on-laptop) {
.home-col-1, .home-col-2 { width: -webkit-calc(50% - (#{$spacing-unit} / 2)); width: calc(50% - (#{$spacing-unit} / 2)); }
}
@include media-query($on-palm) {
.home-col { float: none; width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2)); }
}
/**
* Posts */
.post img {
margin-bottom: $spacing-unit * 2; @include media-query($on-palm) { margin-bottom: $spacing-unit; }
}
.post-header {
margin-bottom: $spacing-unit; @include media-query($on-palm) { margin-bottom: $spacing-unit / 2; }
}
.post-title {
@include relative-font-size(2.625); letter-spacing: -1px; line-height: 1; @include media-query($on-laptop) { @include relative-font-size(2.25); }
}
.post-content {
margin-bottom: $spacing-unit; @include relative-font-size(1.1); font-weight: 300; @include media-query($on-palm) { @include relative-font-size(1); } h2, h3, h4 { margin-top: $spacing-unit; @include media-query($on-palm) { margin-top: $spacing-unit; } } h2 { @include relative-font-size(2); @include media-query($on-laptop) { @include relative-font-size(1.75); } } h3 { @include relative-font-size(1.625); @include media-query($on-laptop) { @include relative-font-size(1.375); } } h4 { @include relative-font-size(1.25); @include media-query($on-laptop) { @include relative-font-size(1.125); } }
}
/**
* Portfolio */
.portfolio-grid {
display: flex; flex-flow: row wrap; justify-content: space-between; max-width: 280vh;
}
.portfolio-item {
margin-bottom: $spacing-unit / 2; width: -webkit-calc(50% - (#{$spacing-unit} / 2)); width: calc(50% - (#{$spacing-unit} / 2)); a { color: $text-color; display: block; } img { -webkit-backface-visibility: hidden; // Fixes weird chrome size flicker bug -moz-backface-visibility: hidden; backface-visibility: hidden; width: 100%; transition: opacity $link-transition-speed * 2 ease-out; -webkit-transition: opacity $link-transition-speed * 2 ease-out; -moz-transition: opacity $link-transition-speed * 2 ease-out; -o-transition: opacity $link-transition-speed * 2 ease-out; } &:hover, &:focus { img { opacity: 0.8; } .portfolio-img-wrapper { background-color: black; } }
}
@include media-query($on-laptop) {
.portfolio-item { width: 100%; }
}
.portfolio-img-wrapper {
margin-bottom: $spacing-unit / 4; background-color: $grey-color-light; transition: background-color $link-transition-speed * 2 ease-out; -webkit-transition: background-color $link-transition-speed * 2 ease-out; -moz-transition: background-color $link-transition-speed * 2 ease-out; -o-transition: background-color $link-transition-speed * 2 ease-out;
}