diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss index 0e2670e..58de654 100644 --- a/assets/css/abstracts/_variables.scss +++ b/assets/css/abstracts/_variables.scss @@ -2,23 +2,38 @@ // VARIABLES // -------------------------------------------------- -// Fonts +// ----- FONTS + $text-font-family: Helvetica, Arial, sans-serif; $text-font-size: 0.9rem; $text-line-height: 1.15; -// Dimensions -$app-width: min(100%, 120rem); // => 1920px -$large-content-width: min(100%, 100rem); // => 1600px -$medium-content-width: min(100%, 80rem); // => 1280px -$small-content-width: min(100%, 60rem); // => 960px -$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 +// ----- COLORS -// Colors $black: #000; $white: #fff; +// ----- DIMENSIONS + +// Content +$content-width-xs: min(100%, 40rem); // => 640px +$content-width-s: min(100%, 60rem); // => 960px +$content-width-m: min(100%, 80rem); // => 1280px +$content-width-l: min(100%, 100rem); // => 1600px +$content-width-xl: min(100%, 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); + +// 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 + // Media queries $tablet-media-query: 48rem; // => 768px $desktop-media-query: 62rem; // => 992px diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss index 3d8cd34..6f8813c 100644 --- a/assets/css/base/_base.scss +++ b/assets/css/base/_base.scss @@ -43,55 +43,65 @@ body { #app { position: relative; display: grid; - grid-template-columns: auto 1fr auto; + grid-template-columns: 1fr auto 1fr; justify-content: center; justify-items: center; - width: $app-width; + width: $content-width-xl; header { grid-column: 1; + display: flex; + flex-direction: column; + align-items: center; position: sticky; top: 0; + width: 100%; height: 100vh; // Fallback in case dvh unit is not supported height: 100dvh; - padding: 1rem; + padding: $sidebar-padding-y $sidebar-padding-x; .header__logo { position: relative; - width: $icon-size; + width: $logo-portrait-width; aspect-ratio: calc(1 / 2); - background-image: url("/public/images/signature-vertical.svg"); + background-image: url("/public/images/signature-portrait.svg"); background-size: contain; background-position: center; - @media screen and (min-width: $desktop-media-query) { - width: calc(($icon-size * 2) + $icon-spacing); + @media (orientation: landscape) { + width: $logo-landscape-width; aspect-ratio: calc(2 / 1); - background-image: url("/public/images/signature-horizontal.svg"); + background-image: url("/public/images/signature-landscape.svg"); } } } main { grid-column: 2; - width: $large-content-width; - padding: calc(2rem + $icon-size) 0; + padding: calc(($sidebar-padding-y * 2) + ($logo-portrait-width * 2)) 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: 1rem; + padding: $sidebar-padding-y $sidebar-padding-x; - @media screen and (min-width: $desktop-media-query) { + @media (orientation: landscape) { flex-direction: row; + justify-content: center; align-items: flex-end; } diff --git a/assets/css/pages/_home.scss b/assets/css/pages/_home.scss index 1acbb34..ee4412f 100644 --- a/assets/css/pages/_home.scss +++ b/assets/css/pages/_home.scss @@ -11,10 +11,10 @@ flex-direction: column; align-items: center; gap: 2rem; + width: $content-width-m; .home__gallery-item { display: table; - max-width: $medium-content-width; .home__carousel { @@ -50,10 +50,7 @@ .home__image-caption { display: table-caption; caption-side: bottom; - width: fit-content; - margin: 0.5rem auto 0; - padding: 0 0.5rem; - text-align: center; + margin: 0.5rem 0 0; } } } diff --git a/public/build/images/signature-horizontal.33de8885.svg b/public/build/images/signature-landscape.33de8885.svg similarity index 100% rename from public/build/images/signature-horizontal.33de8885.svg rename to public/build/images/signature-landscape.33de8885.svg diff --git a/public/build/images/signature-vertical.195b0490.svg b/public/build/images/signature-portrait.195b0490.svg similarity index 100% rename from public/build/images/signature-vertical.195b0490.svg rename to public/build/images/signature-portrait.195b0490.svg diff --git a/public/build/main.css b/public/build/main.css index 10ca751..f5ed052 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;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.9rem;line-height:1.15}strong{font-weight:700}em{font-style:italic}a{color:#000;text-decoration:underline;text-underline-position:under}a:focus-visible{outline:1px dashed #000;outline-offset:2px}body{align-items:center;display:flex;flex-direction:column}body #app{display:grid;grid-template-columns:auto 1fr auto;justify-content:center;justify-items:center;position:relative;width:min(100%,120rem)}body #app header{grid-column:1;height:100vh;height:100dvh;padding:1rem;position:sticky;top:0}body #app header .header__logo{aspect-ratio:.5;background-image:url(/build/images/signature-vertical.195b0490.svg);background-position:50%;background-size:contain;position:relative;width:clamp(2rem,1.667rem + .694vw,2.5rem)}@media screen and (min-width:62rem){body #app header .header__logo{aspect-ratio:2;background-image:url(/build/images/signature-horizontal.33de8885.svg);width:calc(clamp(2rem,1.667rem + .694vw,2.5rem)*2 + clamp(.25rem,.083rem + .347vw,.5rem))}}body #app main{grid-column:2;padding:calc(2rem + clamp(2rem,1.667rem + .694vw,2.5rem)) 0;width:min(100%,100rem)}body #app footer{display:flex;flex-direction:column;gap:clamp(.25rem,.083rem + .347vw,.5rem);grid-column:3;height:100vh;height:100dvh;justify-content:flex-end;padding:1rem;position:sticky;top:0}@media screen and (min-width:62rem){body #app footer{align-items:flex-end;flex-direction:row}}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%}.home .home__gallery{align-items:center;display:flex;flex-direction:column;gap:2rem}.home .home__gallery .home__gallery-item{display:table;max-width:min(100%,80rem)}.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 auto 0;padding:0 .5rem;text-align:center;width:-moz-fit-content;width:fit-content} \ 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;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.9rem;line-height:1.15}strong{font-weight:700}em{font-style:italic}a{color:#000;text-decoration:underline;text-underline-position:under}a:focus-visible{outline:1px dashed #000;outline-offset:2px}body{align-items:center;display:flex;flex-direction:column}body #app{display:grid;grid-template-columns:1fr auto 1fr;justify-content:center;justify-items:center;position:relative;width:min(100%,120rem)}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;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{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%}.home .home__gallery{align-items:center;display:flex;flex-direction:column;gap:2rem;width:min(100%,80rem)}.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 diff --git a/public/build/manifest.json b/public/build/manifest.json index 9c8dde4..7d4740a 100644 --- a/public/build/manifest.json +++ b/public/build/manifest.json @@ -2,6 +2,6 @@ "build/app.js": "/build/app.js", "build/main.css": "/build/main.css", "build/panel.css": "/build/panel.css", - "build/images/signature-vertical.svg": "/build/images/signature-vertical.195b0490.svg", - "build/images/signature-horizontal.svg": "/build/images/signature-horizontal.33de8885.svg" + "build/images/signature-portrait.svg": "/build/images/signature-portrait.195b0490.svg", + "build/images/signature-landscape.svg": "/build/images/signature-landscape.33de8885.svg" } \ No newline at end of file diff --git a/public/images/feather-instagram-custom.svg b/public/images/feather-instagram-custom.svg new file mode 100644 index 0000000..e60f165 --- /dev/null +++ b/public/images/feather-instagram-custom.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/feather-mail-custom.svg b/public/images/feather-mail-custom.svg new file mode 100644 index 0000000..d3564d1 --- /dev/null +++ b/public/images/feather-mail-custom.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/remix-instagram-fill.svg b/public/images/remix-instagram-fill.svg deleted file mode 100644 index b0662ca..0000000 --- a/public/images/remix-instagram-fill.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/images/remix-mail-fill.svg b/public/images/remix-mail-fill.svg deleted file mode 100644 index 8960d11..0000000 --- a/public/images/remix-mail-fill.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/images/signature-horizontal.svg b/public/images/signature-landscape.svg similarity index 100% rename from public/images/signature-horizontal.svg rename to public/images/signature-landscape.svg diff --git a/public/images/signature-vertical.svg b/public/images/signature-portrait.svg similarity index 100% rename from public/images/signature-vertical.svg rename to public/images/signature-portrait.svg diff --git a/site/templates/base.twig b/site/templates/base.twig index 08b895b..7427c9b 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -43,17 +43,17 @@ {% block footer %} {% endblock %}