From ba450cbb1f47f91aed1b06c348aee88d3834e96b Mon Sep 17 00:00:00 2001 From: isUnknown Date: Wed, 10 Apr 2024 14:55:34 +0200 Subject: [PATCH] fix sticky problems --- assets/css/src/article.css | 2 + assets/css/src/generic.css | 20 ++++++ assets/css/src/header.css | 49 +++++++++++--- assets/css/src/html.css | 4 -- assets/css/src/linear.css | 5 -- assets/css/src/nav.css | 93 +++++++-------------------- assets/css/src/reset.css | 3 + assets/css/src/tabs.css | 8 +-- assets/css/src/variables.css | 1 + assets/css/style.css | 56 +++++++++++++++- assets/js/script.js | 13 ++-- site/snippets/cover.php | 13 +++- site/snippets/header.php | 11 +++- site/snippets/{nav.php => panels.php} | 67 +++++++++---------- site/templates/linear.php | 9 ++- 15 files changed, 212 insertions(+), 142 deletions(-) create mode 100644 assets/css/src/article.css delete mode 100644 assets/css/src/linear.css rename site/snippets/{nav.php => panels.php} (83%) diff --git a/assets/css/src/article.css b/assets/css/src/article.css new file mode 100644 index 0000000..3dff7dc --- /dev/null +++ b/assets/css/src/article.css @@ -0,0 +1,2 @@ +article .content { +} diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index 6a6e968..a7bf2b1 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -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: "-"; +} diff --git a/assets/css/src/header.css b/assets/css/src/header.css index f9a62bf..a1c0268 100644 --- a/assets/css/src/header.css +++ b/assets/css/src/header.css @@ -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) { diff --git a/assets/css/src/html.css b/assets/css/src/html.css index 41f9c16..79816eb 100644 --- a/assets/css/src/html.css +++ b/assets/css/src/html.css @@ -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); } diff --git a/assets/css/src/linear.css b/assets/css/src/linear.css deleted file mode 100644 index 60ffbac..0000000 --- a/assets/css/src/linear.css +++ /dev/null @@ -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)); -} diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index 81fd546..ca87a9b 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -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; diff --git a/assets/css/src/reset.css b/assets/css/src/reset.css index e51b601..63dc3f5 100644 --- a/assets/css/src/reset.css +++ b/assets/css/src/reset.css @@ -25,6 +25,9 @@ a { text-decoration: none; color: inherit; } +a:focus-visible { + outline: none; +} li { list-style-type: none; diff --git a/assets/css/src/tabs.css b/assets/css/src/tabs.css index b881ca1..9581fc3 100644 --- a/assets/css/src/tabs.css +++ b/assets/css/src/tabs.css @@ -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; diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css index d3adf0c..b8230ec 100644 --- a/assets/css/src/variables.css +++ b/assets/css/src/variables.css @@ -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); diff --git a/assets/css/style.css b/assets/css/style.css index 543f0a6..1cd5b53 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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; + } +} diff --git a/assets/js/script.js b/assets/js/script.js index 2366ba0..3feede8 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -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"); + } } } diff --git a/site/snippets/cover.php b/site/snippets/cover.php index 08284f7..d977786 100644 --- a/site/snippets/cover.php +++ b/site/snippets/cover.php @@ -8,5 +8,14 @@ $isOpen = isset($isOpen) ? $isOpen : false;
title() ?>
- tabs() ?> - \ No newline at end of file + +
+ + +
\ No newline at end of file diff --git a/site/snippets/header.php b/site/snippets/header.php index cbb1169..5e862d5 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -1,3 +1,6 @@ + @@ -8,6 +11,11 @@ +
@@ -17,4 +25,5 @@

inactuel

-
\ No newline at end of file + + \ No newline at end of file diff --git a/site/snippets/nav.php b/site/snippets/panels.php similarity index 83% rename from site/snippets/nav.php rename to site/snippets/panels.php index a9411fe..497f7b4 100644 --- a/site/snippets/nav.php +++ b/site/snippets/panels.php @@ -1,15 +1,4 @@ -
- - -
-