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

fix sticky problems

Browse source
This commit is contained in:
isUnknown 2024-04-10 14:55:34 +02:00
parent d9dcd940af
commit ba450cbb1f
15 changed files with 212 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/src/article.css Normal file
View file

@ -0,0 +1,2 @@
article .content {
}

20
assets/css/src/generic.css
View file

@ -77,3 +77,23 @@ body {
.opacity {
opacity: var(--opacity);
}
/* ================= BUTTONS ================= */
button.toggle.left::after {
margin-left: var(--unit--horizontal);
}
button.toggle.left.close::after {
content: "+";
}
button.toggle.left.open::after {
content: "-";
}
button.toggle.right::before {
margin-right: var(--unit--horizontal);
}
button.toggle.right.close::before {
content: "+";
}
button.toggle.right.open::before {
content: "-";
}

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

@ -35,13 +35,12 @@
.page-cover {
position: relative;
height: 80svh;
box-sizing: border-box;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: calc(var(--unit--vertical-relative) * 5);
padding-bottom: calc(5 * var(--unit--vertical));
}
.page-cover.open + * {
@ -52,13 +51,47 @@
padding-top: calc(var(--unit--vertical-relative) * 6);
}
#category .page-cover {
height: auto;
padding-bottom: 0;
margin-bottom: calc(2 * var(--unit--vertical));
/* ================= ENTRY BTNS ================= */
#entry-btns {
position: sticky;
top: calc(var(--unit--vertical) * 3);
height: 20svh;
display: flex;
justify-content: space-between;
}
#category .active-tab {
max-height: none;
.entry-btn {
transition: all 0.5s var(--curve-sine);
}
[data-template="home"] .entry-btn {
align-items: start;
}
.entry-btn--left::after,
.entry-btn--right::before {
transition: all 0.5s var(--curve-sine);
content: "+";
}
.entry-btn--left::after {
margin-left: var(--unit--horizontal);
}
.entry-btn--right::before {
margin-right: var(--unit--horizontal);
}
#entry-btns.minimized {
color: var(--color-secondary);
}
#entry-btns.minimized .entry-btn::before,
#entry-btns.minimized .entry-btn::after {
font-weight: bold;
}
#entry-btns.minimized .entry-btn--left {
margin-left: calc(-4px - var(--width));
}
#entry-btns.minimized .entry-btn--right {
margin-right: calc(-4px - var(--width));
}
@media screen and (min-width: 640px) {

4
assets/css/src/html.css
View file

@ -10,10 +10,6 @@ body {
box-sizing: border-box;
background-color: var(--color-background);
color: var(--color-primary);
}
main {
position: relative;
padding: 0 var(--unit--horizontal);
}

5
assets/css/src/linear.css
View file

@ -1,5 +0,0 @@
.article-header .title-wrapper {
--margin-left: 2;
width: calc(100% - (var(--margin-left) * var(--unit--horizontal)));
padding-left: calc(var(--margin-left) * var(--unit--horizontal));
}

93
assets/css/src/nav.css
View file

@ -1,50 +1,3 @@
/* ================= ENTRIES BTNS ================= */
#entry-btns {
position: sticky;
top: calc(var(--unit--vertical) * 10);
display: flex;
justify-content: space-between;
z-index: 2;
}
.entry-btn {
transition: all 0.5s var(--curve-sine);
}
[data-template="home"] #entry-btns {
transform: translateY(calc(0rem - var(--unit--vertical-relative) * 8));
}
[data-template="linear"] #entry-btns {
transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
}
.entry-btn--left::after,
.entry-btn--right::before {
transition: all 0.5s var(--curve-sine);
content: "+";
}
.entry-btn--left::after {
margin-left: var(--unit--horizontal);
}
.entry-btn--right::before {
margin-right: var(--unit--horizontal);
}
#entry-btns.minimized {
color: var(--color-secondary);
}
#entry-btns.minimized .entry-btn::before,
#entry-btns.minimized .entry-btn::after {
font-weight: bold;
}
#entry-btns.minimized .entry-btn--left {
margin-left: calc(-4px - var(--width));
}
#entry-btns.minimized .entry-btn--right {
margin-right: calc(-4px - var(--width));
}
/* ================= PANELS ================= */
.panel {
position: fixed;
@ -58,16 +11,31 @@
padding: 0 var(--unit--horizontal);
padding-top: calc(var(--unit--vertical) * 5);
box-sizing: border-box;
overflow: auto;
display: flex;
flex-direction: column;
}
.panel--left {
left: calc(-100vw - 1px);
}
.panel--right {
right: calc(-100vw - 1px);
}
.panel--left.open {
left: 0;
}
.panel--right.open {
right: 0;
}
.search {
position: fixed;
width: calc(100% - 2 * var(--unit--horizontal));
position: relative;
width: 100%;
background-color: #000;
z-index: 1;
top: 0;
padding-top: calc(var(--unit--vertical) * 5);
}
.search__input {
all: unset;
@ -82,7 +50,7 @@
font-weight: var(--font-weight-light);
}
.search__input::placeholder {
font-size: var(--font-size-s);
font-size: var(--font-size-sm);
letter-spacing: 1px;
}
.search__icon {
@ -100,26 +68,13 @@ button.search__icon {
}
.panel__items {
margin-top: calc(var(--unit--vertical) * 2);
margin-bottom: calc(var(--unit--vertical) * 4);
}
.panel--left {
left: calc(-100% - var(--unit--horizontal) * 2 - 1px);
}
.panel--right {
right: calc(-100% - var(--unit--horizontal) * 2 - 1px);
}
.panel--right.open {
right: 0;
}
.panel--left.open {
left: 0;
scroll-behavior: smooth;
height: 100%;
padding-top: var(--unit--vertical);
overflow: auto;
}
.panel-close {
position: fixed;
justify-content: center;
width: calc(100% - 2 * var(--unit--horizontal));
bottom: 0;

3
assets/css/src/reset.css
View file

@ -25,6 +25,9 @@ a {
text-decoration: none;
color: inherit;
}
a:focus-visible {
outline: none;
}
li {
list-style-type: none;

8
assets/css/src/tabs.css
View file

@ -21,10 +21,6 @@ button.toggle.left.close::after {
button.toggle.left.open::after {
content: "-";
}
#tabs.minimized button.toggle.right {
margin-right: calc(-4px - var(--width));
}
button.toggle.right::before {
margin-right: var(--unit--horizontal);
}
@ -35,6 +31,10 @@ button.toggle.right.open::before {
content: "-";
}
#tabs.minimized button.toggle.right {
margin-right: calc(-4px - var(--width));
}
#tabs {
width: 100%;
z-index: 1;

1
assets/css/src/variables.css
View file

@ -13,6 +13,7 @@
);
--font-size-s: 0.8rem;
--font-size-sm: calc(var(--font-size-s) * 1);
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);

