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

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