/** * Site header */ .site-header { border-bottom: 1px solid lighten($brand-color, 15%); min-height: 56px; // Positioning context for the mobile navigation icon position: relative; } .site-search { padding-right: 10px; } .site-title { font-size: 26px; font-weight: 300; line-height: 56px; letter-spacing: -1px; margin-bottom: 0; float: left; &, &:visited { color: $grey-color-dark; } } .site-nav { float: right; line-height: 56px; .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; } } @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; .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; > svg { width: 18px; height: 15px; path { fill: $grey-color-dark; } } } .trigger { clear: both; display: none; } &:hover .trigger { display: block; padding-bottom: 5px; } .page-link { display: block; padding: 5px 10px; &:not(:last-child) { margin-right: 0; } margin-left: 20px; } } } .site-banner { width: 100%; background: $brand-color; height: 340px; color: white; .wrapper { height: 100%; background: url('../images/logo.png'); background-size: 30%; background-repeat: no-repeat; background-position: 95% center; justify-content: flex-start; } .tag-line { font-size: 2.8em; line-height: 1.1em; width: 60%; } @include media-query($on-palm) { height: 240px; .tag-line { font-size: 1.8em; } } } /** * Site footer */ .site-footer { background: $grey-color-dark; color: $grey-color-light; border-top: 1px solid $grey-color-light; padding: $spacing-unit 0; margin-top: $spacing-unit; a { color: $grey-color-very-light; } .contact-list, .social-media-list { list-style: none; margin-left: 0; li { margin-bottom: 2px; } } .footer-col-wrapper { font-size: 15px; // 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(35% - (#{$spacing-unit} / 2)); width: calc(35% - (#{$spacing-unit} / 2)); } .footer-col-2 { width: -webkit-calc(25% - (#{$spacing-unit} / 2)); width: calc(25% - (#{$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; } .page-heading { font-size: 20px; } .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; font-size: 24px; } /** * Posts */ .post-header { margin-bottom: $spacing-unit; padding-top: $spacing-unit; } .post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; @include media-query($on-laptop) { font-size: 36px; } } .post-content { margin-bottom: $spacing-unit; h2 { font-size: 32px; @include media-query($on-laptop) { font-size: 28px; } } h3 { font-size: 26px; @include media-query($on-laptop) { font-size: 22px; } } h4 { font-size: 20px; @include media-query($on-laptop) { font-size: 18px; } } } $table-of-content-width: 250px; .table-of-content { position: absolute; left: 100px; width: $table-of-content-width; } .table-of-content.affix-top { position: absolute; top: 70px; } .table-of-content.affix-bottom { position: absolute; bottom: 300; } .table-of-content.affix { position: fixed; top: 30px; } .table-of-content a.h1 { font-weight: 600; } .table-of-content a.h2 { font-weight: 400; font-size: 14px; position: relative; left: 10px; } .table-of-content a.h3 { font-size: 12px; position: relative; left: 20px; } // TODO @include media-query($on-laptop-big+$table-of-content-width) { .table-of-content { left: 20px; } } @include media-query($on-laptop-big) { .table-of-content { display: none; } } @include media-query($on-laptop) { .table-of-content { display: none; } } /* search */ input#algolia-doc-search { background: transparent url("/images/search.png") no-repeat 10px center; background-size: 16px 16px; position: relative; vertical-align: top; margin-left: 10px; padding: 0 10px; padding-left: 35px; height: 30px; margin-top: 10px; font-size: 16px; line-height: 20px; background-color: #fff; border-radius: 4px; color: #333; outline: none; width: 100px; transition: width .2s ease; box-shadow: none; border: 1px solid #ddd; } input#algolia-doc-search:focus { width: 200px; } /* Bottom border of each suggestion */ .algolia-docsearch-suggestion { border-bottom-color: $brand-color; } /* Main category headers */ .algolia-docsearch-suggestion--category-header { background-color: lighten($brand-color, 20%); } /* Highlighted search terms */ .algolia-docsearch-suggestion--highlight { color: lighten($brand-color, 10%); } /* Highligted search terms in the main category headers */ .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight { background-color: $brand-color; } /* Currently selected suggestion */ .aa-cursor .algolia-docsearch-suggestion--content { color: darken($brand-color, 10%); } .aa-cursor .algolia-docsearch-suggestion { background: ligten($brand-color, 30%); } /* For bigger screens, when displaying results in two columns */ @media (min-width: 768px) { /* Bottom border of each suggestion */ .algolia-docsearch-suggestion { border-bottom-color: lighten($brand-color, 15%); } /* Left column, with secondary category header */ .algolia-docsearch-suggestion--subcategory-column { border-right-color: lighten($brand-color, 25%); background-color: lighten($brand-color, 45%); color: darken($brand-color, 35%); } }