/**
* Site header */
.site-header {
height: 100px; // line-height: 70px; background-color: var(--header-background-color); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; // Fancy affect -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); // Positioning context for the mobile navigation icon position: relative; & > .wrapper { width: var(--header-content-width); @include media-query($on-medium) { width: 792px; } @include media-query($on-small) { width: 90%; } }
}
.site-header-container {
margin-bottom: 0; float: left; height: 100px; line-height: 100px; max-width: 45%;
}
.site-header-text {
display: inline-block; vertical-align: middle; line-height: normal;
}
.site-title {
color: $site-header-text-color !important; // !important avoids normal link styling! font-size: $site-title-font-size; font-weight: $heavy-font-weight; letter-spacing: -1px; :hover { opacity: $link-hover-opacity; text-decoration: none; } @include media-query($on-small) { font-size: $site-title-small-font-size; }
}
.site-description {
color: $site-header-text-color !important; // !important avoids normal link styling! margin-top: 10px; margin-bottom: 0; font-size: $small-font-size; @include media-query($on-small) { display: none; }
}
.site-nav {
float: right; line-height: 100px; font-size: $nav-font-size; a:hover { opacity: $link-hover-opacity; text-decoration: none; } .page-link { color: $site-header-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-palm) { .page-link { padding: 20px 0; &:not(:last-child) { margin-right: 0; } margin-left: 20px; } }
}
/**
* Site footer */
.site-footer {
position: absolute; bottom: 0; width: 100%; // height: 80px; line-height: 18px; padding: 10px 0; font-size: $site-footer-font-size; color: var(--footer-text-color); background-color: var(--footer-background-color); text-align: center; border-top: 1px solid var(--grey-color-light);
}
.social-icons {
text-align: center; margin-bottom: 0.65em;
}
.social-icon {
font-size: $title-small-font-size; display: inline-block; padding: 0 0.35em; &, &:visited { color: var(--grey-color-dark); }
}
/**
* Page content */
.page-content {
padding-top: 20px; @include media-query($on-medium) { padding-top: 10px; } @include media-query($on-small) { padding-top: 10px }
}
.post-list {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; &:after { display: block; width: 30%; content: ""; } > article { float: left; width: 30%; margin-bottom: 50px; @include media-query($on-small) { width: 100%; } } .post-title { font-size: $title-medium-font-size; line-height: 1.125; letter-spacing: .004em; } .post-content > p { font-size: $small-font-size; } .post-link:hover { text-decoration: none; }
}
.post-lead {
font-size: $lead-font-size; line-height: 1.5; letter-spacing: .017em; @include media-query($on-medium) { font-size: $lead-small-font-size; } @include media-query($on-small) { font-size: $lead-small-font-size; }
}
.post-meta {
font-size: $meta-font-size; line-height: 1.19048; font-weight: 400; letter-spacing: .011em; color: $grey-color; margin-top: .4em; @include media-query($on-medium) { font-size: $meta-small-font-size; line-height: 1.21053; letter-spacing: .012em; } @include media-query($on-small) { font-size: $meta-small-font-size; line-height: 1.21053; letter-spacing: .012em; } & + .post-title { margin-top: .4em; }
}
.post-link {
&, &:visited { color: var(--text-color); }
}
.post-continue {
a { text-decoration: none; color: var(--link-color); &:hover { text-decoration: underline; } }
}
// .post-continue { // a { // padding: 8px 15px; // text-decoration: none; // // &, // &:visited { // color: $grey-color; // background-color: var(–grey-color-light); // } // // &:hover { // color: white; // background-color: var(–link-color); // } // } // }
/**
* Posts */
.post {
margin-left: auto; margin-right: auto; width: 100%; @include media-query($on-small) { width: 95%; }
}
.post-header {
margin-bottom: $spacing-unit;
}
.post-title {
font-size: $title-font-size; line-height: 1.1; font-weight: 900; letter-spacing: 0em; margin-bottom: 0px; @include media-query($on-medium) { font-size: $title-medium-font-size; line-height: 1.125; letter-spacing: .004em; } @include media-query($on-small) { font-size: $title-small-font-size; line-height: 1.14815; letter-spacing: .008em; }
}
.post-content {
margin-bottom: $spacing-unit; // First paragraph is the lead // p:first-of-type { // font-size: $lead-font-size; // line-height: 1.5; // font-weight: 500; // letter-spacing: .017em; // // @include media-query($on-medium) { // font-size: $lead-small-font-size; // } // // @include media-query($on-small) { // font-size: $lead-small-font-size; // } // } // Headers h1 { font-size: $title-font-size; line-height: 1.09375; font-weight: 800; letter-spacing: .011em; @include media-query($on-medium) { font-size: $title-small-font-size; line-height: 1.1073; letter-spacing: .012em; } } h2 { font-size: $subtitle-font-size; line-height: 1.20849; font-weight: 700; letter-spacing: .015em; @include media-query($on-medium) { font-size: $subtitle-small-font-size; line-height: 1.22739; letter-spacing: .016em; } } // TODO: Revise h3 h3 { font-size: $lead-font-size; line-height: 1.22739; font-weight: 600; letter-spacing: .014em; @include media-query($on-medium) { font-size: $lead-small-font-size; line-height: 1.18182; letter-spacing: .015em; } }
}
/**
* Pagination */
.pagination {
padding: $spacing-unit / 2 0; border-top: 1px solid var(--grey-color-light); border-bottom: 1px solid var(--grey-color-light); text-align: center; @extend %clearfix; a { &, &:visited { color: $grey-color; } } .previous { float: left; } .next { float: right; }
}
/**
* Codefund Ads */
:root {
--ad-background-color: #ededed; --ad-text-color: #777777; --ad-strong-text-color: #212121; --ad-powered-by-color: #909090;
}
@media (prefers-color-scheme: dark) {
:root { --ad-background-color: rgba(0, 0, 0, 0.3); --ad-text-color: rgba(255, 255, 255, 0.8); --ad-strong-text-color: #fafafa; --ad-powered-by-color: rgba(255, 255, 255, 0.7); }
}