diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css
index 137b6cf..680984f 100644
--- a/assets/css/src/footer.css
+++ b/assets/css/src/footer.css
@@ -4,7 +4,6 @@
bottom: 0;
width: calc(18 * var(--unit--horizontal));
padding: var(--unit--horizontal);
- padding-top: var();
}
#main-footer a {
@@ -12,3 +11,9 @@
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
+
+@media screen and (min-width: 640px) {
+ #main-footer {
+ padding: calc(var(--unit--horizontal) / 2) var(--unit--horizontal);
+ }
+}
diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css
index 3928074..162a47f 100644
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@@ -42,10 +42,10 @@
padding-right: calc(var(--unit--horizontal) * var(--right));
}
.bottom:not(.padding) {
- margin-bottom: calc(var(--unit--horizontal) * var(--bottom));
+ margin-bottom: calc(var(--unit--vertical) * var(--bottom));
}
.padding.bottom {
- padding-bottom: calc(var(--unit--horizontal) * var(--bottom));
+ padding-bottom: calc(var(--unit--vertical) * var(--bottom));
}
.full-width {
@@ -59,6 +59,7 @@
.flex {
display: flex;
justify-content: var(--content);
+ align-items: var(--align);
gap: calc(var(--gap) * var(--unit--horizontal));
}
.flex.column {
diff --git a/assets/css/src/header.css b/assets/css/src/header.css
index 1b84aeb..42ddd77 100644
--- a/assets/css/src/header.css
+++ b/assets/css/src/header.css
@@ -23,7 +23,6 @@
color: var(--color-primary--transparent);
position: relative;
z-index: 1;
- margin-left: calc(var(--unit--horizontal) * 2);
}
#logo #inactuel {
position: absolute;
@@ -42,12 +41,27 @@
display: flex;
flex-direction: column;
justify-content: space-between;
- padding: calc(7 * var(--unit--vertical)) 0;
- margin-bottom: 0rem;
-
- transition: margin-bottom 0.5s ease-in-out;
+ padding-top: calc(8 * var(--unit--vertical));
+ padding-bottom: calc(5 * var(--unit--vertical));
}
-.page-cover.open {
- margin-bottom: calc(100vh - 10 * var(--unit--vertical));
+@media screen and (min-width: 640px) {
+ #main-header {
+ display: flex;
+ justify-content: center;
+ }
+ #logo {
+ width: 37vw;
+ }
+ #logo * {
+ font-size: 11vw;
+ }
+
+ #main-header.minimized {
+ height: calc(var(--unit--vertical) * 4.3);
+ }
+
+ .page-cover {
+ padding: calc(10 * var(--unit--vertical)) 0;
+ }
}
diff --git a/assets/css/src/html.css b/assets/css/src/html.css
index 5fe54a2..3275b73 100644
--- a/assets/css/src/html.css
+++ b/assets/css/src/html.css
@@ -49,3 +49,9 @@ html {
border-radius: 0px;
border: none;
}
+
+@media screen and (min-width: 640px) {
+ body {
+ padding: 0 calc(6 * var(--unit--horizontal));
+ }
+}
diff --git a/assets/css/src/tabs.css b/assets/css/src/tabs.css
index 9c57bcd..2750f2a 100644
--- a/assets/css/src/tabs.css
+++ b/assets/css/src/tabs.css
@@ -1,7 +1,7 @@
.toggle-btns {
position: sticky;
}
-button.toggle.open {
+button.toggle.open:not(.see-more) {
font-weight: bold;
}
@@ -26,17 +26,49 @@ button.toggle.right.open::before {
}
#tabs {
+ --mg: 4;
position: relative;
+ margin-top: calc(0px - (2 * var(--unit--vertical)));
+ margin-bottom: calc((var(--mg) / 2) * var(--unit--vertical));
+}
+#tabs.safari {
+ margin-top: calc(-60px - (3 * var(--unit--vertical)));
+}
+#home #tabs {
+ margin-top: calc(0px - (6 * var(--unit--vertical)));
}
.active-tab {
- position: absolute;
+ max-height: 70vh;
overflow: auto;
- margin-top: calc(var(--unit--vertical) * 0.5);
- height: 0px;
+ margin-top: calc((var(--unit--vertical) * 0.5));
transition: height 0.5s ease-in-out;
}
.page-cover.open .active-tab {
height: calc(100vh - 7.5 * var(--unit--vertical));
}
+
+.texts__year.short .year__edito {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+}
+
+.texts__year .see-more {
+ width: 100%;
+ margin-top: calc(var(--unit--vertical) / 2);
+}
+
+@media screen and (min-width: 640px) {
+ #home #tabs {
+ margin-top: calc(0px - (10 * var(--unit--vertical)));
+ }
+ button.toggle.left::after {
+ margin-left: calc(var(--unit--horizontal) / 2);
+ }
+ button.toggle.right::before {
+ margin-right: calc(var(--unit--horizontal) / 2);
+ }
+}
diff --git a/assets/css/src/texts.css b/assets/css/src/texts.css
index 861de9e..a45ba62 100644
--- a/assets/css/src/texts.css
+++ b/assets/css/src/texts.css
@@ -52,8 +52,8 @@ button,
.title-center {
font-size: var(--font-size-m);
font-weight: var(--font-weight-light);
- text-align: center;
width: 100%;
+ margin-left: calc(5 * var(--unit--horizontal));
}
.main-title {
@@ -108,3 +108,9 @@ a:not(.no-line) {
article p {
margin-bottom: var(--unit--vertical);
}
+
+@media screen and (min-width: 640px) {
+ .title-center {
+ margin-left: calc(2 * var(--unit--horizontal));
+ }
+}
diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css
index c817a8b..3fe446a 100644
--- a/assets/css/src/variables.css
+++ b/assets/css/src/variables.css
@@ -19,3 +19,27 @@
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
}
+
+@media screen and (min-width: 640px) {
+ :root {
+ --color-background: #000;
+ --color-primary: #ffffff;
+ --color-primary--transparent: rgba(255, 255, 255, 0.86);
+ --color-secondary: rgb(120, 171, 150, 0.86);
+ --color-secondary--light: rgb(119, 177, 157, 0.25);
+ --color-secondary--x-light: rgb(119, 177, 157, 0.15);
+
+ --unit--horizontal: 5vw;
+ --unit--vertical: 1.7rem;
+
+ --font-size-s: 0.9rem;
+ --font-size-m: calc(var(--font-size-s) * 1.5);
+ --font-size-l: calc(var(--font-size-m) * 1.5);
+ --font-size-xl: calc(var(--font-size-l) * 1.5);
+ --font-size-xxl: calc(var(--font-size-xl) * 1.5);
+
+ --font-weight-light: 200;
+ --font-weight-bold: 400;
+ --font-weight-extra-bold: 550;
+ }
+}
diff --git a/assets/dist/style.css b/assets/dist/style.css
index 0a5fa76..0315c11 100644
--- a/assets/dist/style.css
+++ b/assets/dist/style.css
@@ -308,20 +308,20 @@ button.toggle.right.open:before {
#organize {
margin-bottom: calc(var(--unit--vertical));
}
-.article {
+.texts {
position: relative;
margin-bottom: calc(var(--unit--vertical) * 2);
box-sizing: border-box;
}
-.article__infos,
-.article__labels {
+.texts__infos,
+.texts__labels {
transform: translateY(calc(0rem - (var(--unit--vertical) * 0.1)));
}
-.article__infos,
-.article__labels {
+.texts__infos,
+.texts__labels {
display: flex;
}
-.article .label {
+.texts .label {
margin-right: var(--unit--horizontal);
text-decoration: underline;
text-decoration-style: dotted;
diff --git a/assets/js/script.js b/assets/js/script.js
index dc2d168..7456e50 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -42,4 +42,11 @@ document.addEventListener("DOMContentLoaded", () => {
window.addEventListener("scroll", () => {
toggleLogoState();
});
+
+ if (
+ navigator.userAgent.toLowerCase().includes("safari") &&
+ window.innerWidth < 800
+ ) {
+ document.querySelector("#tabs").classList.add("safari");
+ }
});
diff --git a/media/index.html b/media/index.html
deleted file mode 100644
index e69de29..0000000
diff --git a/site/plugins/front-comments b/site/plugins/front-comments
index d1a5d28..cc9b03f 160000
--- a/site/plugins/front-comments
+++ b/site/plugins/front-comments
@@ -1 +1 @@
-Subproject commit d1a5d28580d8705f80460197fbd0be77039a5e47
+Subproject commit cc9b03f63b02c0b461fbdbf419c224a96288abb1
diff --git a/site/snippets/cover.php b/site/snippets/cover.php
index 8f0b3a6..02d8f4a 100644
--- a/site/snippets/cover.php
+++ b/site/snippets/cover.php
@@ -3,14 +3,10 @@ $isOpen = isset($isOpen) ? $isOpen : false;
?>
par - = $article->author()->toUser()->name() ?>, + = $article->author()->toUser()->name() ?>, le = $article->published()->toDate('d/m/Y') ?>
par = $page->author()->toUser()->name() ?>
+
+ par
+
+ = $page->author()->toUser()->name() ?>
+
+ le = $page->published()->toDate('d/m/Y') ?>
+