save broken

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);
+  }
+}

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 {

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;
+  }
 }

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));
+  }
+}

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);
+  }
+}

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));
+  }
+}

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;
+  }
+}