From 748472a5d0a7ada0f6802329cd43049a13d3eced Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Nicou=C3=A9?= Date: Fri, 6 Jun 2025 16:36:35 +0200 Subject: [PATCH] Remove footer and refactor layout to use fluid sidebar width --- assets/css/abstracts/_variables.scss | 27 ++++++++------- assets/css/base/_base.scss | 52 ++++++---------------------- site/controllers/site.php | 6 ---- site/templates/base.twig | 21 ----------- 4 files changed, 25 insertions(+), 81 deletions(-) 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..7a11fe4 100644 --- a/assets/css/base/_base.scss +++ b/assets/css/base/_base.scss @@ -43,12 +43,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 +63,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 +87,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/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 %} -