This commit is contained in:
Julie Blanc
parent
16d9851535
commit
53b6355baf
21 changed files with 385 additions and 132 deletions
|
|
@ -32,6 +32,7 @@
|
|||
--border-light: 1px solid var(--grey-800);
|
||||
--header-h: 80px;
|
||||
--header-h-shrinked: 50px;
|
||||
--menu-w: 420px;
|
||||
--padding-body: 26px;
|
||||
--radius-small: 4px;
|
||||
--spacing: 30px;
|
||||
|
|
@ -120,7 +121,6 @@ body {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -179,6 +179,46 @@ button:disabled {
|
|||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.btn--bold,
|
||||
.btn--bold-inline {
|
||||
display: block;
|
||||
height: calc(var(--h-block) * 1);
|
||||
border: var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: var(--fs-small);
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn--bold a,
|
||||
.btn--bold-inline a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.btn--bold {
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
.btn--bold:hover {
|
||||
background-color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.btn--bold:hover a {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn--bold-inline:hover a {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
.btn__default {
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
|
|
@ -521,7 +561,6 @@ button:disabled {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -555,20 +594,18 @@ button:disabled {
|
|||
|
||||
#site-menu {
|
||||
position: fixed;
|
||||
width: 420px;
|
||||
width: var(--menu-w);
|
||||
height: calc(100dvh - var(--header-h));
|
||||
height: calc(100vh - var(--header-h));
|
||||
top: var(--header-h);
|
||||
right: 0;
|
||||
right: calc(var(--menu-w) * -1);
|
||||
transition: right 0.3s ease-in;
|
||||
background-color: var(--color-bg);
|
||||
border-left: var(--border-light);
|
||||
padding: var(--padding-body);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
#site-menu .baseline {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
#site-menu form {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
|
|
@ -624,7 +661,7 @@ button:disabled {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
#site-menu nav ul li {
|
||||
font-size: var(--fs-medium);
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
#site-menu nav ul li a {
|
||||
display: block;
|
||||
|
|
@ -632,12 +669,29 @@ button:disabled {
|
|||
padding: 0.5em 0;
|
||||
}
|
||||
#site-menu nav ul li a:hover {
|
||||
color: var(--grey-200);
|
||||
text-decoration: underline;
|
||||
}
|
||||
#site-menu nav ul .highlight {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
body.menu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight {
|
||||
transition: opacity 0.3s ease-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
body.menu-open #site-menu {
|
||||
right: 0;
|
||||
}
|
||||
body.menu-open #menu-toggle .open {
|
||||
display: none;
|
||||
}
|
||||
body.menu-open #menu-toggle .close {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#site-footer {
|
||||
background-color: var(--dark);
|
||||
padding: calc(var(--padding-body) * 2) var(--padding-body);
|
||||
|
|
@ -645,7 +699,6 @@ button:disabled {
|
|||
#site-footer .logo {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
opacity: 0;
|
||||
}
|
||||
#site-footer .logo svg {
|
||||
width: 100px;
|
||||
|
|
@ -772,39 +825,47 @@ body main {
|
|||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.page-enquete .short {
|
||||
font-size: var(--fs-medium);
|
||||
margin: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
.page-enquete #section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
.page-enquete #section__synthese p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.page-enquete #section__synthese h4 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
-webkit-text-decoration: 1px underline var(--color-txt-light);
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
.page-enquete #banner--page {
|
||||
height: calc(100vh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||
padding-bottom: var(--padding-body);
|
||||
padding-right: var(--padding-body);
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: 240px;
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.page-enquete #banner--page .btn--group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.page-enquete #banner--page .btn--group button {
|
||||
width: 100%;
|
||||
max-width: 28ch;
|
||||
}
|
||||
.page-enquete #nav--page ul {
|
||||
list-style: none;
|
||||
}
|
||||
.page-enquete #nav--page ul li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.page-enquete #nav--page ul li a {
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.page-enquete .short {
|
||||
font-size: var(--fs-medium);
|
||||
margin: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
.page-enquete #section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -824,15 +885,18 @@ body main {
|
|||
.page-enquete #section__dl ul:not(.keywords) li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.page-enquete #nav--page ul {
|
||||
list-style: none;
|
||||
.page-enquete #section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
.page-enquete #nav--page ul li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
.page-enquete #section__synthese p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.page-enquete #nav--page ul li a {
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
.page-enquete #section__synthese h4 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
-webkit-text-decoration: 1px underline var(--color-txt-light);
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
Loading…
Add table
Add a link
Reference in a new issue