/**
* Site header */
.site-header {
border-bottom: 1px solid $grey-color-light; min-height: $header-height; // Positioning context for the mobile navigation icon position: relative;
}
.site-title {
@include relative-font-size(1.625); font-weight: bold; line-height: $base-line-height * $base-font-size * 2.25; letter-spacing: -1px; margin-bottom: 0; float: left; &, &:visited { color: $text-color; }
}
.site-logo {
height: 30px; width: auto;
}
.site-nav {
float: right; line-height: $base-line-height * $base-font-size * 2.25; .nav-trigger { display: none; } .menu-icon { display: none; } .page-link { color: $text-color; line-height: $base-line-height; font-weight: bold; // Gaps between nav items, but not on the last one &:not(:last-child) { margin-right: 20px; } } @include media-query($on-palm) { position: absolute; top: 9px; right: $spacing-unit / 2; background-color: $background-color; border: 1px solid $grey-color-light; text-align: right; label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; } .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; > svg path { fill: $grey-color-dark; } } input ~ .trigger { clear: both; display: none; } input:checked ~ .trigger { display: block; padding-bottom: 5px; } .page-link { display: block; padding: 5px 10px; &:not(:last-child) { margin-right: 0; } margin-left: 20px; } }
}
.pagination {
text-align: center; margin: $spacing-unit 0; div { display: inline-block; width: 6px; height: 100%; } a:hover { text-decoration: none; } & > a { color: $grey-color-dark; } .disabled { color: $grey-color-light; } .fa-caret-left, .fa-caret-right { transform: translateY(2px); } .page-number { color: $grey-color !important; @include relative-font-size(.8); } .previous, .next { @include relative-font-size(1.25); } .previous { margin-right: $spacing-unit; } .next { margin-left: $spacing-unit; }
}
/**
* Site footer */
.site-footer {
background: $background-dark; padding: $spacing-unit 0; height: $footer-height; text-align: center;
}
.contact-icons {
list-style: none; margin: 0; text-align: center; li > a { border: 0; height: 100%; width: 100%; } li, li + li { margin: 0 7px; padding: 0; text-align: center; display: inline-block; } li:first-child { margin-left: 0; } li:last-child { margin-right: 0; } @include media-query($on-palm) { li:first-child, li:last-child { margin: 0 7px; } } .icon { padding: 0; }
}
.page-content .icon {
color: #111;
}
.landing-content .contact-icons {
@include media-query($on-palm) { text-align: left; }
}
.landing-content .contact-icons a, .site-footer .contact-icons a {
color: #FFF; &:hover { color: $pastel-red; } .keybase-icon { fill: #FFF; &:hover { fill: $pastel-red; } } }
/**
* About/landing content */
.landing-content {
padding: $spacing-unit 0; min-height: $content-height; background: $background-dark; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; a { color: #EEE; &:hover { color: $pastel-red; } }
}
contact-content {
min-height: $content-height; background: #FFF; .contact { transform: translateY(-50px); } .contact-icons .icon { color: #111; &:hover { color: $pastel-red; } } .contact-icons .icon .keybase-icon { fill: #111; &:hover { fill: $pastel-red; } }
}
.made-by {
font-size: .85em; color: #AAA; vertical-align: middle; -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 3s; /* Firefox < 16 */ -ms-animation: fadein 3s; /* Internet Explorer */ -o-animation: fadein 3s; /* Opera < 12.1 */ animation: fadein 3s; a { color: #EEE; } .heart { color: red; display: inline; height: 1em; width: 1em; vertical-align: -0.1em; }
}
.about, .contact {
p, ul { font-size: 18px; }
}
.about, .splash { color: #AAAAAA; }
splash {
min-height: 100vh; padding: 0;
}
/**
* Page content */
.page-content {
padding: $spacing-unit 0; min-height: $content-height; & > .wrapper > h1 { margin-top: $spacing-unit / 2; }
}
.page-heading {
@include relative-font-size(1.25);
} @for $i from 1 through 15 {
.blog li:nth-child(#{$i}), .contact .contact-icons li:nth-child(#{$i}), .splash p:nth-child(#{$i}), .splash .contact-icons li:nth-child(#{$i}), .landing-content .about p:nth-child(#{$i}), .pagination span:nth-child(#{$i}) { -webkit-animation: fadein .5s + $i/2; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein .5s + $i/2; /* Firefox < 16 */ -ms-animation: fadein .5s + $i/2; /* Internet Explorer */ -o-animation: fadein .5s + $i/2; /* Opera < 12.1 */ animation: fadein .5s + $i/2; }
}
.post {
-webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein .5s; /* Firefox < 16 */ -ms-animation: fadein .5s; /* Internet Explorer */ -o-animation: fadein .5s; /* Opera < 12.1 */ animation: fadein .5s;
}
.contact a, .post a {
color: $text-color; font-weight: bold; border-bottom: 1px solid $grey-color; &:hover { color: $grey-color; text-decoration: none; }
}
.post-list {
margin-left: 0; list-style: none; > li h2 { margin: 0 0 $spacing-unit / 4 0; line-height: 1em; }
}
.post-meta {
font-size: $small-font-size; color: $grey-color;
}
.post-author {
font-style: italic;
}
.post-link {
display: block; @include relative-font-size(1.5);
}
/**
* Posts */
.post-header {
margin-bottom: $spacing-unit;
}
.post-title {
margin-top: $spacing-unit / 2; @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; h1 { @include relative-font-size(2); @include media-query($on-laptop) { @include relative-font-size(1.8); } display: block; border-bottom: 1px solid #eaecef; } h2 { @include relative-font-size(1.85); @include media-query($on-laptop) { @include relative-font-size(1.7); } } 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); } }
}
.fa-external-link {
font-size: .7rem; margin-left: 5px; margin-right: 2px; color: lighten($grey-color-dark, 10%);
}
.tags .fa-tags { color: $grey-color-dark; }
.tag {
@include relative-font-size(.8); color: $text-color; background-color: $grey-color-light; font-weight: normal; padding: 2px 5px; &:hover { color: $grey-color-light; background-color: $grey-color-dark; text-decoration: underline; }
} .tag-count {
margin-left: 3px;
}