Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

improve mobile footer

Browse source
This commit is contained in:
isUnknown 2024-12-02 16:39:38 +01:00
parent af1ffe78c6
commit 5252d51633
5 changed files with 97 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

19
assets/css/src/footer.css
View file

@ -1,11 +1,15 @@
#main-footer {
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
padding-bottom: 3px;
padding: 3px var(--unit--horizontal) 6px var(--unit--horizontal);
border-bottom: 0;
}
.main-footer--background {
border-top: 1px solid #eee;
border-right: 1px solid #eee;
background-color: #000;
padding-bottom: 6px;
}
[data-template="home"] #main-footer {
position: fixed;
@ -13,10 +17,8 @@
bottom: 0;
}
#main-footer ul {
display: flex;
justify-content: center;
gap: calc(2 * var(--unit--horizontal));
#main-footer li:not(.open-nav-wrapper) {
display: none;
}
#main-footer button.open-nav {
@ -24,6 +26,9 @@
}
@media screen and (min-width: 640px) {
#main-footer li {
display: block !important;
}
#main-footer {
position: fixed;
left: 0;

58
assets/css/src/header.css
View file

@ -14,7 +14,7 @@ main {
}
#logo * {
font-size: 26.65vw;
font-size: 25.3vw;
font-weight: var(--font-weight-extra-bold);
}
@ -22,7 +22,7 @@ main {
height: 20vw;
width: 100%;
box-sizing: border-box;
padding-right: 1vw;
padding-right: 3vw;
display: flex;
justify-content: flex-end;
align-items: center;
@ -54,7 +54,7 @@ main {
position: relative;
height: 100svh;
box-sizing: border-box;
padding-top: calc(var(--unit--vertical-relative) * 9);
padding-top: calc(var(--unit--vertical-relative) * 7);
display: flex;
flex-direction: column;
@ -65,55 +65,35 @@ main {
overflow: auto;
}
/* ================= ENTRY BTNS ================= */
#entry-btns {
position: sticky;
position: -webkit-sticky;
top: calc(var(--unit--vertical) * 4);
height: var(--entry-btns-height);
display: flex;
justify-content: space-between;
}
[data-template="info"] #entry-btns {
top: calc(var(--unit--vertical) * 4);
}
[data-template="home"] .entry-btn {
align-items: start;
}
button.toggle.left::after,
button.toggle.right::before {
transition: all 0.5s var(--curve-sine);
content: "+";
}
#entry-btns.minimized {
color: #000;
}
#entry-btns.minimized .entry-btn--left::before,
#entry-btns.minimized .entry-btn--right::after {
background-color: var(--color-secondary);
.page-cover .links {
position: absolute;
bottom: 8px;
padding-left: calc(5rem + var(--unit--horizontal));
width: 100%;
box-sizing: border-box;
}
#entry-btns.minimized .entry-btn::before,
#entry-btns.minimized .entry-btn::after {
font-weight: bold;
}
#entry-btns.minimized .entry-btn--left {
padding-right: 4px;
margin-left: calc(-4px - var(--width));
}
#entry-btns.minimized .entry-btn--right {
padding-left: 4px;
margin-right: calc(-4px - var(--width));
.page-cover .links li {
display: inline-block;
margin-right: var(--unit--horizontal);
}
@media screen and (min-width: 640px) {
body:not([data-template="home"]) #main-header {
width: var(--body-padding);
}
#logo * {
font-size: 26.65vw;
}
#logo span {
padding-right: 1vw;
}
body:not([data-template="home"]) #logo * {
font-size: 6vw;
}
@ -144,7 +124,7 @@ button.toggle.right::before {
height: initial;
}
#entry-btns {
.page-cover .links {
display: none;
}
}