From 00d58f620d7e0728396c0bb42ec4282f4b129e31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Nicou=C3=A9?= Date: Thu, 29 May 2025 18:55:49 +0200 Subject: [PATCH] Edit base and home style --- assets/css/abstracts/_variables.scss | 33 +++++++++++++----- assets/css/base/_base.scss | 34 ++++++++++++------- assets/css/pages/_home.scss | 7 ++-- public/images/feather-instagram-custom.svg | 5 +++ public/images/feather-mail-custom.svg | 4 +++ public/images/remix-instagram-fill.svg | 1 - public/images/remix-mail-fill.svg | 1 - ...horizontal.svg => signature-landscape.svg} | 0 ...re-vertical.svg => signature-portrait.svg} | 0 site/templates/base.twig | 8 ++--- 10 files changed, 61 insertions(+), 32 deletions(-) create mode 100644 public/images/feather-instagram-custom.svg create mode 100644 public/images/feather-mail-custom.svg delete mode 100644 public/images/remix-instagram-fill.svg delete mode 100644 public/images/remix-mail-fill.svg rename public/images/{signature-horizontal.svg => signature-landscape.svg} (100%) rename public/images/{signature-vertical.svg => signature-portrait.svg} (100%) 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/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 %}