140 lines
2.0 KiB
SCSS
140 lines
2.0 KiB
SCSS
|
// Site header
|
||
|
|
|
||
|
|
.site-header {
|
||
|
|
padding: 1em;
|
||
|
|
|
||
|
|
&.featured-image {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
min-height: 90vh;
|
||
|
|
|
||
|
|
.site-branding-container {
|
||
|
|
margin-bottom: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include media(tablet) {
|
||
|
|
margin: 0;
|
||
|
|
padding: 3rem 0;
|
||
|
|
|
||
|
|
&.featured-image {
|
||
|
|
min-height: 100vh;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Site branding
|
||
|
|
|
||
|
|
.site-branding {
|
||
|
|
|
||
|
|
color: $color__text-light;
|
||
|
|
-webkit-hyphens: auto;
|
||
|
|
-moz-hyphens: auto;
|
||
|
|
-ms-hyphens: auto;
|
||
|
|
hyphens: auto;
|
||
|
|
position: relative;
|
||
|
|
word-wrap: break-word;
|
||
|
|
|
||
|
|
@include media(tablet) {
|
||
|
|
margin: 0 $size__site-margins;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Site logo
|
||
|
|
|
||
|
|
.site-logo {
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
z-index: 999;
|
||
|
|
margin-bottom: calc(.66 * #{$size__spacing-unit});
|
||
|
|
|
||
|
|
@include media(tablet) {
|
||
|
|
margin-bottom: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: calc(100% + (1.25 * #{$size__spacing-unit}));
|
||
|
|
top: 4px; // Accounts for box-shadow widths
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-logo-link {
|
||
|
|
border-radius: 100%;
|
||
|
|
box-sizing: content-box;
|
||
|
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||
|
|
display: block;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: box-shadow $background_transition ease-in-out;
|
||
|
|
|
||
|
|
.custom-logo {
|
||
|
|
min-height: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:active,
|
||
|
|
&:focus {
|
||
|
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include media(tablet) {
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Site title
|
||
|
|
|
||
|
|
.site-title {
|
||
|
|
margin: auto;
|
||
|
|
display: inline;
|
||
|
|
color: $color__text-main;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: $color__text-main;
|
||
|
|
|
||
|
|
&:link,
|
||
|
|
&:visited {
|
||
|
|
color: $color__text-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: $color__text-hover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.featured-image & {
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
@include media(tablet) {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* When there is no description set, make sure navigation appears below title. */
|
||
|
|
+ .main-navigation {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include media(tablet) {
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:not(:empty) + .site-description:not(:empty):before {
|
||
|
|
content: "\2014";
|
||
|
|
margin: 0 .2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Site description
|
||
|
|
|
||
|
|
.site-description {
|
||
|
|
|
||
|
|
display: inline;
|
||
|
|
color: $color__text-light;
|
||
|
|
font-weight: normal;
|
||
|
|
margin: 0;
|
||
|
|
}
|