diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss index 4294b8f..fcdbc8f 100644 --- a/assets/css/abstracts/_variables.scss +++ b/assets/css/abstracts/_variables.scss @@ -13,7 +13,11 @@ $default-line-height: 1.15; $black: #000; $white: #fff; -// ----- DIMENSIONS +// ----- DIMENSIONS (viewport range for fluid dimensions: 48rem <=> 120rem) + +// Media queries +$tablet-media-query: 48rem; // => 768px +$desktop-media-query: 62rem; // => 992px // Content $content-width-xs: 40rem; // => 640px @@ -22,18 +26,15 @@ $content-width-m: 80rem; // => 1280px $content-width-l: 100rem; // => 1600px $content-width-xl: 120rem; // => 1920px -// Sidebar -$sidebar-padding-x: clamp(0.75rem, -0.75rem + 3.125vw, 3rem); // Viewport range: 48rem <=> 120rem -$sidebar-padding-y: clamp(0.75rem, 0.25rem + 1.042vw, 1.5rem); // Viewport range: 48rem <=> 120rem - // Logo -$logo-portrait-width: clamp(2rem, 1.333rem + 1.389vw, 3rem); // Viewport range: 48rem <=> 120rem -$logo-landscape-width: calc($logo-portrait-width * 2); +$logo-width-portrait: clamp(2rem, 1.333rem + 1.389vw, 3rem); +$logo-width-landscape: calc($logo-width-portrait * 2); -// Icons -$icon-size: clamp(2rem, 1.667rem + 0.694vw, 2.5rem); // Viewport range: 48rem <=> 120rem -$icon-spacing: clamp(0.25rem, 0.083rem + 0.347vw, 0.5rem); // Viewport range: 48rem <=> 120rem +// Sidebars +$sidebar-width-portrait: calc($logo-width-portrait + clamp(1rem, -4.333rem + 11.111vw, 9rem)); +$sidebar-width-landscape: calc($logo-width-landscape + clamp(1rem, -4.333rem + 11.111vw, 9rem)); +$sidebar-padding-y: clamp(0.75rem, 0.25rem + 1.042vw, 1.5rem); -// Media queries -$tablet-media-query: 48rem; // => 768px -$desktop-media-query: 62rem; // => 992px +// Main +$main-padding-y-portrait: calc(($sidebar-padding-y * 2) + ($logo-width-portrait * 2)); +$main-padding-y-landscape: calc(($sidebar-padding-y * 2) + ($logo-width-landscape / 2)); diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss index fb3cae6..f9a2fea 100644 --- a/assets/css/base/_base.scss +++ b/assets/css/base/_base.scss @@ -15,7 +15,6 @@ body { a { color: $black; text-decoration: underline; - text-underline-position: under; &:focus-visible { outline: 1px dashed $black; @@ -43,12 +42,16 @@ body { #app { position: relative; display: grid; - grid-template-columns: 1fr minmax(min-content, $content-width-m) 1fr; - justify-content: center; + grid-template-columns: $sidebar-width-portrait minmax(min-content, $content-width-m) $sidebar-width-portrait; + justify-content: space-evenly; justify-items: center; width: 100%; max-width: $content-width-xl; + @media (orientation: landscape) { + grid-template-columns: $sidebar-width-landscape minmax(min-content, $content-width-m) $sidebar-width-landscape; + } + header { grid-column: 1; display: flex; @@ -59,19 +62,19 @@ body { width: 100%; height: 100vh; // Fallback in case dvh unit is not supported height: 100dvh; - padding: $sidebar-padding-y $sidebar-padding-x; + padding: $sidebar-padding-y 0; .header__logo { display: block; position: relative; - width: $logo-portrait-width; + width: $logo-width-portrait; aspect-ratio: calc(1 / 2); background-image: url("/public/images/signature-portrait.svg"); background-size: contain; background-position: center; @media (orientation: landscape) { - width: $logo-landscape-width; + width: $logo-width-landscape; aspect-ratio: calc(2 / 1); background-image: url("/public/images/signature-landscape.svg"); } @@ -83,44 +86,10 @@ body { display: flex; flex-direction: column; align-items: center; - padding: calc(($sidebar-padding-y * 2) + ($logo-portrait-width * 2)) 0; + padding: $main-padding-y-portrait 0; @media (orientation: landscape) { - padding: calc(($sidebar-padding-y * 2) + ($logo-landscape-width / 2)) 0; - } - } - - footer { - grid-column: 3; - position: sticky; - top: 0; - width: 100%; - height: 100vh; // Fallback in case dvh unit is not supported - height: 100dvh; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - gap: $icon-spacing; - padding: $sidebar-padding-y $sidebar-padding-x; - - @media (orientation: landscape) { - flex-direction: row; - justify-content: center; - align-items: flex-end; - } - - .footer__link { - display: flex; - justify-content: center; - align-items: center; - width: $icon-size; - aspect-ratio: 1; - - svg { - width: 100%; - height: 100%; - } + padding: $main-padding-y-landscape 0; } } } diff --git a/assets/css/pages/_cv.scss b/assets/css/pages/_cv.scss index 8ffd39b..c0473bd 100644 --- a/assets/css/pages/_cv.scss +++ b/assets/css/pages/_cv.scss @@ -13,19 +13,16 @@ .cv__content { display: grid; grid-template-columns: auto 1fr; - column-gap: 0.5rem; - row-gap: 1rem; + gap: 0.5rem; max-width: $content-width-s; > h2 { grid-column: 1 / span 2; - font-size: 1rem; - font-weight: 700; + margin: 0.5rem 0; } > h3 { grid-column: 1 / span 1; - font-weight: 700; } > p { diff --git a/assets/css/pages/_home.scss b/assets/css/pages/_home.scss index a20d9ca..a56980f 100644 --- a/assets/css/pages/_home.scss +++ b/assets/css/pages/_home.scss @@ -53,7 +53,7 @@ .home__image-caption { display: table-caption; caption-side: bottom; - margin: 0.5rem 0 0; + margin: 0.25rem 0 0; } } } diff --git a/public/build/main.css b/public/build/main.css index 2c6775c..11221e3 100644 --- a/public/build/main.css +++ b/public/build/main.css @@ -1 +1 @@ -@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:.9rem;line-height:1.15}a,body{color:#000}a{text-decoration:underline;text-underline-position:under}a:focus-visible{outline:1px dashed #000;outline-offset:2px}strong{font-weight:700}em{font-style:italic}body{align-items:center;display:flex;flex-direction:column}body #app{display:grid;grid-template-columns:1fr minmax(min-content,80rem) 1fr;justify-content:center;justify-items:center;max-width:120rem;position:relative;width:100%}body #app header{align-items:center;display:flex;flex-direction:column;grid-column:1;height:100vh;height:100dvh;padding:clamp(.75rem,.25rem + 1.042vw,1.5rem) clamp(.75rem,-.75rem + 3.125vw,3rem);position:sticky;top:0;width:100%}body #app header .header__logo{aspect-ratio:.5;background-image:url(/build/images/signature-portrait.195b0490.svg);background-position:50%;background-size:contain;display:block;position:relative;width:clamp(2rem,1.333rem + 1.389vw,3rem)}@media(orientation:landscape){body #app header .header__logo{aspect-ratio:2;background-image:url(/build/images/signature-landscape.33de8885.svg);width:calc(clamp(2rem,1.333rem + 1.389vw,3rem)*2)}}body #app main{align-items:center;display:flex;flex-direction:column;grid-column:2;padding:calc(clamp(.75rem,.25rem + 1.042vw,1.5rem)*2 + clamp(2rem,1.333rem + 1.389vw,3rem)*2) 0}@media(orientation:landscape){body #app main{padding:calc(clamp(.75rem,.25rem + 1.042vw,1.5rem)*2 + clamp(2rem,1.333rem + 1.389vw,3rem)*2/2) 0}}body #app footer{align-items:center;display:flex;flex-direction:column;gap:clamp(.25rem,.083rem + .347vw,.5rem);grid-column:3;height:100vh;height:100dvh;justify-content:flex-end;padding:clamp(.75rem,.25rem + 1.042vw,1.5rem) clamp(.75rem,-.75rem + 3.125vw,3rem);position:sticky;top:0;width:100%}@media(orientation:landscape){body #app footer{align-items:flex-end;flex-direction:row;justify-content:center}}body #app footer .footer__link{align-items:center;aspect-ratio:1;display:flex;justify-content:center;width:clamp(2rem,1.667rem + .694vw,2.5rem)}body #app footer .footer__link svg{height:100%;width:100%}.cv .cv__title{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cv .cv__content{-moz-column-gap:.5rem;column-gap:.5rem;display:grid;grid-template-columns:auto 1fr;max-width:60rem;row-gap:1rem}.cv .cv__content>h2{font-size:1rem;font-weight:700;grid-column:1/span 2}.cv .cv__content>h3{font-weight:700;grid-column:1/span 1}.cv .cv__content>p{grid-column:1/span 2}.cv .cv__content>ul{display:flex;flex-direction:column;gap:.25rem;grid-column:2/span 1}.home .home__title{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.home .home__gallery{align-items:center;display:flex;flex-direction:column;gap:2rem}.home .home__gallery .home__gallery-item{display:table}.home .home__gallery .home__gallery-item .home__carousel:where(.splide){cursor:pointer}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list{position:relative}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list .splide__slide{transform:none!important}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list .splide__slide:not(.is-active){inset:0;position:absolute}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list .splide__slide .splide__image{max-height:80vh}.home .home__gallery .home__gallery-item .home__main-image{max-height:80vh}.home .home__gallery .home__gallery-item .home__image-caption{caption-side:bottom;display:table-caption;margin:.5rem 0 0} \ No newline at end of file +@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:.9rem;line-height:1.15}a,body{color:#000}a{text-decoration:underline}a:focus-visible{outline:1px dashed #000;outline-offset:2px}strong{font-weight:700}em{font-style:italic}body{align-items:center;display:flex;flex-direction:column}body #app{display:grid;grid-template-columns:calc(clamp(2rem,1.333rem + 1.389vw,3rem) + clamp(1rem,-4.333rem + 11.111vw,9rem)) minmax(min-content,80rem) calc(clamp(2rem,1.333rem + 1.389vw,3rem) + clamp(1rem,-4.333rem + 11.111vw,9rem));justify-content:space-evenly;justify-items:center;max-width:120rem;position:relative;width:100%}@media(orientation:landscape){body #app{grid-template-columns:calc(clamp(2rem,1.333rem + 1.389vw,3rem)*2 + clamp(1rem,-4.333rem + 11.111vw,9rem)) minmax(min-content,80rem) calc(clamp(2rem,1.333rem + 1.389vw,3rem)*2 + clamp(1rem,-4.333rem + 11.111vw,9rem))}}body #app header{align-items:center;display:flex;flex-direction:column;grid-column:1;height:100vh;height:100dvh;padding:clamp(.75rem,.25rem + 1.042vw,1.5rem) 0;position:sticky;top:0;width:100%}body #app header .header__logo{aspect-ratio:.5;background-image:url(/build/images/signature-portrait.195b0490.svg);background-position:50%;background-size:contain;display:block;position:relative;width:clamp(2rem,1.333rem + 1.389vw,3rem)}@media(orientation:landscape){body #app header .header__logo{aspect-ratio:2;background-image:url(/build/images/signature-landscape.33de8885.svg);width:calc(clamp(2rem,1.333rem + 1.389vw,3rem)*2)}}body #app main{align-items:center;display:flex;flex-direction:column;grid-column:2;padding:calc(clamp(.75rem,.25rem + 1.042vw,1.5rem)*2 + clamp(2rem,1.333rem + 1.389vw,3rem)*2) 0}@media(orientation:landscape){body #app main{padding:calc(clamp(.75rem,.25rem + 1.042vw,1.5rem)*2 + clamp(2rem,1.333rem + 1.389vw,3rem)*2/2) 0}}.cv .cv__title{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cv .cv__content{display:grid;gap:.5rem;grid-template-columns:auto 1fr;max-width:60rem}.cv .cv__content>h2{grid-column:1/span 2;margin:.5rem 0}.cv .cv__content>h3{grid-column:1/span 1}.cv .cv__content>p{grid-column:1/span 2}.cv .cv__content>ul{display:flex;flex-direction:column;gap:.25rem;grid-column:2/span 1}.home .home__title{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.home .home__gallery{align-items:center;display:flex;flex-direction:column;gap:2rem}.home .home__gallery .home__gallery-item{display:table}.home .home__gallery .home__gallery-item .home__carousel:where(.splide){cursor:pointer}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list{position:relative}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list .splide__slide{transform:none!important}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list .splide__slide:not(.is-active){inset:0;position:absolute}.home .home__gallery .home__gallery-item .home__carousel:where(.splide) .splide__track .splide__list .splide__slide .splide__image{max-height:80vh}.home .home__gallery .home__gallery-item .home__main-image{max-height:80vh}.home .home__gallery .home__gallery-item .home__image-caption{caption-side:bottom;display:table-caption;margin:.25rem 0 0} \ No newline at end of file diff --git a/site/blueprints/sections/site_info.yml b/site/blueprints/sections/site_info.yml index 187f935..d5c4587 100644 --- a/site/blueprints/sections/site_info.yml +++ b/site/blueprints/sections/site_info.yml @@ -24,18 +24,3 @@ fields: - '|' - clear required: true - instagram: - label: - en: Instagram account - fr: Compte Instagram - type: url - icon: instagram - required: true - width: 1/2 - email: - label: - en: Email - fr: Adresse e-mail - type: email - required: true - width: 1/2 diff --git a/site/controllers/site.php b/site/controllers/site.php index 8f40e3f..0b0878f 100644 --- a/site/controllers/site.php +++ b/site/controllers/site.php @@ -6,14 +6,8 @@ return function ($site) { $logoHref = $site->url(); $logoAriaLabel = "Go to {$site->title()}'s home page"; - // Get contact fields content - $email = $site->email(); - $instagram = $site->instagram(); - // Return data return compact( - 'email', - 'instagram', 'logoAriaLabel', 'logoHref', ); diff --git a/site/templates/base.twig b/site/templates/base.twig index 51e1783..c1368c6 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -45,27 +45,6 @@ {% block main %} {% endblock %} - {% block footer %} - - {% endblock %} -