host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove footer and refactor layout to use fluid sidebar width

Browse source
This commit is contained in:
Paul Nicoué 2025-06-06 16:36:35 +02:00
parent 1355557a98
commit 748472a5d0
4 changed files with 25 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

27
assets/css/abstracts/_variables.scss
View file

@ -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));

52
assets/css/base/_base.scss
View file

@ -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;
}
}
}

6
site/controllers/site.php
View file

@ -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',
);

21
site/templates/base.twig
View file

@ -45,27 +45,6 @@
{% block main %}
{% endblock %}
{% block footer %}
<footer>
{% if instagram.isNotEmpty %}
<a class="footer__link footer__instagram-link"
href="{{ instagram }}"
target="_blank"
aria-label="Go to {{ site.title }}'s Instagram profile">
{{ svg('images/feather-instagram-custom.svg') | raw }}
</a>
{% endif %}
{% if email.isNotEmpty %}
<a class="footer__link footer__mail-link"
href="mailto:{{ email }}"
target="_blank"
aria-label="Write an email to {{ site.title }}">
{{ svg('images/feather-mail-custom.svg') | raw }}
</a>
{% endif %}
</footer>
{% endblock %}
</div>
</body>