diff --git a/css/projects.css b/css/projects.css index f830bd9..2b5f654 100644 --- a/css/projects.css +++ b/css/projects.css @@ -3,31 +3,27 @@ height: 100%; } - -.buttonlist { +#projectlinks { + width: 50%; height: 100%; - width: 75%; - overflow-y: scroll; - overflow: auto; - } + + .linkcell { - height: 20%; - width: calc(100% - (var(--gap) * 2)); + height: 120px; + width: 100%; background-size: cover; background-position: center; - overflow-x: hidden; + /* overflow-x: hidden; */ text-overflow: clip; - overflow-y: hidden; -webkit-border-radius: var(--border-radius-1); border-radius: var(--border-radius-1); white-space: nowrap; - margin-left: var(--gap); - margin-top: calc(var(--gap) / 2); - margin-bottom: calc(var(--gap) / 2); + margin-top: var(--gap) / 2; + margin-bottom: var(--gap); } .linkcell-div { @@ -37,11 +33,11 @@ .linkcell:is(:nth-child(1)) { - margin-top: var(--gap) + margin-top: 0; } .linkcell:is(:nth-last-child(1)) { - margin-bottom: var(--gap) + margin-bottom: 0 } .linkcell * { @@ -56,10 +52,6 @@ #embedbox { height: 100%; width: 100%; - box-sizing: border-box; - padding: var(--gap); - padding-inline: var(--gap); - gap: var(--gap) } #embedframe { @@ -76,12 +68,6 @@ } -.collapsed { - width: 0px; - height: 0px; - opacity: 0; -} - #source { width: 100%; diff --git a/css/styles.css b/css/styles.css index a945c1c..e1bb858 100644 --- a/css/styles.css +++ b/css/styles.css @@ -12,8 +12,8 @@ --easer: cubic-bezier(0.19, 1, 0.22, 1); --border-radius-1: 10px; - --border-radius-2: 20px; - --border-radius-3: 30px; + --border-radius-2: 10px; + --border-radius-3: 20px; --dot-color: #453b53; --outline-thickness: 3px; --gap: 10px; @@ -44,6 +44,7 @@ button, img, table, iframe { + box-sizing: border-box; -webkit-border-radius: var(--border-radius-2); border-radius: var(--border-radius-2); } @@ -191,8 +192,12 @@ a:visited { overflow: hidden; } -.pad { - padding: var(--gap); +.pad-x { + padding-inline: var(--gap); +} + +.pad-y { + padding-block: var(--gap); } @supports (backdrop-filter: blur(10px)) { @@ -234,10 +239,10 @@ a:visited { transition: 1s var(--easer) all; } -#base { + +#tablebox { height: var(--height-controller); width: var(--width-controller); - padding: var(--gap); box-sizing: border-box; overflow-y: auto; @@ -245,21 +250,15 @@ a:visited { -webkit-border-radius: var(--border-radius-3); border-radius: var(--border-radius-3); - background-color: var(--col-shadow); animation: flash_outline 1s var(--easer) 0.2s both; transition: 1s var(--easer) all; -} - -#tablebox { display: grid; grid-template-columns: 100%; - grid-template-rows: 50px 1fr; + grid-template-rows: 45px 1fr; - height: 100%; - width: 100%; - animation: flash_outline 1s var(--easer) 0.1s both, opacityintro 2s var(--easer) 0.2s both; + /* animation: flash_outline 1s var(--easer) 0.1s both, opacityintro 2s var(--easer) 0.2s both; */ align-items: center; align-self: center; justify-content: left; @@ -278,6 +277,7 @@ a:visited { /* gap: var(--gap); */ /* padding-block: var(--gap); */ overflow-y: auto; + overflow-x: hidden; box-sizing: border-box; transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1); } @@ -311,6 +311,13 @@ a:visited { font-weight: bolder; } +.collapsed { + width: 0px; + height: 0px; + opacity: 0; +} + + .blacktext { color: black @@ -321,7 +328,26 @@ a:visited { } +.buttonlist { + height: 100%; + width: 100%; + overflow-y: auto; +} + +.image { + width: 100%; + height:200px; + background-size: cover; + background-color: black; +} + +#featured-images { + height: 100%; +} +#img-mac-wallpaper { + background-image: url("../images/featured/MacWallpaper.png"); +} @keyframes flash_outline { 0% { diff --git a/index.html b/index.html index 2d1ca2a..b0c37cd 100644 --- a/index.html +++ b/index.html @@ -15,74 +15,78 @@
-
-
-
-
-
-
-
- -

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.

+
+

Social media: +

+

+
- + + +
@@ -90,5 +94,6 @@

Hi! I'm Zeptofine

+ \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index 3ad5cc7..a4b39bd 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -37,12 +37,15 @@ function interleaveDots(divs) { } const tables = document.getElementById("tablesdiv").getElementsByClassName("tables"); +const url = new URL(window.location.href); + let selected; let listdiv = document.getElementById("buttonbox"); let buttons = createTableButtons(); Array.from(interleaveDots(buttons)).forEach(element => listdiv.appendChild(element)); + root = document.querySelector(":root"); function open(sel) { if (tables[sel] === selected) @@ -65,6 +68,9 @@ function open(sel) { root.style.setProperty("--height-multiplier", ("height" in table.dataset) ? table.dataset.height : ""); root.style.setProperty("--width-multiplier", ("width" in table.dataset) ? table.dataset.width : ""); + url.searchParams.set("idx", sel); + window.history.pushState({}, document.title, url.href) + console.log(url.href) } else { buttons[i].classList.remove("bolder"); @@ -76,10 +82,16 @@ function open(sel) { } } -open(0); +idx = new URLSearchParams(url.search).get("idx") +if (idx === null) { + open(0); +} else { + open(idx); +} + -for (let i = 0; i < buttons.length; i++) { - buttons[i].addEventListener("keydown", (event) => { +for (const button of buttons) { + button.addEventListener("keydown", (event) => { console.log(event); }) }