This commit is contained in:
Julie Blanc
parent
08ebf7fc9e
commit
5914178e2f
19 changed files with 440 additions and 63 deletions
|
|
@ -2,8 +2,8 @@ $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)";
|
||||
$small-up: "screen and (min-width: 768px)";
|
||||
$small: "screen and (max-width: 768px)";
|
||||
$x-small: "screen and (max-width: 560px)";
|
||||
$paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
|
||||
|
||||
|
|
|
|||
|
|
@ -54,15 +54,20 @@
|
|||
--border: 1px solid var(--color-txt);
|
||||
--border-light: 1px solid var(--grey-800);
|
||||
|
||||
|
||||
--header-h: 80px;
|
||||
--header-h-shrinked: 50px;
|
||||
--menu-w: 420px;
|
||||
|
||||
|
||||
|
||||
|
||||
// responsive
|
||||
--padding-body: 26px;
|
||||
--padding-inner: 14px;
|
||||
|
||||
--radius-small: 4px;
|
||||
--radius-btn: 4px;
|
||||
--spacing: 30px;
|
||||
--h-block: 30px;
|
||||
|
||||
|
|
@ -78,5 +83,7 @@
|
|||
--fs-medium: 20px;
|
||||
--fs-big: 30px;
|
||||
--fs-x-big: 38px;
|
||||
|
||||
--header-h: 60px;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,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;
|
||||
|
|
@ -49,7 +49,15 @@ button:disabled{
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 5px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
&.no-link{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -68,6 +76,8 @@ button:disabled{
|
|||
}
|
||||
|
||||
.btn--bold-inline:hover{
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
a{
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
|
|
@ -78,6 +88,8 @@ button:disabled{
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
// DELETE ?
|
||||
|
||||
.btn__default{
|
||||
|
|
|
|||
120
assets/css/components/_modal-share.scss
Normal file
120
assets/css/components/_modal-share.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
.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-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.socials{
|
||||
display: block;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
font-size: var(--fs-normal);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: var(--border-light);
|
||||
padding-top: 6px;
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
svg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&:hover{
|
||||
color: var(--color-accent);
|
||||
|
||||
.icon svg,
|
||||
.icon svg path,
|
||||
.icon svg rect{
|
||||
fill: var(--color-accent)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.copy-link{
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
|
||||
.copy-link__field{
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: var(--h-block) 1fr;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.icon{
|
||||
display: flex;
|
||||
width: var(--h-block);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
// top: -2px;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.icon svg{
|
||||
width: 12px;
|
||||
}
|
||||
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);
|
||||
&:focus{
|
||||
border-color: var(--color-txt);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
.site-header__inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -82,7 +81,18 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
.site-header__inner{
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
& ~ main{
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
#nav-highlight{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -11,6 +11,7 @@
|
|||
@import 'components/keywords';
|
||||
@import 'components/form-newsletter';
|
||||
@import 'components/list-socials';
|
||||
@import 'components/modal-share';
|
||||
@import 'components/text';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -68,33 +68,43 @@
|
|||
|
||||
// banner-page -------------------------------------------------
|
||||
|
||||
#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;
|
||||
|
||||
.btn--group{
|
||||
@media #{$medium-up}{
|
||||
#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;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
button{
|
||||
width: 100%;
|
||||
max-width: 28ch;
|
||||
}
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.modal--share{
|
||||
position: absolute;
|
||||
bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
|
||||
width: calc(100% - var(--padding-body));
|
||||
|
||||
}
|
||||
|
||||
#banner--page .btn--group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
|
||||
> button{
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#nav--page{
|
||||
|
|
@ -181,4 +191,15 @@
|
|||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
|
||||
#banner--page{
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
Before Width: | Height: | Size: 309 B After Width: | Height: | Size: 309 B |
1
assets/icons/link.svg
Normal file
1
assets/icons/link.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" style="fill: var(--color-txt)" width="24" height="24" viewBox="0 0 24 24"><path d="M13.723 18.654l-3.61 3.609c-2.316 2.315-6.063 2.315-8.378 0-1.12-1.118-1.735-2.606-1.735-4.188 0-1.582.615-3.07 1.734-4.189l4.866-4.865c2.355-2.355 6.114-2.262 8.377 0 .453.453.81.973 1.089 1.527l-1.593 1.592c-.18-.613-.5-1.189-.964-1.652-1.448-1.448-3.93-1.51-5.439-.001l-.001.002-4.867 4.865c-1.5 1.499-1.5 3.941 0 5.44 1.517 1.517 3.958 1.488 5.442 0l2.425-2.424c.993.284 1.791.335 2.654.284zm.161-16.918l-3.574 3.576c.847-.05 1.655 0 2.653.283l2.393-2.389c1.498-1.502 3.94-1.5 5.44-.001 1.517 1.518 1.486 3.959 0 5.442l-4.831 4.831-.003.002c-1.438 1.437-3.886 1.552-5.439-.002-.473-.474-.785-1.042-.956-1.643l-.084.068-1.517 1.515c.28.556.635 1.075 1.088 1.528 2.245 2.245 6.004 2.374 8.378 0l4.832-4.831c2.314-2.316 2.316-6.062-.001-8.377-2.317-2.321-6.067-2.313-8.379-.002z"/></svg>
|
||||
|
After Width: | Height: | Size: 911 B |
|
|
@ -1,6 +1,3 @@
|
|||
// ===============================
|
||||
// HEADER
|
||||
// ===============================
|
||||
export function headerToggle() {
|
||||
const header = document.getElementById("site-header");
|
||||
const buttonToggle = document.querySelector("#menu-toggle");
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { headerToggle, headerScrollVisibility } from './header.js';
|
||||
import { copyLink } from './share.js';
|
||||
|
||||
// TEMP, with includeHTML() --------------------------------------
|
||||
|
||||
|
|
@ -24,9 +25,10 @@ function runIncludeHTML() {
|
|||
|
||||
// Note: une fois que IncludeHTML() est supprimé, on peut supprimer tout le temp au dessus
|
||||
// remplacer `function initAfterLoad()` par ↓
|
||||
// window.onload = async function () {
|
||||
// window.onload = async function () { }
|
||||
|
||||
function initAfterLoad() {
|
||||
headerToggle();
|
||||
headerScrollVisibility();
|
||||
copyLink();
|
||||
}
|
||||
|
|
|
|||
19
assets/js/share.js
Normal file
19
assets/js/share.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export function copyLink() {
|
||||
let buttons = document.querySelectorAll('.copy-link button');
|
||||
buttons.forEach(function (button, index) {
|
||||
console.log(button);
|
||||
let link = button.parentNode.querySelector("input").value;
|
||||
|
||||
button.addEventListener('click', function() {
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Lien copié';
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
}, 1000);
|
||||
}).catch(err => {
|
||||
console.error('Erreur lors de la copie:', err);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue