.masthead {
padding: var(--spacer) 0; margin-bottom: var(--spacer-3);
}
.avatar {
display: none;
}
.masthead-title {
font-size: 120%; font-weight: bold; color: var(--heading-color); &:hover, &:focus { color: var(--heading-color); text-decoration: none; }
}
.masthead-tagline {
color: var(--body-color-light);
}
.nav {
margin-top: var(--spacer);
} .nav-list {
list-style: none; margin: 0; padding: 0;
} .nav-item {
display: inline-block; margin-right: 1em; &:before { content: "/"; } a { @include alternative-link-style(); }
}
@media screen and (min-width: $lg-screen) {
.masthead { text-align: center; margin: 0; padding: 0; position: relative; top: 50%; transform: translateY(-50%); } .avatar { display: block; width: 25%; border-radius: 50%; margin: 0 auto var(--spacer-2) auto; } .masthead-title { display: block; font-size: 200%; } .masthead-tagline { display: block; font-size: 100%; } .nav { margin-top: var(--spacer-2); } .nav-item { display: block; margin-right: 0; margin-bottom: var(--spacer); font-size: 120%; &:before { content: none; } a { border-bottom: 2px solid var(--body-color); } }
}