56
assets/css/style.css
View file

@ -1,11 +1,61 @@
@import url("src/reset.css");
@import url("src/variables.css");
@import url("src/html.css");
@import url("src/generic.css");
@import url("src/texts.css");
@import url("src/header.css");
@import url("src/tabs.css");
@import url("src/nav.css");
@import url("src/article.css");
@import url("src/home.css");
@import url("src/linear.css");
@import url("src/footer.css");
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary: rgb(120, 171, 150, 0.86);
--color-secondary--light: rgb(119, 177, 157, 0.2);
--color-secondary--x-light: rgb(119, 177, 157, 0.1);
--unit--horizontal: 5vw;
--unit--vertical: 1.7rem;
--unit--vertical-relative: calc(
var(--unit--vertical) * var(--window-height-factor)
);
--font-size-s: 0.8rem;
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
--font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
--opacity-light: 0.6;
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@media screen and (min-width: 640px) {
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary: rgb(120, 171, 150, 0.86);
--color-secondary--light: rgb(119, 177, 157, 0.25);
--color-secondary--x-light: rgb(119, 177, 157, 0.15);
--unit--horizontal: 5vw;
--unit--vertical: 1.7rem;
--font-size-s: 0.9rem;
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
--font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
}
}

13
assets/js/script.js
View file

@ -58,10 +58,9 @@ function setWindowHeightFactor() {
const delta = windowHeight - min;
const factor = roundToNearestHalf(delta / 300) + 1;
const head = document.querySelector("head");
const style = document.createElement("style");
style.innerText = `:root { --window-height-factor:${factor} }`;
head.appendChild(style);
document
.querySelector(":root")
.style.setProperty("--window-height-factor", factor);
}
function roundToNearestHalf(num) {
@ -123,9 +122,11 @@ function togglePanel(side) {
if (isOpen) {
document.querySelector("html").style.overflowY = "hidden";
document.querySelector("#main-header").classList.remove("minimized");
} else if (scrollY > 10) {
} else {
document.querySelector("html").style.overflowY = "";
document.querySelector("#main-header").classList.add("minimized");
if (scrollY > 10) {
document.querySelector("#main-header").classList.add("minimized");
}
}
}