This commit is contained in:
Julie Blanc
parent
08ebf7fc9e
commit
5914178e2f
19 changed files with 440 additions and 63 deletions
|
|
@ -34,19 +34,21 @@
|
|||
--header-h-shrinked: 50px;
|
||||
--menu-w: 420px;
|
||||
--padding-body: 26px;
|
||||
--padding-inner: 14px;
|
||||
--radius-small: 4px;
|
||||
--radius-btn: 4px;
|
||||
--spacing: 30px;
|
||||
--h-block: 30px;
|
||||
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
:root {
|
||||
--fs-medium: 20px;
|
||||
--fs-big: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
:root {
|
||||
--fs-x-small: 10px;
|
||||
--fs-small: 11px;
|
||||
|
|
@ -54,6 +56,7 @@
|
|||
--fs-medium: 20px;
|
||||
--fs-big: 30px;
|
||||
--fs-x-big: 38px;
|
||||
--header-h: 60px;
|
||||
}
|
||||
}
|
||||
* {
|
||||
|
|
@ -110,7 +113,6 @@ body {
|
|||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -159,10 +161,18 @@ body {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
#site-header.is-visible .site-header__inner {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
#site-header.is-visible ~ main {
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
|
|
@ -195,7 +205,7 @@ button:disabled {
|
|||
display: block;
|
||||
height: calc(var(--h-block) * 1);
|
||||
border: var(--border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
|
|
@ -210,7 +220,15 @@ button:disabled {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 5px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.btn--bold.no-link,
|
||||
.btn--bold-inline.no-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.btn--bold {
|
||||
|
|
@ -225,6 +243,10 @@ button:disabled {
|
|||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn--bold-inline:hover {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.btn--bold-inline:hover a {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
|
|
@ -437,7 +459,7 @@ button:disabled {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 720px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
.footer__socials .list-socials {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -459,6 +481,107 @@ button:disabled {
|
|||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.modal--share {
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--color-bg);
|
||||
padding: var(--padding-inner);
|
||||
padding-top: calc(var(--padding-inner) * 0.5);
|
||||
padding-bottom: calc(var(--padding-inner) * 1.5);
|
||||
}
|
||||
.modal--share .modal-title {
|
||||
display: none;
|
||||
}
|
||||
.modal--share .socials {
|
||||
display: block;
|
||||
list-style: none;
|
||||
}
|
||||
.modal--share .socials li {
|
||||
font-size: var(--fs-normal);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: var(--border-light);
|
||||
padding-top: 6px;
|
||||
}
|
||||
.modal--share .socials li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.modal--share .socials li .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.modal--share .socials li .icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.modal--share .socials li .text {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.modal--share .socials li:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.modal--share .socials li:hover .icon svg,
|
||||
.modal--share .socials li:hover .icon svg path,
|
||||
.modal--share .socials li:hover .icon svg rect {
|
||||
fill: var(--color-accent) !important;
|
||||
}
|
||||
.modal--share .copy-link {
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
.modal--share .copy-link .copy-link__field {
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: var(--h-block) 1fr;
|
||||
}
|
||||
.modal--share .copy-link .icon {
|
||||
display: flex;
|
||||
width: var(--h-block);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.modal--share .copy-link .icon svg {
|
||||
width: 12px;
|
||||
}
|
||||
.modal--share .copy-link input {
|
||||
font-size: var(--fs-small);
|
||||
font-family: var(--font);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
padding-top: 2px;
|
||||
grid-column: 1/end;
|
||||
grid-row: 1;
|
||||
padding-left: var(--h-block);
|
||||
padding-right: 0.5ch;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
height: var(--h-block);
|
||||
}
|
||||
.modal--share .copy-link input:focus {
|
||||
border-color: var(--color-txt);
|
||||
outline: none;
|
||||
}
|
||||
.modal--share .copy-link button {
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
border-radius: var(--radius-btn);
|
||||
padding: 0 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding-top: 2px;
|
||||
}
|
||||
.modal--share .copy-link button:hover {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
[data-template=subscription-newsletter] .p__baseline-big,
|
||||
[data-template=thanks] .p__baseline-big,
|
||||
[data-template=support] .p__baseline-big,
|
||||
|
|
@ -503,7 +626,7 @@ button:disabled {
|
|||
text-align: center;
|
||||
margin: calc(var(--spacing) * 1) 0;
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-template=subscription-newsletter] .p__baseline,
|
||||
[data-template=thanks] .p__baseline,
|
||||
[data-template=support] .p__baseline,
|
||||
|
|
@ -561,7 +684,6 @@ button:disabled {
|
|||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -610,10 +732,18 @@ button:disabled {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
#site-header.is-visible .site-header__inner {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
#site-header.is-visible ~ main {
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#site-menu {
|
||||
position: fixed;
|
||||
width: var(--menu-w);
|
||||
|
|
@ -743,7 +873,7 @@ body.menu-open #menu-toggle .close {
|
|||
font-size: var(--fs-small);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-footer {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
|
@ -765,7 +895,7 @@ body.menu-open #menu-toggle .close {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 720px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
#site-footer .site-footer__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
|
@ -846,19 +976,26 @@ body main {
|
|||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.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: calc((100% - var(--max-w-content)) / 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@media screen and (min-width: 1080px) {
|
||||
.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: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.page-enquete .modal--share {
|
||||
position: absolute;
|
||||
bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
|
||||
width: calc(100% - var(--padding-body));
|
||||
}
|
||||
.page-enquete #banner--page .btn--group {
|
||||
display: flex;
|
||||
|
|
@ -866,9 +1003,9 @@ body main {
|
|||
align-items: center;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.page-enquete #banner--page .btn--group button {
|
||||
.page-enquete #banner--page .btn--group > button {
|
||||
width: 100%;
|
||||
max-width: 28ch;
|
||||
max-width: 160px;
|
||||
}
|
||||
.page-enquete #nav--page ul {
|
||||
list-style: none;
|
||||
|
|
@ -920,4 +1057,10 @@ body main {
|
|||
-webkit-text-decoration: 1px underline var(--color-txt-light);
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#banner--page {
|
||||
display: none;
|
||||
}
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
Loading…
Add table
Add a link
Reference in a new issue