102 lines
1.5 KiB
SCSS
102 lines
1.5 KiB
SCSS
///////////////////
|
|
// //
|
|
// HEADER //
|
|
// //
|
|
///////////////////
|
|
|
|
.main-header-full {
|
|
position: fixed;
|
|
z-index: 10000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
background: $dark-polar;
|
|
height: 3em;
|
|
line-height: 3em;
|
|
box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.main-header {
|
|
.avatar {
|
|
height: 2rem;
|
|
margin: auto 0.5rem auto auto;
|
|
border-radius: 35%;
|
|
|
|
@include breakpoint(tablet) {
|
|
display: none;
|
|
}
|
|
|
|
@include breakpoint(mobile) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.avatar.hidden {
|
|
display:none;
|
|
}
|
|
|
|
@include header-title-mobile
|
|
|
|
@include breakpoint(laptop) {
|
|
@include header-title-full
|
|
}
|
|
|
|
@include breakpoint(desktop) {
|
|
@include header-title-full
|
|
}
|
|
|
|
article {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.title {
|
|
}
|
|
|
|
nav.full {
|
|
|
|
@include breakpoint(mobile) {
|
|
display: none;
|
|
}
|
|
|
|
@include breakpoint(tablet) {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
margin: 0 auto 0 auto;
|
|
padding: 0 0 0 3rem;
|
|
justify-content: flex-end;
|
|
|
|
li {
|
|
margin-right: .5rem;
|
|
@include breakpoint(desktop) {
|
|
margin-right: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include inline-list;
|
|
|
|
.rss-icon {
|
|
max-width: 18%;
|
|
}
|
|
}
|
|
|
|
nav.mobile {
|
|
@include breakpoint(desktop) {
|
|
display: none;
|
|
}
|
|
|
|
@include breakpoint(laptop) {
|
|
display: none;
|
|
}
|
|
}
|
|
@include breakpoint(tablet) {
|
|
@include mobile-nav;
|
|
}
|
|
@include breakpoint(mobile) {
|
|
@include mobile-nav;
|
|
}
|
|
}
|