aside:
- type: resource
items:
- - name: "**Github repository**"
+ - name: "Github repository"
link: https://github.com/hvmi
- - name: Documentation
+ - name: "Documentation"
link: https://hvmi.readthedocs.io/
---
build:
writeStats: true
-
+ processing:
+ css: true
+ css:
+ includePaths: []
+ sourceMap: true
outputs:
home:
- HTML
display: inline;
}
-strong {
- font-weight: 600;
-}
-
ul {
list-style: disc;
margin-top: var(--sp-sm);
display: inline-block;
text-decoration: none;
color: var(--color-action-text);
- font-size: 18px;
+ // font-size: 20px;
+ strong {
+ font-weight: 500;
+ }
&::after {
font-family: var(--font-family-icons);
content: var(--icon-arrow-down);
display: block;
text-align: center;
- margin-top: 10px;
+ margin-top: 0px;
transition: all 0.3s ease-in-out;
transform: translateX(0);
}
align-items: center;
font-weight: 700;
color: var(--color-action-fill);
- margin: 0 0 0.75rem;
+ margin: 0 0 1.05rem;
padding-bottom: 0.28em;
border-bottom: 2px solid var(--color-brand-fill);
}
@include tablet {
--gap: var(--sp-xl);
- --content-gap: var(--sp-md);
+ --content-gap: var(--sp-xs);
--content-line-height: 1.67;
--flex-direction: row-reverse;
--media-max-width: 100%;
--title-paddings: 0.25rem 0.5rem;
--content-paddings: 0.75rem;
--link-font-size: 1rem;
+ --content-line-height: 2;
border: 0.0625rem solid var(--color-border);
display: flex;
flex-direction: column;
@include tablet {
--title-font-size: 1.5rem;
- --content-paddings: 1.5rem 1rem;
- --link-font-size: 1.25rem;
+ --content-paddings: 1.4rem 1rem;
+ --link-font-size: 1.22rem;
+ --content-line-height: 1.5;
}
&__title {
&__content {
padding: var(--content-paddings);
- line-height: 2;
+ line-height: var(--content-line-height);
p:first-child,
p:last-child {
padding-bottom: 0;
}
+@include tablet {
+ .page-aside {
+ width: 420px;
+ }
+}
+
.page-single {
+ @include tablet {
+ > .article {
+ padding-top: var(--sp-xl);
+ }
+ }
+
&.with-aside {
display: flex;
flex-direction: column;
+:root {
+ /* Mobile font sizes (default) */
+ --font-size-base: 1.125rem; /* 18px - taille de base pour mobile */
+ --font-size-h1: 2.25rem; /* 36px */
+ --font-size-h2: 2rem; /* 32px */
+ --font-size-h3: 1.25rem; /* 20px */
+ --font-size-button: 1.125rem; /* 18px */
+ --font-size-p1: 1.125rem; /* 18px */
+ --font-size-p2: 1rem; /* 16px */
+
+ /* Line heights */
+ --line-height-heading: 60px;
+ --line-height-body: 1.5em;
+ --line-height-button: 1.2em;
+
+ /* Letter spacing */
+ --letter-spacing-p: -0.03125rem; /* -0.5px */
+}
+
/* General Typography Styles */
body {
font-family: "Gotham", sans-serif;
- font-size: 1rem; /* Base font size */
+ font-size: var(--font-size-base);
}
/* Line heights and common styles for paragraphs and buttons */
.p1-medium-underline,
.p1-book,
.p1-book-underline {
- line-height: var(--title-line-height);
+ line-height: var(--line-height-body);
}
.p1-bold,
.p1-medium-underline,
.p1-book,
.p1-book-underline {
- font-size: 1.125rem; /* 18px */
+ font-size: var(--font-size-p1);
}
.p1-medium,
.p2-medium-underline,
.p2-book,
.p2-book-underline {
- letter-spacing: -0.03125rem; /* -0.5px */
+ letter-spacing: var(--letter-spacing-p);
}
/* Headings */
h1 {
- font-size: var(--h1-font-size);
+ font-size: var(--font-size-h1);
margin-top: var(--sp-md);
margin-bottom: var(--sp-md);
font-weight: 700;
h2 {
font-weight: bold;
- font-size: 2rem; /* 32px */
+ font-size: var(--font-size-h2);
margin-top: 0.66em;
margin-bottom: 0.66em;
letter-spacing: -0.0194em;
h3 {
font-weight: bold;
- font-size: 1.25rem; /* 24px */
+ font-size: var(--font-size-h3);
line-height: 120%;
}
/* Buttons */
.button-medium {
font-weight: medium;
- font-size: 1.125rem; /* 18px */
+ font-size: var(--font-size-button);
}
.button-medium-mobile {
font-weight: medium;
- font-size: 1.125rem; /* 18px */
- line-height: 1.2em;
+ font-size: var(--font-size-button);
+ line-height: var(--line-height-button);
}
/* Paragraphs */
}
/* Common Styles */
-.p2-medium {
- font-weight: medium;
- font-size: 1rem; /* 16px */
- line-height: 1.5em;
+.p2-medium,
+.p2-medium-underline,
+.p2-book,
+.p2-book-underline {
+ font-size: var(--font-size-p2);
+ line-height: var(--line-height-body);
+ letter-spacing: var(--letter-spacing-p);
}
+.p2-medium,
.p2-medium-underline {
font-weight: medium;
- font-size: 1rem; /* 16px */
- line-height: 1.5em;
- text-decoration: underline;
}
-.p2-book {
+.p2-book,
+.p2-book-underline {
font-weight: book;
- font-size: 1rem; /* 16px */
- line-height: 1.5em;
}
+.p2-medium-underline,
.p2-book-underline {
- font-weight: book;
- font-size: 1rem; /* 16px */
- line-height: 1.5em;
text-decoration: underline;
}
/* Desktop Styles */
@media (min-width: 768px) {
- h1 {
- font-size: 2.5rem; /* 40px */
- line-height: 1.2em;
- }
-
- h2 {
- font-size: 2.25rem; /* 36px */
- line-height: 1.2em;
- }
-
- .button-medium {
- font-size: 1.25rem; /* 20px */
- }
-
- .p1-bold,
- .p1-bold-underline,
- .p1-medium,
- .p1-medium-underline,
- .p1-book,
- .p1-book-underline {
- font-size: 1.25rem; /* 20px */
+ :root {
+ --font-size-base: 1.25rem; /* 20px - taille de base pour desktop */
+ --font-size-h1: 2.5rem; /* 40px */
+ --font-size-h2: 2.25rem; /* 36px */
+ --font-size-h3: 1.5rem; /* 24px */
+ --font-size-button: 1.25rem; /* 20px */
+ --font-size-p1: 1.25rem; /* 20px */
+ /* P2 reste à 16px même sur desktop selon la maquette */
+ --line-height-heading: 1.2em;
}
}
h1 {
color: var(--color-action-text);
}
+
+ @include tablet {
+ h1 {
+ margin-top: 0;
+ }
+ }
}
};
})();
- const newsCardTemplate = createTemplate();
-
const latestnews = async (element) => {
+ const newsCardTemplate = createTemplate();
const container = element.querySelector(".latest-news_container");
const { maxCards, blogFilter, tagFilter } = container.dataset;
const blogIds = blogFilter?.split(",") || blogs.map((blog) => blog.id);
async function loadSavedImages() {
const images = await getImagesFromIndexedDB();
savedImagesOptions.innerHTML = ""; // Clear existing options
- images.forEach((image) => {
- const option = document.createElement("span");
- option.className = "custom-option";
- option.dataset.value = image.id;
- option.textContent = `${image.fileName.replace(/\.+?$/, "")}`;
- savedImagesOptions.appendChild(option);
+ images
+ .sort((a, b) => (a.fileName < b.fileName ? -1 : 1))
+ .forEach((image) => {
+ const option = document.createElement("span");
+ option.className = "custom-option";
+ option.dataset.value = image.id;
+ option.textContent = `${image.fileName.replace(/\..+$/, "")}`;
+ savedImagesOptions.appendChild(option);
- option.addEventListener("click", async () => {
- const db = await openDB();
- const transaction = db.transaction(storeName, "readonly");
- const store = transaction.objectStore(storeName);
- store.get(parseInt(option.dataset.value)).onsuccess = (event) => {
- const selectedImage = event.target.result;
- if (selectedImage.error) {
- console.error("Error getting image from IndexedDB:", selectedImage.error);
- } else {
- if (selectedImage?.data) {
- createImage(selectedImage.data); // Use the base64 data directly
- customSelectTrigger.textContent = option.textContent;
- customSelect.classList.remove("open");
+ option.addEventListener("click", async () => {
+ const db = await openDB();
+ const transaction = db.transaction(storeName, "readonly");
+ const store = transaction.objectStore(storeName);
+ store.get(parseInt(option.dataset.value)).onsuccess = (event) => {
+ const selectedImage = event.target.result;
+ if (selectedImage.error) {
+ console.error("Error getting image from IndexedDB:", selectedImage.error);
} else {
- console.error("Image data not found for ID:", option.dataset.value);
+ if (selectedImage?.data) {
+ createImage(selectedImage.data); // Use the base64 data directly
+ saveToLocalStorage("mockupMockupImage", selectedImage.data);
+ customSelectTrigger.textContent = option.textContent;
+ customSelect.classList.remove("open");
+ } else {
+ console.error("Image data not found for ID:", option.dataset.value);
+ }
}
- }
- };
+ };
+ });
});
- });
}
customSelectTrigger.addEventListener("click", () => {
</div>
{{ else if eq .type "members-list" }}
<div class="box-members">
- <h3 class="box-members__title">{{ .name }}</h3>
+ <h3 class="box-members__title">{{ .name | markdownify }}</h3>
<ul>
{{ range .items }}
<li>