script header visible
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 6s
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 6s
This commit is contained in:
parent
430fd243fe
commit
08ebf7fc9e
11 changed files with 112 additions and 55 deletions
|
|
@ -1,6 +1,7 @@
|
|||
$desktop: "screen and (min-width: 1200px)";
|
||||
$medium: "screen and (max-width: 1080px)";
|
||||
$medium-up: "screen and (min-width: 1080px)";
|
||||
|
||||
$small-up: "screen and (min-width: 720px)";
|
||||
$small: "screen and (max-width: 720px)";
|
||||
$x-small: "screen and (max-width: 560px)";
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ body{
|
|||
|
||||
main{
|
||||
flex-grow: 1;
|
||||
margin-top: var(--header-h);
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,21 +8,26 @@
|
|||
}
|
||||
|
||||
#site-header {
|
||||
position: fixed;
|
||||
left: var(--padding-body);
|
||||
top: 0px;
|
||||
|
||||
z-index: 900;
|
||||
--gap: 3ch;
|
||||
|
||||
width: calc(100vw - var(--padding-body)*2);
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
// border-bottom: var(--border-light);
|
||||
padding: 0 var(--padding-body);
|
||||
|
||||
.site-header__inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap);
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
|
|
@ -71,3 +76,13 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#site-header.is-visible{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
& ~ main{
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,14 +100,17 @@ body {
|
|||
}
|
||||
}
|
||||
#site-header {
|
||||
position: fixed;
|
||||
left: var(--padding-body);
|
||||
top: 0px;
|
||||
z-index: 900;
|
||||
--gap: 3ch;
|
||||
width: calc(100vw - var(--padding-body) * 2);
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -152,6 +155,14 @@ body {
|
|||
fill: var(--grey-200) !important;
|
||||
}
|
||||
|
||||
#site-header.is-visible {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
#site-header.is-visible ~ main {
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
|
|
@ -540,14 +551,17 @@ button:disabled {
|
|||
}
|
||||
}
|
||||
#site-header {
|
||||
position: fixed;
|
||||
left: var(--padding-body);
|
||||
top: 0px;
|
||||
z-index: 900;
|
||||
--gap: 3ch;
|
||||
width: calc(100vw - var(--padding-body) * 2);
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -592,6 +606,14 @@ button:disabled {
|
|||
fill: var(--grey-200) !important;
|
||||
}
|
||||
|
||||
#site-header.is-visible {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
#site-header.is-visible ~ main {
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
|
||||
#site-menu {
|
||||
position: fixed;
|
||||
width: var(--menu-w);
|
||||
|
|
@ -774,7 +796,6 @@ body {
|
|||
}
|
||||
body main {
|
||||
flex-grow: 1;
|
||||
margin-top: var(--header-h);
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
|
|
@ -803,23 +824,23 @@ body main {
|
|||
font-size: var(--fs-medium);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page-enquete .hero {
|
||||
.page-enquete #hero {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
margin: calc(var(--spacing) * 3) 0;
|
||||
}
|
||||
.page-enquete .hero figcaption {
|
||||
.page-enquete #hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.page-enquete .hero.hero-video figure {
|
||||
.page-enquete #hero.hero-video figure {
|
||||
width: 100%;
|
||||
}
|
||||
.page-enquete .hero.hero-video figure img {
|
||||
.page-enquete #hero.hero-video figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
-o-object-fit: cover;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
// HER0 ----------------------------------------------------
|
||||
|
||||
.hero{
|
||||
#hero{
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body)*-1);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue