src/style/snippets/_header.scss
@import "./colors";
header {
padding: 0.5em 0.5em 0.5em 0.7em;
border-bottom: $demarcation-line;
margin-bottom: .4em;
background-image: url('../images/bg.png');
background-repeat: no-repeat;
background-position: 25%;
box-shadow: 0 .1em 0.4em -.2em $shadow-color;
color: $header-color;
min-height: 3em;
}
.header-title {
float: left;
}
header nav {
float: right;
}
header .debug {
font-size: small;
float:right;
}
header h1 {
font-size: 1.9em;
margin-bottom: 0;
margin-top: 0;
}
header em {
color: $color;
}
header a {
text-decoration: none;
color: inherit;
}
nav a.underline-on-hover:hover {
text-decoration: underline;
}
nav a.underline-on-hover:active {
text-decoration: underline;
}
nav span.underline-on-hover:hover {
cursor: pointer;
text-decoration: underline;
}
nav span.underline-on-hover:active {
text-decoration: underline;
}
nav .icon {
display: inline-block;
width: 3.6em;
height: 2.2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0 0.1em 0 0.1em;
text-align: center;
font-size: 0.9em;
cursor: pointer;
}
nav .nav-icon {
font-size: 2.2em;
}
nav .active {
text-decoration: underline;
}
nav div.active:hover {
cursor: default;
color: inherit;
}
@media screen and (max-width: 639px) {
header em {
display: block;
font-size: 0.5em;
}
}
@media screen and (max-width: 480px) {
header {
background-image: none;
}
header nav {
float: none;
}
}