diff --git a/app.js b/app.js index cea0841..cbdfd26 100644 --- a/app.js +++ b/app.js @@ -26,7 +26,8 @@ function activeSection(section) { hideAll(); const targetSection = document.getElementById(section); - targetSection.style.display = "block"; + targetSection.focus(); + targetSection.classList.add("selected"); setTimeout(() => { targetSection.scrollIntoView({ block: "start", behavior: "smooth" }); }, 100); @@ -34,7 +35,8 @@ function activeSection(section) { function hideAll() { document.querySelectorAll(".section").forEach((s) => { - s.style.display = "none"; + s.classList.remove("selected"); + // s.style.display = "none"; }); } const HIDDEN_CLASS = "hidden"; diff --git a/build.sh b/build.sh index 06c7dc4..cb45269 100755 --- a/build.sh +++ b/build.sh @@ -125,7 +125,7 @@ echo " " >> ./index.html echo " - +" >> ./index.html echo " diff --git a/layout.css b/layout.css new file mode 100644 index 0000000..a7138a7 --- /dev/null +++ b/layout.css @@ -0,0 +1,54 @@ +main { + display: flex; + flex-direction: column; + padding-left: 1rem; + padding-right: 1rem; + flex-grow: 1; +} + +footer { + position: sticky; + bottom: 0; + margin-top: 2rem; + flex-shrink: 0; + + display: flex; + flex-direction: row; + justify-content: end; + align-content: centers; +} + +@container (min-width: 640px) { + main { + padding-left: 4rem; + padding-right: 4rem; + } +} + +@container (min-width: 768px) { + main { + padding-left: 8rem; + padding-right: 8rem; + } +} + +@container (min-width: 1024px) { + main { + padding-left: 12rem; + padding-right: 12rem; + } +} + +@container (min-width: 1280px) { + main { + padding-left: 14rem; + padding-right: 14rem; + } +} + +@container (min-width: 1536px) { + main { + padding-left: 18rem; + padding-right: 18rem; + } +} diff --git a/style.css b/style.css index 2de3665..a1cd55b 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,10 @@ +@import url("/layout.css"); + :root { color-scheme: light dark; --bg-color: light-dark(#fbf1c7, #282828); --fg-color: light-dark(#3c3836, #ebdbb2); - --bg-color-reverse: light-dark(#3c3836, #ebdbb2); --fg-color-reverse: light-dark(#fbf1c7, #282828); @@ -35,60 +36,16 @@ body { font-family: "Curier New", monospace; margin: 0; min-height: 100svh; -} -main { - display: flex; + /* display: flex; */ flex-direction: column; - padding-left: 1rem; - padding-right: 1rem; - /* height: 100svh; */ - + justify-content: space-evenly; } -@container (min-width: 640px) { - main { - padding-left: 4rem; - padding-right: 4rem; - - } -} - -@container (min-width: 768px) { - main { - padding-left: 8rem; - padding-right: 8rem; - - } -} - -@container (min-width: 1024px) { - main { - padding-left: 12rem; - padding-right: 12rem; - - } -} - -@container (min-width: 1280px) { - main { - padding-left: 14rem; - padding-right: 14rem; - - } -} - -@container (min-width: 1536px) { - main { - padding-left: 18rem; - padding-right: 18rem; - } -} - - * { color: var(--fg-color); border: none; + box-sizing: border-box; } h1, @@ -176,14 +133,13 @@ h2 { } img { - transition: all .2s ease-in-out; + transition: all 0.2s ease-in-out; } img:hover { transform: scale(1.5); border: none; box-shadow: 5px 4px 10px black; - } .pager { @@ -234,25 +190,15 @@ img:hover { .section { display: none; -} -.float-container { - - position: sticky; - top: 0; - /* width: 100vw; */ - /* height: 100vh; */ - - display: flex; - flex-direction: row; - justify-content: end; - align-content: centers; + &.selected { + display: block; + } } .float-btns { - /* position: static; */ margin-bottom: 1rem; - margin-right: 2rem; + margin-right: 1rem; display: flex; flex-direction: column; gap: 0.5rem;