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; ?>
title() ?>
- tabs() ?> -
\ No newline at end of file + +tabs() ?> \ No newline at end of file diff --git a/site/snippets/header.php b/site/snippets/header.php index 0c91f34..73b9618 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -2,13 +2,19 @@ - + <?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?> - + - - - \ No newline at end of file + +
+ +
\ No newline at end of file diff --git a/site/snippets/tabs.php b/site/snippets/tabs.php index 432d997..ad735e7 100644 --- a/site/snippets/tabs.php +++ b/site/snippets/tabs.php @@ -4,7 +4,7 @@ $authorFilter = isset($authorFilter) ? $authorFilter : false; $activeTab = isset($activeTab) ? Str::slug($activeTab) : ''; ?> -
textes
@@ -29,26 +30,45 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
- \ No newline at end of file + \ No newline at end of file diff --git a/site/templates/author.php b/site/templates/author.php index b8020e4..42c1026 100644 --- a/site/templates/author.php +++ b/site/templates/author.php @@ -1,25 +1,20 @@ -
-
-

title() ?>

-

-
- [ - 'label' => 'Présentation', - 'content' => $page->presentation() - ], - 'authorFilter' => $page->author() - ]) ?> + + +

title() ?>

+ + + [ + 'label' => 'Présentation', + 'content' => $page->presentation() + ], + 'authorFilter' => $page->author() + ]) ?> + +
\ No newline at end of file diff --git a/site/templates/home.php b/site/templates/home.php index eeb9e25..ee6580e 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -1,12 +1,4 @@ -
- -
diff --git a/site/templates/linear.php b/site/templates/linear.php index effa6c2..c5bc597 100644 --- a/site/templates/linear.php +++ b/site/templates/linear.php @@ -1,18 +1,20 @@ -
- -
-
- - \ No newline at end of file +
\ No newline at end of file