publik-base-theme/static/grosboule-les-bains/_custom.scss

129 lines
1.7 KiB
SCSS

body.has-header-background {
.site-header {
background: none;
padding-bottom: 0;
}
#nav {
background: url(/assets/header:background) top center no-repeat;
background-size: cover;
}
}
#logo.has-logo a {
display: inline-block;
height: 40px;
min-width: 100px;
}
#toplinks {
box-sizing: content-box;
left: 79vw;
top: -2rem;
font-size: 90%;
width: 15vw;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 90%;
}
.site-header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
#header {
transition: all ease 0.2s;
margin-top: 2rem;
margin-bottom: 2rem;
h1 {
margin-top: 0.4rem;
a {
padding-left: 1rem;
}
}
}
}
div#nav {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: none;
text-align: right;
padding-right: 1rem;
border-bottom: 1px solid #aaa;
z-index: 10;
margin-top: 0;
& > ul {
transition: all ease 0.2s;
margin-top: 2rem;
margin-bottom: 2rem;
li > a {
font-weight: normal;
}
}
}
div#main-content-wrapper {
z-index: 0;
padding-top: 8rem;
}
body.has-picture {
div#main-content-wrapper {
padding-top: 1rem;
}
}
body.scrolled {
header #header,
div#nav > ul {
margin-top: 0;
margin-bottom: 0;
}
}
#logo a {
color: $primary-color;
font-weight: normal;
}
@media screen and ($max-mobile-viewport) {
div#nav, header {
text-align: left;
position: static;
width: auto;
padding-right: 0;
border-bottom: 0;
#logo a {
padding-left: 0;
}
}
header #header,
div#nav > ul {
margin-top: 2rem;
margin-bottom: 1rem;
}
div#main-content-wrapper {
padding-top: 0;
}
#toplinks {
right: 1vw;
left: auto;
top: -2rem;
width: auto;
}
}
div.textcell {
h1 {
padding-left: 0.7rem;
font-weight: normal;
}
}