/**
* Site header */
.site-header {
// border-top: 5px solid $grey-color-dark; border-bottom: 1px solid $grey-color-light; box-shadow: 0px 3px 11px 1px rgba(0,0,0,0.08); min-height: $spacing-unit * 1.865; // Positioning context for the mobile navigation icon position: relative;
}
.site-title {
@include relative-font-size(1.625); font-weight: 300; line-height: $base-line-height * $base-font-size * 2.25; letter-spacing: -1px; margin-bottom: 0; float: left; &, &:visited { color: $grey-color-dark; } img { width: $base-line-height * $base-font-size; padding: 0 10px 0 0; }
}
.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: $grey-color; line-height: $base-line-height; // Gaps between nav items, but not on the last one &:not(:last-child) { margin-right: 20px; } &:hover { color: $text-color; } } @include media-query($on-palm) { position: absolute; top: 9px; right: $spacing-unit / 2; background-color: $background-color; border: 1px solid $grey-color-light; border-radius: 5px; 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 { 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; } }
}
/**
-
Back to top arrow
*/ back-to-top {
overflow: hidden; z-index: 999; cursor: pointer; -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); position: fixed; bottom: 50px; right: 50px; background-color: transparent; color: #555; text-align: center; font-size: 30px; text-decoration: none; display: none; &:hover { color: #000; font-size: 35px; bottom: 47px; right: 47px; }
}
/**
-
Site footer
*/ .site-footer {
border-top: 1px solid $grey-color-light; padding: $spacing-unit 0;
}
.footer-heading {
@include relative-font-size(1.125); margin-bottom: $spacing-unit / 2;
}
.contact-list, .social-media-list {
list-style: none; margin-left: 0;
}
.footer-col-wrapper {
@include relative-font-size(0.9375); color: $grey-color; margin-left: -$spacing-unit / 2; @extend %clearfix;
}
.footer-col {
float: left; margin-bottom: $spacing-unit / 2; padding-left: $spacing-unit / 2;
}
.footer-col-1 {
width: -webkit-calc(30% - (#{$spacing-unit} / 2)); width: calc(30% - (#{$spacing-unit} / 2));
}
.footer-col-2 {
width: -webkit-calc(30% - (#{$spacing-unit} / 2)); width: calc(30% - (#{$spacing-unit} / 2));
}
.footer-col-3 {
width: -webkit-calc(40% - (#{$spacing-unit} / 2)); width: calc(40% - (#{$spacing-unit} / 2));
}
@include media-query($on-laptop) {
.footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (#{$spacing-unit} / 2)); width: calc(50% - (#{$spacing-unit} / 2)); } .footer-col-3 { width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2)); }
}
@include media-query($on-palm) {
.footer-col { float: none; width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2)); }
}
/**
-
Page content
*/ .page-content {
padding: $spacing-unit 0; flex: 1 0 auto;
}
.page-heading {
@include relative-font-size(2);
}
.post-list-heading {
@include relative-font-size(1.75);
}
.post-list {
margin-left: 0; list-style: none; > li { margin-bottom: $spacing-unit; }
}
.post-meta {
font-size: $small-font-size; color: $grey-color;
}
.post-link {
display: block; @include relative-font-size(1.5);
}
.post-category {
display: inline-block; padding: 5px; border-radius: 7px; min-width: 20px; margin: 5px; color: #fff; background: $grey-color-dark; position: relative; text-decoration: none; &, &:hover, &:visited { color: #fff; }
}
.timeline-wrapper {
position: relative;
}
.timeline {
padding: 5px; border-radius: 10px; margin: 15px 5px; width: 100%; display: grid; grid-template-columns: 180px 1fr; @include media-query($on-palm) { display: inline; }
}
.timeline-date {
color: $grey-color; font-style: italic; padding: 8px 15px;
}
.timeline-container {
box-shadow: 0px 3px 11px 1px rgba(0,0,0,0.08); padding: 8px 15px; margin-right: 20px;
}
.timeline-content {
display: table; width: 100%;
}
/**
-
Posts
*/ .post-header {
margin-bottom: $spacing-unit;
}
.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); } text-align: center;
}
.post-content {
margin-bottom: $spacing-unit; h1 { @include relative-font-size(2.25); @include media-query($on-laptop) { @include relative-font-size(2); } &:before { content: '>'; color: $before-header-color; padding-right: 0.5em; } } h2 { @include relative-font-size(2); @include media-query($on-laptop) { @include relative-font-size(1.75); } &:before { content: '≫'; color: $before-header-color; padding-right: 0.5em; } } h3 { @include relative-font-size(1.625); @include media-query($on-laptop) { @include relative-font-size(1.375); } &:before { content: '⋙'; color: $before-header-color; padding-right: 0.5em; } } h4 { @include relative-font-size(1.25); @include media-query($on-laptop) { @include relative-font-size(1.125); } }
}
.post-card {
// border: solid #fafafa; padding: 5px 15px; margin: 5px 5px; box-shadow: 0px 3px 11px 1px rgba(0,0,0,0.08); border-radius: 5px; min-width: 200px; display: inline-block;
}
.post-date {
display: inline-block; color: $grey-color; padding: 0 15px 0 0; font-style: italic;
}
.post-name {
display: inline-block; a { font-size: 1.2em; }
}