diff --git a/css/styles.css b/css/styles.css index 89c140f..b0e14e0 100644 --- a/css/styles.css +++ b/css/styles.css @@ -17,6 +17,11 @@ --dot-color: #453b53; --outline-thickness: 2px; --gap: 10px; + + --height-multiplier: 5; + --width-multiplier: 8; + --height-controller: calc(min(var(--height-multiplier) * 120px, 100%)); + --width-controller: calc(min(var(--width-multiplier) * 120px, 100%)); } /* To reference these: var(*) */ @@ -220,17 +225,23 @@ a:visited { overflow: hidden; } -#container { +#marginprovider { position: absolute; left: 10px; - top: calc(max(50% - 360px, 10px)); + top: 10px; width: calc(100% - 20px); - height: calc(min(100% - 20px, 720px)); + height: calc(100% - 20px); +} +#container { + width: 100%; + height: 100%; + transition: 1s cubic-bezier(0.19, 1, 0.22, 1) all; } #base { - width: calc(min(100%, 960px)); + height: var(--height-controller); + width: var(--width-controller); padding: var(--gap); background-color: var(--col-basewin); box-sizing: border-box; @@ -253,7 +264,7 @@ a:visited { grid-column: 2; grid-row: 1; width: 0%; - height: calc(min(100%, 720px)); + height: var(--height-controller); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); text-overflow: clip; } @@ -287,7 +298,7 @@ a:visited { #tablebox { display: grid; grid-template-columns: 100%; - grid-template-rows: 1fr 6fr; + grid-template-rows: 50px 8fr; height: 100%; width: 100%; @@ -298,10 +309,6 @@ a:visited { justify-content: left; } -#buttonbox { - width: 100%; - justify-content: space-evenly; -} #contactbox { width: 100%; @@ -339,7 +346,7 @@ a:visited { } .linkcell { - height: 50%; + height: 40%; width: calc(100% - (var(--gap) * 2)); background-size: cover; background-position: center; diff --git a/index.html b/index.html index f851c2f..9b80a11 100644 --- a/index.html +++ b/index.html @@ -15,63 +15,68 @@ -
-
+
+
+
-
-
- profile picture lmao -
-

Hi! I'm Zeptofine

-
-

I'm an amateur Python, Java, Shell scripter / programmer.

-

I know some html, css, and js (enough to make this site).

-
-

she / her / they / them

-

I hope you enjoy your stay.

-
-
-
-
-
-
- +
+
+ profile picture lmao +
+

Hi! I'm Zeptofine

+
+

I'm an amateur Python, Java, Shell scripter / programmer.

+

I know some html, css, and js (enough to make this site).

+
+

she / her / they / them

+

I hope you enjoy your stay.

- +
+
+
+ + +
-
+
- +
- + \ No newline at end of file diff --git a/scripts/links.js b/scripts/links.js index f28690b..70460cd 100644 --- a/scripts/links.js +++ b/scripts/links.js @@ -16,7 +16,7 @@ function selectSrc(idx) { let button = links[idx]; let dataset = button.dataset; - div.style.width = "100%"; + div.style.width = "40%"; div.style.opacity = "1"; div.style.marginLeft = "var(--gap)"; if (iframe.src != links[idx].dataset.link) { @@ -34,7 +34,6 @@ function selectSrc(idx) { } iframe.style.opacity = "1"; - container.style.width = "calc(min(100%, 1350px))"; console.log("selected source: ", links[idx]); diff --git a/scripts/main.js b/scripts/main.js index 695c7ed..99c05be 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -43,14 +43,15 @@ let buttons = createTableButtons(); Array.from(interleaveDots(buttons)).forEach(element => listdiv.appendChild(element)); +root = document.querySelector(":root"); function open(sel) { if (tables[sel] === selected) return; var table; for (let i = 0; i < tables.length; i++) { + table = tables[i]; if (i == sel) { - table = tables[i]; table.style.width = ""; table.style.opacity = "1"; pulseanimation(table, "flash-inner"); @@ -59,15 +60,20 @@ function open(sel) { buttons[i].style.color = "white"; buttons[i].classList.add("bolder"); - selected = tables[i]; + selected = table; + + + root.style.setProperty("--height-multiplier", ("height" in table.dataset) ? table.dataset.height : ""); + root.style.setProperty("--width-multiplier", ("width" in table.dataset) ? table.dataset.width : ""); + + } else { - tables[i].style.width = "0px"; - tables[i].style.opacity = "0"; - buttons[i].classList.add("bolder"); + buttons[i].classList.toggle("bolder"); + table.style.width = "0px"; + table.style.opacity = "0"; buttons[i].style.letterSpacing = ""; buttons[i].style.color = ""; - buttons[i].classList.remove("bolder"); } } }