/**
* Site header */
.site-header {
border-top: 5px solid $grey-color-dark; border-bottom: 1px solid $grey-color-light; min-height: $spacing-unit * 1.865; line-height: $base-line-height * $base-font-size * 2.25; // Positioning context for the mobile navigation icon position: relative;
}
.site-nav {
position: absolute; top: 9px; right: $spacing-unit / 2; background-color: $background-color; border: 1px solid $grey-color-light; border-radius: 5px; text-align: right; .nav-trigger { display: none; } .menu-icon { float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; > svg path { fill: $grey-color-dark; } } label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; } input ~ .trigger { clear: both; display: none; } input:checked ~ .trigger { display: block; padding-bottom: 5px; } .page-link { color: $text-color; line-height: $base-line-height; display: block; padding: 5px 10px; // Gaps between nav items, but not on the last one &:not(:last-child) { margin-right: 0; } margin-left: 20px; } @media screen and (min-width: $on-medium) { position: static; float: right; border: none; background-color: inherit; label[for="nav-trigger"] { display: none; } .menu-icon { display: none; } input ~ .trigger { display: block; } .page-link { display: inline; padding: 0; &:not(:last-child) { margin-right: 20px; } margin-left: auto; } }
}
/**
* Site footer */
.site-footer {
padding: $spacing-unit / 1.5 0;
}
.footer-heading {
@include relative-font-size(1.125); margin-bottom: $spacing-unit / 2;
}
.p-name {
@media (max-width: 500px) { @include relative-font-size(0.9); }
}
.u-email {
@media (max-width: 500px) { @include relative-font-size(0.9); }
}
.contact-list, .social-media-list {
list-style: none; margin-left: 0;
}
/**
* Page content */
.page-content {
padding: $spacing-unit 0; flex: 1 0 auto;
}
.page-heading {
@include relative-font-size(2);
}
.home-title {
margin-top: -10px;
}
.home-heading {
font-weight: 1000; color: lighten($text-color, 15%); @media (max-width: 500px) { margin-top: 20px; @include relative-font-size(1.7); } @include relative-font-size(2.2);
}
.home-sub-heading {
margin-top: -0.6rem; color: lighten($text-color, 25%); @media (max-width: 500px) { @include relative-font-size(0.8); } @include relative-font-size(1);
}
.post-list {
margin-top: 2.5rem; margin-left: 0; list-style: none; li { margin-bottom: $spacing-unit / 12; }
}
.post-year {
margin-top: 2rem; margin-bottom: 0.25rem; font-weight: 700; color: lighten($text-color, 15%); @media (max-width: 500px) { @include relative-font-size(1.2); } @include relative-font-size(1.5);
}
.post-meta {
display: inline-block; min-width: 60px; @media (max-width: 500px) { @include relative-font-size(0.8); } @include relative-font-size(1); color: lighten($text-color, 25%);
}
.post-link-layout {
margin-left: 10%; display: inline; @media (max-width: 500px) { @include relative-font-size(1); } @include relative-font-size(1.2);
}
.black-link {
color: $text-color; text-decoration: none; &:hover { color: $text-color; text-decoration: underline; }
}
.post-back {
margin-bottom: 20px; color: lighten($text-color, 25%);
}
/**
* Posts */
.post-header {
margin-bottom: $spacing-unit;
}
.post-title, .post-content h1 {
@include relative-font-size(2.2); line-height: 1.3; font-weight: 1000; margin-top: -0.5rem; @media (max-width: 500px) { @include relative-font-size(1.8); } @media screen and (min-width: $on-large) { @include relative-font-size(2.2); }
}
.post-content {
margin-top: 3.2rem; margin-bottom: $spacing-unit; h2 { @include relative-font-size(1.75); @media screen and (min-width: $on-large) { @include relative-font-size(2); } } h3 { @include relative-font-size(1.375); @media screen and (min-width: $on-large) { @include relative-font-size(1.625); } } h4 { @include relative-font-size(1.125); @media screen and (min-width: $on-large) { @include relative-font-size(1.25); } }
}
.social-media-list {
margin-top: -1rem; display: flex; @include relative-font-size(1); li { float: left; a { padding-right: $spacing-unit / 5; } }
}
/**
* Grid helpers */
@media screen and (min-width: $on-large) {
.one-half { width: -webkit-calc(50% - (#{$spacing-unit} / 2)); width: calc(50% - (#{$spacing-unit} / 2)); }
}
/**
* About Page */
.about-page {
display: inline-block; .about-header { display: flex; flex-direction: row; flex-wrap: wrap; .about-avatar { padding: 1px; border: 1px solid $grey-color-light; width: 10rem; height: 10rem; margin: 0 2rem 0 0; } .about-info { align-self: center; .about-your-name { display: flex; flex-direction: row; margin-top: 1rem; @include relative-font-size(1.5); } .about-description { margin-top: -0.6rem; @include relative-font-size(1); color: lighten($text-color, 25%); } } } .about-content { margin-top: 2rem; }
}