//// /// Header ////
// Site Header //————————
- // Site header
-
general container
.site-header {
position: relative; margin-bottom: $base-line*2; padding: 0 1em; text-align: center; color: #fff; z-index: 0;
}
- // Site header top
-
logo and menu
.site-header-top {
display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: $base-line/2 $base-line; width: 100%; background: transparent; @media #{$medium-up} { flex-direction: row; }
}
- // Site header hero
-
class on general container for hero header
.site-header-hero {
padding: 0; background-size: cover; background-position: center center; background: $color-grey; background-image: linear-gradient(to top, $color-grey 0%, $color-grey-dark 100%); .wrapper { display: flex; justify-content: center; align-items: center; min-height: 40vmin; } a { text-decoration: none; color: currentColor; &:visited { color: currentColor; } } &::after { position: absolute; top: 0; left: 0; bottom: 0; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: -1; opacity: 1; transition: opacity 1500ms ease-in-out; @at-root { .site-header.b-lazy::after { opacity: 1; } } }
}
// Site header img TAG for responsives images .site-header-background {
position: absolute; top: 0; left: 0; object-fit: cover; z-index: -1; width: 100%; height: 100%; transition: opacity 200ms ease-in-out;
}
- // Site title
-
container for a text
.site-title {
display: block; margin: 0; font-size: $base-em * $ms3; line-height: 1; color: currentColor; text-decoration: none;
}
- // Site title hero
-
class on site-title for hero title
.site-title-hero {
display: inline-block; padding: $base-line/2; font-size: $title1; font-weight: 300;
}
- // Site title link
-
class when site-title is a link (inside pages)
.site-title-link {
color: currentColor; text-decoration: none; &,&:visited { color: currentColor; }
}
- // Site information
-
scope site-title + site-logo
.site-information {
margin: 0;
}
// Site slogan .site-slogan {
text-align: center; color: #fff;
}
- // Exergue
-
zone just after the header
.exergue {
margin-top: -2*$base-line; padding: $base-line; width: 100%; text-align: center; color: #fff; background: $color-grey-dark; small { display: block; clear: both; width: 100%; } a { color: #fff; &:hover { text-decoration: none; } }
}