From 6bfd9ae262072220f8f5bde70962bade128a9527 Mon Sep 17 00:00:00 2001 From: camille Date: Tue, 30 Jun 2026 17:54:18 +0200 Subject: [PATCH] Fixed home slideshow + new version page infos --- ._content | Bin 4096 -> 0 bytes assets/css/src/_home.scss | 26 +- assets/css/src/_index.scss | 209 +++++++++++ assets/css/src/_infos.scss | 59 ++++ assets/css/src/_main.scss | 263 -------------- assets/css/src/_mobile.scss | 51 ++- assets/css/src/_nav.scss | 1 + assets/css/src/_reset.scss | 8 + assets/css/src/_variables.scss | 21 ++ assets/css/style.css | 560 +++++++++++++++--------------- assets/css/style.css.map | 2 +- assets/css/style.scss | 2 + assets/images/._close-cursor.png | Bin 4096 -> 0 bytes assets/images/._close-cursor.svg | Bin 4096 -> 0 bytes assets/images/._favicon.png | Bin 4096 -> 0 bytes assets/js/home-slideshow.js | 26 +- site/blueprints/pages/infos.yml | 52 ++- site/blueprints/pages/project.yml | 4 + site/templates/home.php | 14 +- site/templates/index.php | 1 + site/templates/infos.php | 46 ++- site/templates/test.html | 13 + 22 files changed, 755 insertions(+), 603 deletions(-) delete mode 100644 ._content create mode 100644 assets/css/src/_infos.scss create mode 100644 assets/css/src/_variables.scss delete mode 100644 assets/images/._close-cursor.png delete mode 100644 assets/images/._close-cursor.svg delete mode 100644 assets/images/._favicon.png create mode 100644 site/templates/test.html diff --git a/._content b/._content deleted file mode 100644 index b7f37d7213f98f99cce70188ab733923ffe95255..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4096 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDJkFz{^v(m+1nBL)UWIUt(=a103v`v3n+ z4nzmT7NGJbG%X<0LE;_^4E)LYxq68O1v#mDxrxa@O(5_Gh^-hHL=kd@rHMs}c_o>7 zsbB?YM1!*h!xQm*|4S|5)1Sn|+3};vW91qcSr}TIB^stC8XH+yyJZ%orsY>yyEwVJ znix5n>ROtZyXu;_85-+4S(sVs8d#Vaxi~sGn>sm}V>ND6a5Mx)Ltr!nMnhmU1V%$( zGz3ONU^E0qLtr!nMnhnLLx2%zKL~??Tu4S{u|iR5aeir0a;idFeo?kUW?o4uuxpv0 lmza}NsgRSJR-%xUlbDwc>.toggle>.close-button { + display: none; + } + + .selected { + opacity: 1; + + .toggle { + display: grid; + grid-template-columns: + calc(3 / 6 * var(--index-width) - var(--body-margin)) calc(3 / 6 * var(--index-width)); + gap: var(--body-margin); + + p { + display: block; + } + } + + .slide-number { + display: block; + } + + .project-description { + display: block; + } + + .toggle>.close-button { + display: block; + min-height: calc(var(--line-height-S) * 2); + margin-bottom: calc(-1 * var(--line-height-S)); + } + } + + .slide-number { + text-align: right; + display: none; + padding-right: var(--body-margin); + color: var(--mix-blend-color); + } + + .project-toggler.grid { + display: grid; + grid-template-columns: + calc(3 / 6 * var(--index-width) - var(--body-margin)) calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(1 / 6 * var(--index-width) - var(--body-margin)); + gap: var(--body-margin); + pointer-events: all; + cursor: inherit; + } + + .project-toggler span { + cursor: pointer; + } + + .project-description { + margin-bottom: var(--line-height-S); + display: none; + } + + +/* PROJECT SLIDESHOW */ + +.project-slideshow { + width: -moz-fit-content; + width: fit-content; + height: -moz-fit-content; + height: fit-content; + box-sizing: border-box; + max-width: 100%; + right: 0; + position: absolute; + + picture img, + video.slide { + max-width: 100%; + max-height: calc(100vh - var(--body-margin) * 2); + vertical-align: bottom; + width: auto; + height: auto; + } } + +picture { + inset: 0; +} + +.project-slideshow-container { + display: block; + position: fixed; + height: 100%; + background-color: white; + top: var(--body-margin); + right: var(--body-margin); + bottom: var(--body-margin); + left: calc(var(--index-width) + var(--body-margin)); + .closer { + inset: 0; + display: block; + position: absolute; + width: auto; + } +} + +button.prev { + position: absolute; + top: 0; + height: 100%; + border: none; + cursor: w-resize; + z-index: 1; + width: 50%; + left: 0; + padding: 0; +} + +button.next { + position: absolute; + top: 0; + right: 0; + height: 100%; + border: none; + cursor: e-resize; + z-index: 1; + width: 50%; + padding: 0; +} + + +} \ No newline at end of file diff --git a/assets/css/src/_infos.scss b/assets/css/src/_infos.scss new file mode 100644 index 0000000..7535b6e --- /dev/null +++ b/assets/css/src/_infos.scss @@ -0,0 +1,59 @@ +[data-template="infos"] { + + header { + position: relative; + } + + p { + margin: 0; + } + + .main-title { + font-size: var(--font-size-XL); + line-break: strict; + left: -0.65vw; + position: relative; + top: var(--main-title-top); + margin-top: var(--body-margin); + line-height: 0.75; + } + + .main-title:has(+ nav:hover) { + opacity: 1; + } + + .title-nav { + opacity: 0; + } + + main { + position: relative; + padding-top: calc(var(--line-height-S) + 0.35rem); + inset: 0; + padding-bottom: var(--font-size-XL); + overflow: auto; + padding-right: 0; + padding-left: 0; + } + + .info-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: calc(var(--body-margin) *2); + margin-top: calc(var(--font-size-L) + var(--line-height-S)); + max-width: 1700px; + + h3{ + text-decoration: underline; + } + .presentation, .clients{ + margin-top: var(--line-height-S); + } + .presentation{ + font-size: var(--font-size-L); + line-height: 1.2; + } + } + + +} \ No newline at end of file diff --git a/assets/css/src/_main.scss b/assets/css/src/_main.scss index 9c76e40..af29f32 100644 --- a/assets/css/src/_main.scss +++ b/assets/css/src/_main.scss @@ -30,26 +30,6 @@ font-stretch: normal; } -:root { - --main-font: "neue-haas-grotesk-display", sans-serif; - --font-size-S: 0.9rem; - --font-size-L: 1.6rem; - --font-size-XL: 11vw; - --line-height-S: calc(var(--font-size-S) * 1.2); - --text-color: black; - --bg-color: white; - --body-margin: 0.6rem; - --nav-margin: 1rem; - --apparition-duration: 0.3s; - --disparition-duration: 0.3s; - --indentation: 2rem; - --low-opacity: 0.2; - --half-screen: 50vw; - --index-width: 40rem; - --close-cursor: url(/assets/images/close-cursor.png), crosshair; - --main-title-top: -0.7vw; - --mix-blend-color: white; -} body { font-family: var(--main-font); @@ -63,20 +43,10 @@ body { bottom: 0; } -main { - grid-template-columns: 8; -} - a { color: var(--text-color); } -h1 { - font-weight: normal; - line-height: inherit; - margin: 0; -} - p { box-sizing: border-box; margin: 0; @@ -95,239 +65,6 @@ ul { margin: 0; } -[data-template="infos"] p:first-of-type { - margin-top: var(--line-height-S); -} -#slideshow { - inset: 0; - position: absolute; - z-index: 0; -} -button#mobile-menu-toggle { - display: none; -} -/* PROJECT SLIDESHOW */ - -.project-slideshow { - width: -moz-fit-content; - width: fit-content; - height: -moz-fit-content; - height: fit-content; - box-sizing: border-box; - max-width: 100%; - right: 0; - position: absolute; - - picture img, - video.slide { - max-width: 100%; - max-height: calc(100vh - var(--body-margin) * 2); - vertical-align: bottom; - width: auto; - height: auto; - } -} - -picture { - inset: 0; -} - -.project-slideshow-container { - display: block; - position: fixed; - height: 100%; - background-color: white; - top: var(--body-margin); - right: var(--body-margin); - bottom: var(--body-margin); - left: calc(var(--index-width) + var(--body-margin)); - .closer { - inset: 0; - display: block; - position: absolute; - width: auto; - } -} - -button.prev { - position: absolute; - top: 0; - height: 100%; - border: none; - cursor: w-resize; - z-index: 1; - width: 50%; - left: 0; - padding: 0; -} - -button.next { - position: absolute; - top: 0; - right: 0; - height: 100%; - border: none; - cursor: e-resize; - z-index: 1; - width: 50%; - padding: 0; -} - -/* PROJECT TOGGLE */ - -.fix { - width: 100%; - z-index: 1; - position: relative; - /*! margin-top: var(--line-height-S); */ - display: grid; - grid-template-columns: var(--index-width) auto; - pointer-events: none; - mix-blend-mode: difference; -} - -.toggle { - display: none; - p { - z-index: 1; - position: relative; - width: calc(3 / 6 * var(--index-width) - var(--body-margin)); - display: none; - } -} - -.fix:hover + .toggle { - display: auto; -} - -.fix .date { - text-align: right; -} - -.closer { - cursor: var(--close-cursor); -} - -.projects-index:has(.selected) { - .project:not(.selected) { - opacity: var(--low-opacity); - pointer-events: none; - .fix:hover + .toggle .project-slideshow-container { - display: none; - } - } -} - -// PROJECT SLIDESHOW - -.toggle .project-slideshow-container { - display: none; -} - -.fix:hover + .toggle .project-slideshow-container { - display: block; -} - -.selected .toggle .project-slideshow-container { - display: block; -} - -// ------- - -.project:not(.selected):hover { - opacity: 1; - .toggle { - display: block; - } -} - -.project > .toggle > .close-button { - display: none; -} - -.selected { - opacity: 1; - .toggle { - display: grid; - grid-template-columns: - calc(3 / 6 * var(--index-width) - var(--body-margin)) - calc(3 / 6 * var(--index-width)); - gap: var(--body-margin); - p { - display: block; - } - } - .slide-number { - display: block; - } - .project-description { - display: block; - } - .toggle > .close-button { - display: block; - min-height: calc(var(--line-height-S) * 2); - margin-bottom: calc(-1 * var(--line-height-S)); - } -} - -.slide-number { - text-align: right; - display: none; - padding-right: var(--body-margin); - color: var(--mix-blend-color); -} - -.project-toggler.grid { - display: grid; - grid-template-columns: - calc(3 / 6 * var(--index-width) - var(--body-margin)) - calc(2 / 6 * var(--index-width) - var(--body-margin)) calc( - 1 / 6 * var(--index-width) - var(--body-margin) - ); - gap: var(--body-margin); - pointer-events: all; - cursor: inherit; -} - -.project-toggler span { - cursor: pointer; -} - -.project-description { - margin-bottom: var(--line-height-S); - display: none; -} - -/* INFOS */ - -[data-template="infos"] { - div { - padding-right: var(--body-margin); - } - main { - position: relative; - padding-top: calc(var(--line-height-S) + 0.35rem); - inset: 0; - display: flex; - flex-wrap: wrap; - padding-bottom: var(--font-size-XL); - overflow: auto; - padding-right: 0; - padding-left: 0; - } - - #mobile-menu { - z-index: 2; - } - - .main-infos { - max-width: 100%; - width: 660px; - } - .secondary-infos { - max-width: 100%; - } -} diff --git a/assets/css/src/_mobile.scss b/assets/css/src/_mobile.scss index 1b755b4..68f27be 100644 --- a/assets/css/src/_mobile.scss +++ b/assets/css/src/_mobile.scss @@ -17,6 +17,7 @@ left: 0; margin: 0; height: var(--slider-height); + button.all-projects-closer { display: none; } @@ -26,11 +27,13 @@ inset: 0; width: auto; height: auto; + picture, video.slide { inset: 0; position: absolute; } + picture img, video.slide { width: 100%; @@ -64,8 +67,7 @@ bottom: 0; left: 0; width: 100%; - padding: var(--font-size-XL) var(--body-margin) var(--body-margin) - var(--body-margin); + padding: var(--font-size-XL) var(--body-margin) var(--body-margin) var(--body-margin); box-sizing: border-box; } @@ -82,10 +84,12 @@ justify-content: center; align-items: center; inset: 0; + ul, h1 { z-index: 4; } + .backdrop { inset: 0; background-color: white; @@ -94,6 +98,7 @@ z-index: 3; cursor: pointer; } + .title-nav { position: absolute; line-break: strict; @@ -102,6 +107,7 @@ margin-top: var(--body-margin); line-height: 0.75; } + ul { display: flex; font-size: var(--font-size-L); @@ -131,7 +137,7 @@ margin: 0 auto; } - header:hover ~ main { + header:hover~main { opacity: 1; transition-duration: 0; } @@ -150,6 +156,12 @@ display: none; } + #home-slideshow .slide { + &.portrait-pair.active { + display: block; + } + } + .close-button.closer { position: fixed; top: var(--slider-height); @@ -208,6 +220,7 @@ main { z-index: 2; } + .filter-menu { padding-top: 0; } @@ -235,11 +248,11 @@ padding-bottom: calc(var(--font-size-XL)); } - .selected .fix:hover + .toggle { + .selected .fix:hover+.toggle { display: block; } - .fix:hover + .toggle { + .fix:hover+.toggle { display: none; } @@ -254,11 +267,35 @@ left: var(--body-margin); padding-right: 0; } + + .projects-index { + .project-description-mobile { + display: block; + } + + .project-description { + display: none; + } + } } body[data-template="infos"] { + main { - padding-top: var(--font-size-XL); + padding-top: var(--line-height-S); + .info-grid{ + display: block; + margin-top: 0; + .main-infos{ + max-width: 800px; + } + .secondary-infos{ + margin-top: var(--line-height-S); + max-width: 500px; + + } + } + } } } @@ -268,4 +305,4 @@ padding-right: var(--body-margin); width: calc(100% - var(--body-margin)); } -} +} \ No newline at end of file diff --git a/assets/css/src/_nav.scss b/assets/css/src/_nav.scss index 9f2282a..7bc5976 100644 --- a/assets/css/src/_nav.scss +++ b/assets/css/src/_nav.scss @@ -200,3 +200,4 @@ button#mobile-menu-toggle { #mobile-menu-wrapper { display: none; } + diff --git a/assets/css/src/_reset.scss b/assets/css/src/_reset.scss index 41e1b5c..9f20545 100644 --- a/assets/css/src/_reset.scss +++ b/assets/css/src/_reset.scss @@ -12,3 +12,11 @@ button { nav li { list-style: none; } + +h1, +h3 { + font-weight: normal; + font-size: inherit; + line-height: inherit; + margin: 0; +} \ No newline at end of file diff --git a/assets/css/src/_variables.scss b/assets/css/src/_variables.scss new file mode 100644 index 0000000..8b3d6c6 --- /dev/null +++ b/assets/css/src/_variables.scss @@ -0,0 +1,21 @@ + +:root { + --main-font: "neue-haas-grotesk-display", sans-serif; + --font-size-S: 0.9rem; + --font-size-L: 1.6rem; + --font-size-XL: 11vw; + --line-height-S: calc(var(--font-size-S) * 1.2); + --text-color: black; + --bg-color: white; + --body-margin: 0.6rem; + --nav-margin: 1rem; + --apparition-duration: 0.3s; + --disparition-duration: 0.3s; + --indentation: 2rem; + --low-opacity: 0.2; + --half-screen: 50vw; + --index-width: 40rem; + --close-cursor: url(/assets/images/close-cursor.png), crosshair; + --main-title-top: -0.7vw; + --mix-blend-color: white; +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index c53aa44..bc6227b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,35 +1,4 @@ @import url("https://p.typekit.net/p.css?s=1&k=wdg5nfi&ht=tk&f=39496.39497&a=95222337&app=typekit&e=css"); -button { - border: none; - padding: 0; - margin: 0; - text-align: inherit; - font: inherit; - cursor: pointer; - background-color: transparent; - color: inherit; -} - -nav li { - list-style: none; -} - -@font-face { - font-family: "neue-haas-grotesk-display"; - src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); - font-display: auto; - font-style: normal; - font-weight: 500; - font-stretch: normal; -} -@font-face { - font-family: "neue-haas-grotesk-display"; - src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); - font-display: auto; - font-style: italic; - font-weight: 500; - font-stretch: normal; -} :root { --main-font: "neue-haas-grotesk-display", sans-serif; --font-size-S: 0.9rem; @@ -51,6 +20,45 @@ nav li { --mix-blend-color: white; } +button { + border: none; + padding: 0; + margin: 0; + text-align: inherit; + font: inherit; + cursor: pointer; + background-color: transparent; + color: inherit; +} + +nav li { + list-style: none; +} + +h1, +h3 { + font-weight: normal; + font-size: inherit; + line-height: inherit; + margin: 0; +} + +@font-face { + font-family: "neue-haas-grotesk-display"; + src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); + font-display: auto; + font-style: normal; + font-weight: 500; + font-stretch: normal; +} +@font-face { + font-family: "neue-haas-grotesk-display"; + src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); + font-display: auto; + font-style: italic; + font-weight: 500; + font-stretch: normal; +} body { font-family: var(--main-font); font-size: var(--font-size-S); @@ -63,20 +71,10 @@ body { bottom: 0; } -main { - grid-template-columns: 8; -} - a { color: var(--text-color); } -h1 { - font-weight: normal; - line-height: inherit; - margin: 0; -} - p { box-sizing: border-box; margin: 0; @@ -96,223 +94,6 @@ ul { margin: 0; } -[data-template=infos] p:first-of-type { - margin-top: var(--line-height-S); -} - -#slideshow { - inset: 0; - position: absolute; - z-index: 0; -} - -button#mobile-menu-toggle { - display: none; -} - -/* PROJECT SLIDESHOW */ -.project-slideshow { - width: -moz-fit-content; - width: fit-content; - height: -moz-fit-content; - height: fit-content; - box-sizing: border-box; - max-width: 100%; - right: 0; - position: absolute; -} -.project-slideshow picture img, -.project-slideshow video.slide { - max-width: 100%; - max-height: calc(100vh - var(--body-margin) * 2); - vertical-align: bottom; - width: auto; - height: auto; -} - -picture { - inset: 0; -} - -.project-slideshow-container { - display: block; - position: fixed; - height: 100%; - background-color: white; - top: var(--body-margin); - right: var(--body-margin); - bottom: var(--body-margin); - left: calc(var(--index-width) + var(--body-margin)); -} -.project-slideshow-container .closer { - inset: 0; - display: block; - position: absolute; - width: auto; -} - -button.prev { - position: absolute; - top: 0; - height: 100%; - border: none; - cursor: w-resize; - z-index: 1; - width: 50%; - left: 0; - padding: 0; -} - -button.next { - position: absolute; - top: 0; - right: 0; - height: 100%; - border: none; - cursor: e-resize; - z-index: 1; - width: 50%; - padding: 0; -} - -/* PROJECT TOGGLE */ -.fix { - width: 100%; - z-index: 1; - position: relative; - /*! margin-top: var(--line-height-S); */ - display: grid; - grid-template-columns: var(--index-width) auto; - pointer-events: none; - mix-blend-mode: difference; -} - -.toggle { - display: none; -} -.toggle p { - z-index: 1; - position: relative; - width: calc(0.5 * var(--index-width) - var(--body-margin)); - display: none; -} - -.fix:hover + .toggle { - display: auto; -} - -.fix .date { - text-align: right; -} - -.closer { - cursor: var(--close-cursor); -} - -.projects-index:has(.selected) .project:not(.selected) { - opacity: var(--low-opacity); - pointer-events: none; -} -.projects-index:has(.selected) .project:not(.selected) .fix:hover + .toggle .project-slideshow-container { - display: none; -} - -.toggle .project-slideshow-container { - display: none; -} - -.fix:hover + .toggle .project-slideshow-container { - display: block; -} - -.selected .toggle .project-slideshow-container { - display: block; -} - -.project:not(.selected):hover { - opacity: 1; -} -.project:not(.selected):hover .toggle { - display: block; -} - -.project > .toggle > .close-button { - display: none; -} - -.selected { - opacity: 1; -} -.selected .toggle { - display: grid; - grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.5 * var(--index-width)); - gap: var(--body-margin); -} -.selected .toggle p { - display: block; -} -.selected .slide-number { - display: block; -} -.selected .project-description { - display: block; -} -.selected .toggle > .close-button { - display: block; - min-height: calc(var(--line-height-S) * 2); - margin-bottom: calc(-1 * var(--line-height-S)); -} - -.slide-number { - text-align: right; - display: none; - padding-right: var(--body-margin); - color: var(--mix-blend-color); -} - -.project-toggler.grid { - display: grid; - grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.3333333333 * var(--index-width) - var(--body-margin)) calc(0.1666666667 * var(--index-width) - var(--body-margin)); - gap: var(--body-margin); - pointer-events: all; - cursor: inherit; -} - -.project-toggler span { - cursor: pointer; -} - -.project-description { - margin-bottom: var(--line-height-S); - display: none; -} - -/* INFOS */ -[data-template=infos] div { - padding-right: var(--body-margin); -} -[data-template=infos] main { - position: relative; - padding-top: calc(var(--line-height-S) + 0.35rem); - inset: 0; - display: flex; - flex-wrap: wrap; - padding-bottom: var(--font-size-XL); - overflow: auto; - padding-right: 0; - padding-left: 0; -} -[data-template=infos] #mobile-menu { - z-index: 2; -} -[data-template=infos] .main-infos { - max-width: 100%; - width: 660px; -} -[data-template=infos] .secondary-infos { - max-width: 100%; -} - header { width: 100%; position: fixed; @@ -544,24 +325,23 @@ button#mobile-menu-toggle { -o-object-fit: cover; object-fit: cover; } -#home-slideshow .main-infos { - width: calc(0.75 * var(--index-width)); - position: relative; - float: left; +#home-slideshow button { + position: absolute; + width: 50%; + height: 100%; +} +#home-slideshow button.prev { + left: 0; + cursor: w-resize; +} +#home-slideshow button.next { + right: 0; + cursor: e-resize; } -.skills { - width: calc(0.5 * var(--index-width)); - position: relative; - float: left; +body[data-template=index] main { + grid-template-columns: 8; } - -.clients { - width: calc(0.5 * var(--index-width)); - position: relative; - float: left; -} - body[data-template=index] .filter-menu { font-size: var(--font-size-L); position: sticky; @@ -590,11 +370,223 @@ body[data-template=index] .projects-index li.filtered-out { body[data-template=index] .projects-index li section.toggle .project-slideshow .slide:not(.active) { display: none; } +body[data-template=index] .projects-index .project-description-mobile { + display: none; +} body[data-template=index] ul.projects-index { display: flex; flex-direction: column; gap: var(--line-height-S); } +body[data-template=index] { + /* PROJECT TOGGLE */ +} +body[data-template=index] .fix { + width: 100%; + z-index: 1; + position: relative; + /*! margin-top: var(--line-height-S); */ + display: grid; + grid-template-columns: var(--index-width) auto; + pointer-events: none; + mix-blend-mode: difference; +} +body[data-template=index] .toggle { + display: none; +} +body[data-template=index] .toggle p { + z-index: 1; + position: relative; + width: calc(0.5 * var(--index-width) - var(--body-margin)); + display: none; + padding-top: var(--line-height-S); +} +body[data-template=index] .fix:hover + .toggle { + display: auto; +} +body[data-template=index] .fix .date { + text-align: right; +} +body[data-template=index] .closer { + cursor: var(--close-cursor); +} +body[data-template=index] .projects-index:has(.selected) .project:not(.selected) { + opacity: var(--low-opacity); + pointer-events: none; +} +body[data-template=index] .projects-index:has(.selected) .project:not(.selected) .fix:hover + .toggle .project-slideshow-container { + display: none; +} +body[data-template=index] .toggle .project-slideshow-container { + display: none; +} +body[data-template=index] .fix:hover + .toggle .project-slideshow-container { + display: block; +} +body[data-template=index] .selected .toggle .project-slideshow-container { + display: block; +} +body[data-template=index] .project:not(.selected):hover { + opacity: 1; +} +body[data-template=index] .project:not(.selected):hover .toggle { + display: block; +} +body[data-template=index] .project > .toggle > .close-button { + display: none; +} +body[data-template=index] .selected { + opacity: 1; +} +body[data-template=index] .selected .toggle { + display: grid; + grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.5 * var(--index-width)); + gap: var(--body-margin); +} +body[data-template=index] .selected .toggle p { + display: block; +} +body[data-template=index] .selected .slide-number { + display: block; +} +body[data-template=index] .selected .project-description { + display: block; +} +body[data-template=index] .selected .toggle > .close-button { + display: block; + min-height: calc(var(--line-height-S) * 2); + margin-bottom: calc(-1 * var(--line-height-S)); +} +body[data-template=index] .slide-number { + text-align: right; + display: none; + padding-right: var(--body-margin); + color: var(--mix-blend-color); +} +body[data-template=index] .project-toggler.grid { + display: grid; + grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.3333333333 * var(--index-width) - var(--body-margin)) calc(0.1666666667 * var(--index-width) - var(--body-margin)); + gap: var(--body-margin); + pointer-events: all; + cursor: inherit; +} +body[data-template=index] .project-toggler span { + cursor: pointer; +} +body[data-template=index] .project-description { + margin-bottom: var(--line-height-S); + display: none; +} +body[data-template=index] { + /* PROJECT SLIDESHOW */ +} +body[data-template=index] .project-slideshow { + width: -moz-fit-content; + width: fit-content; + height: -moz-fit-content; + height: fit-content; + box-sizing: border-box; + max-width: 100%; + right: 0; + position: absolute; +} +body[data-template=index] .project-slideshow picture img, +body[data-template=index] .project-slideshow video.slide { + max-width: 100%; + max-height: calc(100vh - var(--body-margin) * 2); + vertical-align: bottom; + width: auto; + height: auto; +} +body[data-template=index] picture { + inset: 0; +} +body[data-template=index] .project-slideshow-container { + display: block; + position: fixed; + height: 100%; + background-color: white; + top: var(--body-margin); + right: var(--body-margin); + bottom: var(--body-margin); + left: calc(var(--index-width) + var(--body-margin)); +} +body[data-template=index] .project-slideshow-container .closer { + inset: 0; + display: block; + position: absolute; + width: auto; +} +body[data-template=index] button.prev { + position: absolute; + top: 0; + height: 100%; + border: none; + cursor: w-resize; + z-index: 1; + width: 50%; + left: 0; + padding: 0; +} +body[data-template=index] button.next { + position: absolute; + top: 0; + right: 0; + height: 100%; + border: none; + cursor: e-resize; + z-index: 1; + width: 50%; + padding: 0; +} + +[data-template=infos] header { + position: relative; +} +[data-template=infos] p { + margin: 0; +} +[data-template=infos] .main-title { + font-size: var(--font-size-XL); + line-break: strict; + left: -0.65vw; + position: relative; + top: var(--main-title-top); + margin-top: var(--body-margin); + line-height: 0.75; +} +[data-template=infos] .main-title:has(+ nav:hover) { + opacity: 1; +} +[data-template=infos] .title-nav { + opacity: 0; +} +[data-template=infos] main { + position: relative; + padding-top: calc(var(--line-height-S) + 0.35rem); + inset: 0; + padding-bottom: var(--font-size-XL); + overflow: auto; + padding-right: 0; + padding-left: 0; +} +[data-template=infos] .info-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: calc(var(--body-margin) * 2); + margin-top: calc(var(--font-size-L) + var(--line-height-S)); + max-width: 1700px; +} +[data-template=infos] .info-grid h3 { + text-decoration: underline; +} +[data-template=infos] .info-grid .presentation, [data-template=infos] .info-grid .clients { + margin-top: var(--line-height-S); +} +[data-template=infos] .info-grid .presentation { + font-size: var(--font-size-L); + line-height: 1.2; +} @media screen and (max-width: 1000px) { :root { @@ -730,6 +722,9 @@ body[data-template=index] ul.projects-index { #home-slideshow img:not(.slide.active img) { display: none; } + #home-slideshow .slide.portrait-pair.active { + display: block; + } .close-button.closer { position: fixed; top: var(--slider-height); @@ -811,8 +806,25 @@ body[data-template=index] ul.projects-index { left: var(--body-margin); padding-right: 0; } + body[data-template=index] .projects-index .project-description-mobile { + display: block; + } + body[data-template=index] .projects-index .project-description { + display: none; + } body[data-template=infos] main { - padding-top: var(--font-size-XL); + padding-top: var(--line-height-S); + } + body[data-template=infos] main .info-grid { + display: block; + margin-top: 0; + } + body[data-template=infos] main .info-grid .main-infos { + max-width: 800px; + } + body[data-template=infos] main .info-grid .secondary-infos { + margin-top: var(--line-height-S); + max-width: 500px; } } @media (max-width: 687px) { diff --git a/assets/css/style.css.map b/assets/css/style.css.map index a9a1797..2129370 100644 --- a/assets/css/style.css.map +++ b/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["src/_main.scss","src/_reset.scss","style.css","src/_nav.scss","src/_home.scss","src/_index.scss","src/_mobile.scss"],"names":[],"mappings":"AAAQ,yGAAA;ACAR;EACE,YAAA;EACA,UAAA;EACA,SAAA;EACA,mBAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;EACA,cAAA;ACEF;;ADCA;EACE,gBAAA;ACEF;;AFZA;EACE,wCAAA;EACA,sgBACE;EAMF,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AESF;AFNA;EACE,wCAAA;EACA,sgBACE;EAMF,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AEEF;AFCA;EACE,oDAAA;EACA,qBAAA;EACA,qBAAA;EACA,oBAAA;EACA,+CAAA;EACA,mBAAA;EACA,iBAAA;EACA,qBAAA;EACA,kBAAA;EACA,2BAAA;EACA,4BAAA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;EACA,oBAAA;EACA,+DAAA;EACA,wBAAA;EACA,wBAAA;AECF;;AFEA;EACE,6BAAA;EACA,6BAAA;EACA,iCAAA;EACA,0BAAA;EACA,MAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AECF;;AFEA;EACE,wBAAA;AECF;;AFEA;EACE,wBAAA;AECF;;AFEA;EACE,mBAAA;EACA,oBAAA;EACA,SAAA;AECF;;AFEA;EACE,sBAAA;EACA,SAAA;EACA,uBAAA;EAAA,kBAAA;EACA,eAAA;AECF;;AFEA;EACE,0CAAA;AECF;;AFEA;EACE,gBAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;AECF;;AFEA;EACE,gCAAA;AECF;;AFEA;EACE,QAAA;EACA,kBAAA;EACA,UAAA;AECF;;AFEA;EACE,aAAA;AECF;;AFEA,sBAAA;AAEA;EACE,uBAAA;EACA,kBAAA;EACA,wBAAA;EACA,mBAAA;EACA,sBAAA;EACA,eAAA;EACA,QAAA;EACA,kBAAA;AEAF;AFEE;EACE,eAAA;EACA,gDAAA;EACA,sBAAA;EACA,WAAA;EACA,YAAA;AEAJ;;AFIA;EACE,QAAA;AEDF;;AFIA;EACE,cAAA;EACA,eAAA;EACA,YAAA;EACA,uBAAA;EACA,uBAAA;EACA,yBAAA;EACA,0BAAA;EACA,mDAAA;AEDF;AFEE;EACE,QAAA;EACA,cAAA;EACA,kBAAA;EACA,WAAA;AEAJ;;AFIA;EACE,kBAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;AEDF;;AFIA;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;EACA,UAAA;EACA,UAAA;AEDF;;AFIA,mBAAA;AAEA;EACE,WAAA;EACA,UAAA;EACA,kBAAA;EACA,uCAAA;EACA,aAAA;EACA,8CAAA;EACA,oBAAA;EACA,0BAAA;AEFF;;AFKA;EACE,aAAA;AEFF;AFGE;EACE,UAAA;EACA,kBAAA;EACA,0DAAA;EACA,aAAA;AEDJ;;AFKA;EACE,aAAA;AEFF;;AFKA;EACE,iBAAA;AEFF;;AFKA;EACE,2BAAA;AEFF;;AFME;EACE,2BAAA;EACA,oBAAA;AEHJ;AFII;EACE,aAAA;AEFN;;AFSA;EACE,aAAA;AENF;;AFSA;EACE,cAAA;AENF;;AFSA;EACE,cAAA;AENF;;AFWA;EACE,UAAA;AERF;AFSE;EACE,cAAA;AEPJ;;AFWA;EACE,aAAA;AERF;;AFWA;EACE,UAAA;AERF;AFSE;EACE,aAAA;EACA,yGACE;EAEF,uBAAA;AETJ;AFUI;EACE,cAAA;AERN;AFWE;EACE,cAAA;AETJ;AFWE;EACE,cAAA;AETJ;AFWE;EACE,cAAA;EACA,0CAAA;EACA,8CAAA;AETJ;;AFaA;EACE,iBAAA;EACA,aAAA;EACA,iCAAA;EACA,6BAAA;AEVF;;AFaA;EACE,aAAA;EACA,oMACE;EAIF,uBAAA;EACA,mBAAA;EACA,eAAA;AEdF;;AFiBA;EACE,eAAA;AEdF;;AFiBA;EACE,mCAAA;EACA,aAAA;AEdF;;AFiBA,UAAA;AAGE;EACE,iCAAA;AEhBJ;AFkBE;EACE,kBAAA;EACA,iDAAA;EACA,QAAA;EACA,aAAA;EACA,eAAA;EACA,mCAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AEhBJ;AFmBE;EACE,UAAA;AEjBJ;AFoBE;EACE,eAAA;EACA,YAAA;AElBJ;AFoBE;EACE,eAAA;AElBJ;;ACvTA;EACE,WAAA;EACA,eAAA;EACA,UAAA;EACA,YAAA;EACA,iBAAA;AD0TF;;ACvTA;EACE,0CAAA;EACA,UAAA;EACA,gDAAA;EACA,4BAAA;EACA,kBAAA;EACA,oBAAA;EACA,UAAA;EACA,+BAAA;EACA,MAAA;EACA,8BAAA;EACA,oBAAA;AD0TF;ACxTE;EACE,gCAAA;EACA,UAAA;EACA,6BAAA;EACA,UAAA;EACA,kBAAA;AD0TJ;ACxTI;EACE,WAAA;EACA,wBAAA;AD0TN;ACxTM;EACE,gBAAA;EACA,qBAAA;EACA,uBAAA;EACA,eAAA;AD0TR;;ACpTA;EACE,8BAAA;EACA,kBAAA;EACA,aAAA;EACA,kBAAA;EACA,0BAAA;EACA,8BAAA;EACA,iBAAA;ADuTF;;ACpTA;EACE,qBAAA;EACA,iCAAA;ADuTF;;ACpTA;EACE,aAAA;ADuTF;;ACpTA;EACE,6BAAA;EACA,uBAAA;EACA,eAAA;EACA,uBAAA;EAAA,kBAAA;EACA,eAAA;ADuTF;;ACpTA;EACE,qBAAA;ADuTF;;ACpTA;EACE,UAAA;EACA,+CAAA;EACA,4BAAA;EACA,mBAAA;EACA,UAAA;ADuTF;;ACpTA;EACE,2BAAA;EACA,+CAAA;ADuTF;;ACpTA;EACE,gDAAA;EACA,4BAAA;ADuTF;;ACpTA;EACE,UAAA;EACA,+CAAA;ADuTF;;ACpTA;EACE,UAAA;EACA,+CAAA;ADuTF;;ACpTA;EACE,UAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;ADuTF;;ACpTA;EACE,0BAAA;ADuTF;;ACpTA;EACE,0BAAA;ADuTF;;ACpTA;EACE,0BAAA;ADuTF;;ACpTA,qBAAA;AAEA;EACE,8BAAA;EACA,kBAAA;EACA,aAAA;EACA,kBAAA;EACA,0BAAA;EACA,8BAAA;EACA,iBAAA;ADsTF;;ACnTA;EACE,kBAAA;ADsTF;;ACnTA;EACE,0BAAA;ADsTF;;ACnTA;EACE,6BAAA;ADsTF;;ACnTA;EACE;IACE,wBAAA;EDsTF;AACF;ACnTA,gBAAA;AAEA;EACE,eAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,8BAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADoTF;;ACjTA;EACE,UAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,aAAA;EACA,eAAA;EACA,0BAAA;EACA,WAAA;EACA,OAAA;EACA,sBAAA;EACA,uBAAA;EACA,UAAA;ADmTF;;AChTA;EACE,6BAAA;ADmTF;;AChTA;EACE,aAAA;EACA,aAAA;EACA,kBAAA;ADmTF;;AChTA;EACE,eAAA;EACA,2BAAA;ADmTF;;AChTA;EACE,aAAA;ADmTF;;AChTA;EACE,aAAA;ADmTF;;AE3fA;EACE,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;AF8fF;AE5fE;EACE,aAAA;EACA,WAAA;EACA,YAAA;AF8fJ;AE5fI;EACE,cAAA;AF8fN;AE3fI;EACE,aAAA;AF6fN;AE1fI;;EAEE,WAAA;EACA,YAAA;AF4fN;AEzfI;EACE,UAAA;EACA,YAAA;AF2fN;AEvfE;;EAEE,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;AFyfJ;AEtfE;EACE,sCAAA;EACA,kBAAA;EACA,WAAA;AFwfJ;;AEpfA;EACE,qCAAA;EACA,kBAAA;EACA,WAAA;AFufF;;AEpfA;EACE,qCAAA;EACA,kBAAA;EACA,WAAA;AFufF;;AG7iBE;EACE,6BAAA;EACA,gBAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,4CAAA;EACA,oDAAA;EACA,uBAAA;EACA,2CAAA;EACA,UAAA;EACA,eAAA;AHgjBJ;AG9iBI;EACE,0BAAA;AHgjBN;AG7iBI;EACE,aAAA;EACA,eAAA;EACA,6CAAA;OAAA,wCAAA;AH+iBN;AGziBM;EACE,aAAA;AH2iBR;AGtiBU;EACE,aAAA;AHwiBZ;AGjiBE;EACE,aAAA;EACA,sBAAA;EACA,yBAAA;AHmiBJ;;AI/kBA;EACE;IACE,qBAAA;IACA,sBAAA;IACA,qBAAA;IACA,sBAAA;EJklBF;EI/kBA;IACE,aAAA;EJilBF;EI9kBA;IACE,eAAA;IACA,MAAA;IACA,YAAA;IACA,OAAA;IACA,SAAA;IACA,4BAAA;EJglBF;EI/kBE;IACE,aAAA;EJilBJ;EI7kBA;IACE,QAAA;IACA,WAAA;IACA,YAAA;EJ+kBF;EI9kBE;IACE,QAAA;IACA,kBAAA;EJglBJ;EI/kBI;IACE,WAAA;IACA,YAAA;IACA,oBAAA;OAAA,iBAAA;EJilBN;EI5kBA;IACE,8BAAA;IACA,kBAAA;IACA,aAAA;IACA,kBAAA;IACA,0BAAA;IACA,8BAAA;IACA,iBAAA;EJ8kBF;EI3kBA;IACE,kCAAA;IACA,WAAA;EJ6kBF;EI1kBA;IACE,cAAA;EJ4kBF;EIzkBA;IACE,eAAA;IACA,MAAA;IACA,SAAA;IACA,OAAA;IACA,WAAA;IACA,qFAAA;IAEA,sBAAA;EJ0kBF;EIvkBA;IACE,yBAAA;IACA,cAAA;EJykBF;EItkBA;IACE,aAAA;EJwkBF;EIrkBA;IACE,uBAAA;IACA,mBAAA;IACA,QAAA;EJukBF;EItkBE;;IAEE,UAAA;EJwkBJ;EItkBE;IACE,QAAA;IACA,uBAAA;IACA,qCAAA;IACA,kBAAA;IACA,UAAA;IACA,eAAA;EJwkBJ;EItkBE;IACE,kBAAA;IACA,kBAAA;IACA,aAAA;IACA,0BAAA;IACA,8BAAA;IACA,iBAAA;EJwkBJ;EItkBE;IACE,aAAA;IACA,6BAAA;EJwkBJ;EIpkBA;IACE,eAAA;IACA,SAAA;IACA,WAAA;IACA,aAAA;IACA,uBAAA;IACA,UAAA;EJskBF;EInkBA;IACE,aAAA;EJqkBF;EIlkBA;IACE,8BAAA;IACA,eAAA;IACA,SAAA;IACA,2BAAA;IACA,gCAAA;IACA,cAAA;IACA,cAAA;EJokBF;EIjkBA;IACE,UAAA;IACA,sBAAA;EJmkBF;EIhkBA;IACE,UAAA;IACA,sBAAA;EJkkBF;EI/jBA;IACE,UAAA;IACA,sBAAA;EJikBF;EI9jBA;IACE,aAAA;EJgkBF;EI7jBA;IACE,eAAA;IACA,yBAAA;IACA,+CAAA;IACA,yBAAA;IACA,6BAAA;IACA,eAAA;IACA,0BAAA;IACA,6BAAA;EJ+jBF;EI5jBA;IACE,iBAAA;EJ8jBF;EI3jBA;IACE,cAAA;EJ6jBF;EI1jBA;IACE,QAAA;IACA,uBAAA;IACA,WAAA;IACA,WAAA;IACA,4BAAA;EJ4jBF;EIzjBA;IACE,qBAAA;EJ2jBF;EIxjBA;IACE,0BAAA;EJ0jBF;EIvjBA;IACE,0BAAA;EJyjBF;EItjBA;IACE,0BAAA;EJwjBF;EIpjBE;IACE,6BAAA;IACA,0BAAA;EJsjBJ;EInjBE;IACE,aAAA;EJqjBJ;EIhjBE;IACE,UAAA;EJkjBJ;EIhjBE;IACE,cAAA;EJkjBJ;EI/iBE;IACE,kBAAA;IACA,MAAA;IAEA,sBAAA;IACA,uCAAA;IACA,aAAA;IACA,cAAA;IAEA,qBAAA;IACA,iEAAA;IACA,yCAAA;EJ+iBJ;EI5iBE;IACE,yBAAA;IAEA,0CAAA;IAEA,iCAAA;IACA,yCAAA;EJ4iBJ;EIziBE;IACE,cAAA;EJ2iBJ;EIxiBE;IACE,aAAA;EJ0iBJ;EIviBE;IACE,cAAA;EJyiBJ;EItiBE;IACE,eAAA;IACA,yBAAA;IACA,6CAAA;IACA,wBAAA;IACA,gBAAA;EJwiBJ;EIniBE;IACE,gCAAA;EJqiBJ;AACF;AIjiBA;EACE;IACE,iCAAA;IACA,sCAAA;EJmiBF;AACF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["src/_main.scss","src/_variables.scss","style.css","src/_reset.scss","src/_nav.scss","src/_home.scss","src/_index.scss","src/_infos.scss","src/_mobile.scss"],"names":[],"mappings":"AAAQ,yGAAA;ACCR;EACE,oDAAA;EACA,qBAAA;EACA,qBAAA;EACA,oBAAA;EACA,+CAAA;EACA,mBAAA;EACA,iBAAA;EACA,qBAAA;EACA,kBAAA;EACA,2BAAA;EACA,4BAAA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;EACA,oBAAA;EACA,+DAAA;EACA,wBAAA;EACA,wBAAA;ACCF;;ACpBA;EACE,YAAA;EACA,UAAA;EACA,SAAA;EACA,mBAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;EACA,cAAA;ADuBF;;ACpBA;EACE,gBAAA;ADuBF;;ACpBA;;EAEE,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,SAAA;ADuBF;;AFzCA;EACE,wCAAA;EACA,sgBACE;EAMF,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AEsCF;AFnCA;EACE,wCAAA;EACA,sgBACE;EAMF,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AE+BF;AF3BA;EACE,6BAAA;EACA,6BAAA;EACA,iCAAA;EACA,0BAAA;EACA,MAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AE6BF;;AF1BA;EACE,wBAAA;AE6BF;;AF1BA;EACE,sBAAA;EACA,SAAA;EACA,uBAAA;EAAA,kBAAA;EACA,eAAA;AE6BF;;AF1BA;EACE,0CAAA;AE6BF;;AF1BA;EACE,gBAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;AE6BF;;AE7FA;EACE,WAAA;EACA,eAAA;EACA,UAAA;EACA,YAAA;EACA,iBAAA;AFgGF;;AE7FA;EACE,0CAAA;EACA,UAAA;EACA,gDAAA;EACA,4BAAA;EACA,kBAAA;EACA,oBAAA;EACA,UAAA;EACA,+BAAA;EACA,MAAA;EACA,8BAAA;EACA,oBAAA;AFgGF;AE9FE;EACE,gCAAA;EACA,UAAA;EACA,6BAAA;EACA,UAAA;EACA,kBAAA;AFgGJ;AE9FI;EACE,WAAA;EACA,wBAAA;AFgGN;AE9FM;EACE,gBAAA;EACA,qBAAA;EACA,uBAAA;EACA,eAAA;AFgGR;;AE1FA;EACE,8BAAA;EACA,kBAAA;EACA,aAAA;EACA,kBAAA;EACA,0BAAA;EACA,8BAAA;EACA,iBAAA;AF6FF;;AE1FA;EACE,qBAAA;EACA,iCAAA;AF6FF;;AE1FA;EACE,aAAA;AF6FF;;AE1FA;EACE,6BAAA;EACA,uBAAA;EACA,eAAA;EACA,uBAAA;EAAA,kBAAA;EACA,eAAA;AF6FF;;AE1FA;EACE,qBAAA;AF6FF;;AE1FA;EACE,UAAA;EACA,+CAAA;EACA,4BAAA;EACA,mBAAA;EACA,UAAA;AF6FF;;AE1FA;EACE,2BAAA;EACA,+CAAA;AF6FF;;AE1FA;EACE,gDAAA;EACA,4BAAA;AF6FF;;AE1FA;EACE,UAAA;EACA,+CAAA;AF6FF;;AE1FA;EACE,UAAA;EACA,+CAAA;AF6FF;;AE1FA;EACE,UAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;AF6FF;;AE1FA;EACE,0BAAA;AF6FF;;AE1FA;EACE,0BAAA;AF6FF;;AE1FA;EACE,0BAAA;AF6FF;;AE1FA,qBAAA;AAEA;EACE,8BAAA;EACA,kBAAA;EACA,aAAA;EACA,kBAAA;EACA,0BAAA;EACA,8BAAA;EACA,iBAAA;AF4FF;;AEzFA;EACE,kBAAA;AF4FF;;AEzFA;EACE,0BAAA;AF4FF;;AEzFA;EACE,6BAAA;AF4FF;;AEzFA;EACE;IACE,wBAAA;EF4FF;AACF;AEzFA,gBAAA;AAEA;EACE,eAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,8BAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;AF0FF;;AEvFA;EACE,UAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,aAAA;EACA,eAAA;EACA,0BAAA;EACA,WAAA;EACA,OAAA;EACA,sBAAA;EACA,uBAAA;EACA,UAAA;AFyFF;;AEtFA;EACE,6BAAA;AFyFF;;AEtFA;EACE,aAAA;EACA,aAAA;EACA,kBAAA;AFyFF;;AEtFA;EACE,eAAA;EACA,2BAAA;AFyFF;;AEtFA;EACE,aAAA;AFyFF;;AEtFA;EACE,aAAA;AFyFF;;AGjSA;EACE,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;AHoSF;AGlSE;EACE,aAAA;EACA,WAAA;EACA,YAAA;AHoSJ;AGlSI;EACE,cAAA;AHoSN;AGjSI;EACE,aAAA;AHmSN;AGhSI;;EAEE,WAAA;EACA,YAAA;AHkSN;AG/RI;EACE,UAAA;EACA,YAAA;AHiSN;AG7RE;;EAEE,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;AH+RJ;AG5RE;EACE,kBAAA;EACA,UAAA;EACA,YAAA;AH8RJ;AG7RI;EACE,OAAA;EACA,gBAAA;AH+RN;AG7RI;EACE,QAAA;EACA,gBAAA;AH+RN;;AI9UE;EACA,wBAAA;AJiVF;AI9UE;EACE,6BAAA;EACA,gBAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,4CAAA;EACA,oDAAA;EACA,uBAAA;EACA,2CAAA;EACA,UAAA;EACA,eAAA;AJgVJ;AI9UI;EACE,0BAAA;AJgVN;AI7UI;EACE,aAAA;EACA,eAAA;EACA,6CAAA;OAAA,wCAAA;AJ+UN;AIzUM;EACE,aAAA;AJ2UR;AItUU;EACE,aAAA;AJwUZ;AIlUI;EACE,aAAA;AJoUN;AIhUE;EACE,aAAA;EACA,sBAAA;EACA,yBAAA;AJkUJ;AIvXA;EAwDE,mBAAA;AJkUF;AIhUE;EACE,WAAA;EACA,UAAA;EACA,kBAAA;EACA,uCAAA;EACA,aAAA;EACA,8CAAA;EACA,oBAAA;EACA,0BAAA;AJkUJ;AI/TE;EACE,aAAA;AJiUJ;AI/TI;EACE,UAAA;EACA,kBAAA;EACA,0DAAA;EACA,aAAA;EACA,iCAAA;AJiUN;AI7TE;EACE,aAAA;AJ+TJ;AI5TE;EACE,iBAAA;AJ8TJ;AI3TE;EACE,2BAAA;AJ6TJ;AIzTI;EACE,2BAAA;EACA,oBAAA;AJ2TN;AIzTM;EACE,aAAA;AJ2TR;AIpTE;EACE,aAAA;AJsTJ;AInTE;EACE,cAAA;AJqTJ;AIlTE;EACE,cAAA;AJoTJ;AI/SE;EACE,UAAA;AJiTJ;AI/SI;EACE,cAAA;AJiTN;AI7SE;EACE,aAAA;AJ+SJ;AI5SE;EACE,UAAA;AJ8SJ;AI5SI;EACE,aAAA;EACA,yGACE;EACF,uBAAA;AJ6SN;AI3SM;EACE,cAAA;AJ6SR;AIzSI;EACE,cAAA;AJ2SN;AIxSI;EACE,cAAA;AJ0SN;AIvSI;EACE,cAAA;EACA,0CAAA;EACA,8CAAA;AJySN;AIrSE;EACE,iBAAA;EACA,aAAA;EACA,iCAAA;EACA,6BAAA;AJuSJ;AIpSE;EACE,aAAA;EACA,oMACE;EACF,uBAAA;EACA,mBAAA;EACA,eAAA;AJqSJ;AIlSE;EACE,eAAA;AJoSJ;AIjSE;EACE,mCAAA;EACA,aAAA;AJmSJ;AI1dA;EA2LA,sBAAA;AJkSA;AIhSA;EACE,uBAAA;EACA,kBAAA;EACA,wBAAA;EACA,mBAAA;EACA,sBAAA;EACA,eAAA;EACA,QAAA;EACA,kBAAA;AJkSF;AIhSE;;EAEE,eAAA;EACA,gDAAA;EACA,sBAAA;EACA,WAAA;EACA,YAAA;AJkSJ;AI9RA;EACE,QAAA;AJgSF;AI7RA;EACE,cAAA;EACA,eAAA;EACA,YAAA;EACA,uBAAA;EACA,uBAAA;EACA,yBAAA;EACA,0BAAA;EACA,mDAAA;AJ+RF;AI9RE;EACE,QAAA;EACA,cAAA;EACA,kBAAA;EACA,WAAA;AJgSJ;AI5RA;EACE,kBAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;AJ8RF;AI3RA;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;EACA,UAAA;EACA,UAAA;AJ6RF;;AKthBI;EACI,kBAAA;ALyhBR;AKthBI;EACI,SAAA;ALwhBR;AKrhBI;EACI,8BAAA;EACA,kBAAA;EACA,aAAA;EACA,kBAAA;EACA,0BAAA;EACA,8BAAA;EACA,iBAAA;ALuhBR;AKphBI;EACI,UAAA;ALshBR;AKnhBI;EACI,UAAA;ALqhBR;AKlhBI;EACI,kBAAA;EACA,iDAAA;EACA,QAAA;EACA,mCAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;ALohBR;AKjhBI;EACI,aAAA;EACA,kCAAA;EACA,iCAAA;EACA,2DAAA;EACA,iBAAA;ALmhBR;AKjhBQ;EACI,0BAAA;ALmhBZ;AKjhBQ;EACI,gCAAA;ALmhBZ;AKjhBQ;EACI,6BAAA;EACA,gBAAA;ALmhBZ;;AMxkBA;EACE;IACE,qBAAA;IACA,sBAAA;IACA,qBAAA;IACA,sBAAA;EN2kBF;EMxkBA;IACE,aAAA;EN0kBF;EMvkBA;IACE,eAAA;IACA,MAAA;IACA,YAAA;IACA,OAAA;IACA,SAAA;IACA,4BAAA;ENykBF;EMvkBE;IACE,aAAA;ENykBJ;EMrkBA;IACE,QAAA;IACA,WAAA;IACA,YAAA;ENukBF;EMrkBE;;IAEE,QAAA;IACA,kBAAA;ENukBJ;EMpkBE;;IAEE,WAAA;IACA,YAAA;IACA,oBAAA;OAAA,iBAAA;ENskBJ;EMlkBA;IACE,8BAAA;IACA,kBAAA;IACA,aAAA;IACA,kBAAA;IACA,0BAAA;IACA,8BAAA;IACA,iBAAA;ENokBF;EMjkBA;IACE,kCAAA;IACA,WAAA;ENmkBF;EMhkBA;IACE,cAAA;ENkkBF;EM/jBA;IACE,eAAA;IACA,MAAA;IACA,SAAA;IACA,OAAA;IACA,WAAA;IACA,qFAAA;IACA,sBAAA;ENikBF;EM9jBA;IACE,yBAAA;IACA,cAAA;ENgkBF;EM7jBA;IACE,aAAA;EN+jBF;EM5jBA;IACE,uBAAA;IACA,mBAAA;IACA,QAAA;EN8jBF;EM5jBE;;IAEE,UAAA;EN8jBJ;EM3jBE;IACE,QAAA;IACA,uBAAA;IACA,qCAAA;IACA,kBAAA;IACA,UAAA;IACA,eAAA;EN6jBJ;EM1jBE;IACE,kBAAA;IACA,kBAAA;IACA,aAAA;IACA,0BAAA;IACA,8BAAA;IACA,iBAAA;EN4jBJ;EMzjBE;IACE,aAAA;IACA,6BAAA;EN2jBJ;EMvjBA;IACE,eAAA;IACA,SAAA;IACA,WAAA;IACA,aAAA;IACA,uBAAA;IACA,UAAA;ENyjBF;EMtjBA;IACE,aAAA;ENwjBF;EMrjBA;IACE,8BAAA;IACA,eAAA;IACA,SAAA;IACA,2BAAA;IACA,gCAAA;IACA,cAAA;IACA,cAAA;ENujBF;EMpjBA;IACE,UAAA;IACA,sBAAA;ENsjBF;EMnjBA;IACE,UAAA;IACA,sBAAA;ENqjBF;EMljBA;IACE,UAAA;IACA,sBAAA;ENojBF;EMjjBA;IACE,aAAA;ENmjBF;EM/iBE;IACE,cAAA;ENijBJ;EM7iBA;IACE,eAAA;IACA,yBAAA;IACA,+CAAA;IACA,yBAAA;IACA,6BAAA;IACA,eAAA;IACA,0BAAA;IACA,6BAAA;EN+iBF;EM5iBA;IACE,iBAAA;EN8iBF;EM3iBA;IACE,cAAA;EN6iBF;EM1iBA;IACE,QAAA;IACA,uBAAA;IACA,WAAA;IACA,WAAA;IACA,4BAAA;EN4iBF;EMziBA;IACE,qBAAA;EN2iBF;EMxiBA;IACE,0BAAA;EN0iBF;EMviBA;IACE,0BAAA;ENyiBF;EMtiBA;IACE,0BAAA;ENwiBF;EMpiBE;IACE,6BAAA;IACA,0BAAA;ENsiBJ;EMniBE;IACE,aAAA;ENqiBJ;EMhiBE;IACE,UAAA;ENkiBJ;EM/hBE;IACE,cAAA;ENiiBJ;EM9hBE;IACE,kBAAA;IACA,MAAA;IAEA,sBAAA;IACA,uCAAA;IACA,aAAA;IACA,cAAA;IAEA,qBAAA;IACA,iEAAA;IACA,yCAAA;EN8hBJ;EM3hBE;IACE,yBAAA;IAEA,0CAAA;IAEA,iCAAA;IACA,yCAAA;EN2hBJ;EMxhBE;IACE,cAAA;EN0hBJ;EMvhBE;IACE,aAAA;ENyhBJ;EMthBE;IACE,cAAA;ENwhBJ;EMrhBE;IACE,eAAA;IACA,yBAAA;IACA,6CAAA;IACA,wBAAA;IACA,gBAAA;ENuhBJ;EMnhBI;IACE,cAAA;ENqhBN;EMlhBI;IACE,aAAA;ENohBN;EM7gBE;IACE,iCAAA;EN+gBJ;EM9gBI;IACE,cAAA;IACA,aAAA;ENghBN;EM/gBM;IACE,gBAAA;ENihBR;EM/gBM;IACI,gCAAA;IACA,gBAAA;ENihBV;AACF;AMzgBA;EACE;IACE,iCAAA;IACA,sCAAA;EN2gBF;AACF","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 8e3b530..af5fa2a 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,6 +1,8 @@ +@import "src/_variables.scss"; @import "src/_reset.scss"; @import "src/_main.scss"; @import "src/_nav.scss"; @import "src/_home.scss"; @import "src/_index.scss"; +@import "src/_infos.scss"; @import "src/_mobile.scss"; diff --git a/assets/images/._close-cursor.png b/assets/images/._close-cursor.png deleted file mode 100644 index 1ae28c1b35a457dc6afbc39aa93ec4f6eee5172c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4096 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDJkFz{^v(m+1nBL)UWIUt(=a103v`v3o~ zCPW9r44`suG%bukK2%&ZIX_n~v7jI)Rj;5ZzbrK`F)ullfsu*9oH2njSvs=~P3tIk zGz3ONU^E0qLtr!nMnhmU1V%$(Gz3ONU^E0qLtr!nu!jJsvkAgrAQzI6S*%c$TAW{6 zl$@%NmS2>ukeOGKnpcvUpO=`EQ>l=XnpUEal#`g34eSd;bq#3>)&Fp>$S}zL{|^9% COetLe diff --git a/assets/images/._close-cursor.svg b/assets/images/._close-cursor.svg deleted file mode 100644 index 6bc1ceedf5cc392413d227364fb208a19ea7a221..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4096 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDJkFz{^v(m+1nBL)UWIUt(=a103v`v3o) z5LAZ;Q28k|Ev!J3K;q&I45G>Txq68O1v#mDg{6r_iFqZNd8t4t#&{sX4^)DX4@s>k zam`E4Psz+n2OG$k2c)=B%qS?zFH6l!%u5EFQ3;e6U|^6!n30oMTvA$`nv#-OlBygK z%wWO@^ciC(P#qAPBh=-lmLvkzBwA(ry7(j}rRKz!n3raoXBAiFWEU7G7ANLpr5NR= zCFZ1?fow7`urRYWOEfS^G&MH220Jt*v&6czBu&@C+R)g<$k5!<0%VstV*+QgbY@$J zv3eFz9|Kp~S1AzvsVlqt+JguC{EnO|ba=i`y&$!1?xxwjO7aC^#e%cmUb3;(WZ~QG z)3#cS#d|`4ld9GEDFur+PVP_T7O?J|&}DI1HN*d}Shn*8ud-?$zVj}-0&Q=kZeYB= zmgDx*Ij43_RAE+qS>mwhj@0q`Id(qs8&|Ou+irp z$T6c}Gz3ONU^E0qLtr!nMnhmU1V%$(Gz3ONU^E1VW(Y6>oejcZAQzI6S*%c$TAW{6 zl$@%NmS2>ukeOGK3hZ{~=OyOkR4U}8rj;lp+zvnYle9jf$UmhJkRG2+mV1?7F$ZEa3^;&n2F6{SW#VejGnIl*&`0(KE zW_53KJ1$dMD@xy3t?1Urg;Hg`?>M#MN(%c#p6)DttdrqfatE0RTpoG7UN~n#5(aVL zG3v$W2QlZ&ABY5fUvvhOZ0*`*e(bE7lgKo6P9he%9e2Fg>GU{a+FjLIL~Y-Xm`$m+ zDEs#_{^P5|b)EN5O^S8atTPSGk2ojRE9wSp=yTdffnqq76(+?gIm9)lMTr%e%%ze= zKBNa@zdz}RUC(D;*Bg)e-H|_KT{b=FO@eSh$76PGV`CZuhJYbp2p9r}fFWQA7y^dC zr6$mn7(dGlXwMe1CKcAjsuD<&qFNG}E7WCTk@GZtNm5J{iBq00buD}uz+8O)uNU2i H_ICRN36; window.innerWidth; + } + + function isSkipped(index) { + const el = items[index]; + if (isPortrait() && el.classList.contains("desktop-only")) return true; + if (!isPortrait() && el.classList.contains("mobile-only")) return true; + return false; } function findNext(from, direction) { let index = (from + direction + items.length) % items.length; let steps = 0; - while (isDesktopOnly(index) && steps < items.length) { + while (isSkipped(index) && steps < items.length) { index = (index + direction + items.length) % items.length; steps++; } @@ -35,4 +38,11 @@ if (slideshow) { prev?.addEventListener("click", () => goTo(findNext(current, -1))); next?.addEventListener("click", () => goTo(findNext(current, 1))); -} + + // Recalculer la slide active si on tourne l'écran + window.addEventListener("orientationchange", () => { + if (isSkipped(current)) { + goTo(findNext(current, 1)); + } + }); +} \ No newline at end of file diff --git a/site/blueprints/pages/infos.yml b/site/blueprints/pages/infos.yml index f0da196..14b0583 100644 --- a/site/blueprints/pages/infos.yml +++ b/site/blueprints/pages/infos.yml @@ -1,18 +1,36 @@ -label: À propos +title: À propos icon: info -sections: - Fields: - type: fields - fields: - presentation: - label: Presentation - type: writer - contact: - label: Contact - type: writer - skills: - label: Compétences - type: writer - clients: - label: Clients - type: writer + +columns: + - width: 1/3 + sections: + info-fields: + type: fields + fields: + contact: + label: Contact + type: writer + presentation: + label: Presentation + type: writer + help: Si besoin d'insérrer une espace fine insécable, copier-coller le caractère entre guillemets « » + - width: 1/3 + sections: + service-fields: + type: fields + fields: + services: + label: Services + type: writer + clients: + label: Clients + type: writer + - width: 1/3 + sections: + extra-fields: + type: fields + fields: + complementaryInfos: + label: Informations complémentaires + type: writer + diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml index c9c526e..63e7330 100644 --- a/site/blueprints/pages/project.yml +++ b/site/blueprints/pages/project.yml @@ -44,4 +44,8 @@ tabs: description: label: Description type: writer + help: Si besoin d'insérrer une espace fine insécable, copier-coller le caractère entre guillemets « » + descriptionMobile: + label: Description pour mobile + type: writer files: tabs/files diff --git a/site/templates/home.php b/site/templates/home.php index 5d0fc90..1fcc720 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -4,12 +4,21 @@
+ + + -
+
$slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?> $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
+
+ $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?> +
+
+ $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?> +
type() === 'video'): ?>
+ diff --git a/site/templates/index.php b/site/templates/index.php index 5a5c590..218b789 100644 --- a/site/templates/index.php +++ b/site/templates/index.php @@ -61,6 +61,7 @@
description() ?>
+
descriptionMobile() ?>
diff --git a/site/templates/infos.php b/site/templates/infos.php index 432edc7..6ad26ca 100644 --- a/site/templates/infos.php +++ b/site/templates/infos.php @@ -2,23 +2,37 @@ +
-
-

- presentation() ?> -

-
-
-
-

- contact() ?>
- skills() ?> -

-
-
- clients() ?> -
-
+
+
+

+ contact() ?> +

+
+
+

presentation()->html() ?>

+
+
+ +
+
+

Services

+

+ services() ?> +

+
+
+

Clients

+ clients() ?> +
+
+ +
+ complementaryInfos() ?> +
+ +
\ No newline at end of file diff --git a/site/templates/test.html b/site/templates/test.html new file mode 100644 index 0000000..199111a --- /dev/null +++ b/site/templates/test.html @@ -0,0 +1,13 @@ + + + + + + Document + + + +   + + + \ No newline at end of file