This commit is contained in:
Julie Blanc
parent
16d9851535
commit
53b6355baf
21 changed files with 385 additions and 132 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,2 +1 @@
|
|||
.DS_Store
|
||||
assets/fonts/*
|
||||
|
|
@ -56,6 +56,8 @@
|
|||
|
||||
--header-h: 80px;
|
||||
--header-h-shrinked: 50px;
|
||||
--menu-w: 420px;
|
||||
|
||||
|
||||
// responsive
|
||||
--padding-body: 26px;
|
||||
|
|
|
|||
|
|
@ -31,6 +31,48 @@ button:disabled{
|
|||
|
||||
|
||||
|
||||
.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;
|
||||
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);
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
a{
|
||||
color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn--bold-inline:hover{
|
||||
a{
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
.logo {
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@
|
|||
|
||||
#site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
#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 .3s ease-in;
|
||||
background-color: var(--color-bg);
|
||||
border-left: var(--border-light);
|
||||
padding: var(--padding-body);
|
||||
// background-color: red;
|
||||
z-index: 1000;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
// display: none;
|
||||
|
||||
.baseline{
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
// .baseline{
|
||||
// font-size: var(--fs-medium);
|
||||
// }
|
||||
|
||||
form{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
|
|
@ -68,13 +69,14 @@
|
|||
list-style-type: none;
|
||||
text-transform: uppercase;
|
||||
li{
|
||||
font-size: var(--fs-medium);
|
||||
font-size: var(--fs-normal);
|
||||
a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 0.5em 0;
|
||||
&:hover{
|
||||
color: var(--grey-200);
|
||||
text-decoration: underline;
|
||||
// color: var(--grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,3 +87,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.menu-open{
|
||||
overflow: hidden;
|
||||
main, footer, #nav-highlight{
|
||||
transition: opacity .3s ease-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
#site-menu{
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#menu-toggle{
|
||||
.open{ display: none; }
|
||||
.close{ display: block!important; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -29,6 +29,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// HER0 ----------------------------------------------------
|
||||
|
||||
.hero{
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
|
|
@ -60,30 +64,9 @@
|
|||
}
|
||||
|
||||
|
||||
.short{
|
||||
font-size: var(--fs-medium);
|
||||
margin: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
#section__synthese{
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
p + p{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
h4{
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// banner-page -------------------------------------------------
|
||||
|
||||
#banner--page{
|
||||
height: calc(100vh - var(--header-h));
|
||||
|
|
@ -91,12 +74,55 @@
|
|||
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;
|
||||
|
||||
.btn--group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
button{
|
||||
width: 100%;
|
||||
max-width: 28ch;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#nav--page{
|
||||
ul{
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
// text-transform: uppercase;
|
||||
|
||||
a{
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// DL -------------------------------------------------
|
||||
|
||||
.short{
|
||||
font-size: var(--fs-medium);
|
||||
margin: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
#section__dl{
|
||||
|
|
@ -124,22 +150,35 @@
|
|||
}
|
||||
|
||||
|
||||
#nav--page{
|
||||
ul{
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
// text-transform: uppercase;
|
||||
|
||||
a{
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SYNTHESE ----------------------------------------------
|
||||
|
||||
|
||||
|
||||
#section__synthese{
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
p + p{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
h4{
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
BIN
assets/fonts/Executive-55Regular.woff
Normal file
BIN
assets/fonts/Executive-55Regular.woff
Normal file
Binary file not shown.
BIN
assets/fonts/Executive-56Italic.woff
Normal file
BIN
assets/fonts/Executive-56Italic.woff
Normal file
Binary file not shown.
BIN
assets/fonts/Executive-65Medium.woff
Normal file
BIN
assets/fonts/Executive-65Medium.woff
Normal file
Binary file not shown.
BIN
assets/fonts/Executive-66MediumIt.woff
Normal file
BIN
assets/fonts/Executive-66MediumIt.woff
Normal file
Binary file not shown.
BIN
assets/fonts/System-Bold.woff2
Executable file
BIN
assets/fonts/System-Bold.woff2
Executable file
Binary file not shown.
BIN
assets/fonts/System-BoldItalic.woff2
Executable file
BIN
assets/fonts/System-BoldItalic.woff2
Executable file
Binary file not shown.
BIN
assets/fonts/System-Medium.woff2
Executable file
BIN
assets/fonts/System-Medium.woff2
Executable file
Binary file not shown.
BIN
assets/fonts/System-MediumItalic.woff2
Executable file
BIN
assets/fonts/System-MediumItalic.woff2
Executable file
Binary file not shown.
57
assets/fonts/stylesheet.css
Normal file
57
assets/fonts/stylesheet.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
/* Executive - Regular */
|
||||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-55Regular.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-56Italic.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-65Medium.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-66MediumIt.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "System";
|
||||
src: url("System-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "System";
|
||||
src: url("System-MediumItalic.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "System";
|
||||
src: url("System-Bold.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "System";
|
||||
src: url("System-BoldItalic.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1,20 +1,51 @@
|
|||
window.onload = function () {
|
||||
includeHTML();
|
||||
headerToggle();
|
||||
// TEMP, with includeHTML() --------------------------------------
|
||||
|
||||
window.onload = async function () {
|
||||
await runIncludeHTML();
|
||||
initAfterLoad();
|
||||
};
|
||||
|
||||
window.onscroll = function () {
|
||||
headerShrink();
|
||||
};
|
||||
function runIncludeHTML() {
|
||||
if (typeof includeHTML === "function") {
|
||||
const result = includeHTML();
|
||||
|
||||
if (result instanceof Promise) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function headerToggle() {
|
||||
const header = document.getElementById('site-header');
|
||||
const buttonToggle = document.querySelector('menu-toggle');
|
||||
|
||||
console.log(buttonToggle);
|
||||
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
|
||||
/// INIT --------------------------------------------------------
|
||||
|
||||
// Note: une fois que IncludeHTML() est supprimé, on peut supprimer tout le temp au dessus
|
||||
// remplacer `function initAfterLoad()` par ↓
|
||||
// window.onload = async function () {
|
||||
|
||||
function initAfterLoad() {
|
||||
headerToggle();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ===============================
|
||||
// HEADER
|
||||
// ===============================
|
||||
function headerToggle() {
|
||||
const header = document.getElementById("site-header");
|
||||
const buttonToggle = document.querySelector("#menu-toggle");
|
||||
console.log(header);
|
||||
console.log(buttonToggle);
|
||||
|
||||
if (!header || !buttonToggle) return;
|
||||
buttonToggle.addEventListener("click", () => {
|
||||
document.body.classList.toggle("menu-open");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,32 +2,34 @@
|
|||
// <header id="header" w3-include-html="components/header.html"></header>
|
||||
|
||||
|
||||
function includeHTML() {
|
||||
async function includeHTML() {
|
||||
const elements = document.querySelectorAll("[w3-include-html]");
|
||||
|
||||
var z, i, elmnt, file, xhttp;
|
||||
/* Loop through a collection of all HTML elements: */
|
||||
z = document.getElementsByTagName("*");
|
||||
for (i = 0; i < z.length; i++) {
|
||||
elmnt = z[i];
|
||||
/*search for elements with a certain atrribute:*/
|
||||
file = elmnt.getAttribute("w3-include-html");
|
||||
if (file) {
|
||||
/* Make an HTTP request using the attribute value as the file name: */
|
||||
xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
|
||||
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
|
||||
/* Remove the attribute, and call this function once more: */
|
||||
elmnt.removeAttribute("w3-include-html");
|
||||
includeHTML();
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", file, true);
|
||||
xhttp.send();
|
||||
/* Exit the function: */
|
||||
return;
|
||||
}
|
||||
if (elements.length === 0) {
|
||||
return; // Plus rien à charger
|
||||
}
|
||||
|
||||
const promises = Array.from(elements).map(async (elmnt) => {
|
||||
const file = elmnt.getAttribute("w3-include-html");
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(file);
|
||||
if (response.ok) {
|
||||
const html = await response.text();
|
||||
elmnt.innerHTML = html;
|
||||
} else {
|
||||
elmnt.innerHTML = "Page not found.";
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error loading ${file}:`, error);
|
||||
elmnt.innerHTML = "Error loading content.";
|
||||
}
|
||||
|
||||
elmnt.removeAttribute("w3-include-html");
|
||||
});
|
||||
|
||||
// Attendre que tous les fichiers soient chargés
|
||||
await Promise.all(promises);
|
||||
await includeHTML();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@
|
|||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="btn--group" id="btn-mobile">
|
||||
<div class="btn--group">
|
||||
<button class="btn--bold"><a href="#">Lire le rapport</a></button>
|
||||
<button class="btn"><a href="#">Partager</a></button>
|
||||
<button class="btn--bold-inline"><a href="#">Partager</a></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue