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 @@
-
-
+
+
+
-
-
-
-
-
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.
-
-
-
-
-
-
-
+
+
+
+
+
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");
}
}
}