diff --git a/css/styles.css b/css/styles.css index 633c39a..30fe4ea 100644 --- a/css/styles.css +++ b/css/styles.css @@ -11,7 +11,9 @@ --col-darker: #382d29; --col-darkest: #25201d; --easer: cubic-bezier(0.19, 1, 0.22, 1); - --border-radius: 15px; + --border-radius-1: 5px; + --border-radius-2: 10px; + --border-radius-3: 20px; --dot-color: #53423b; --outline-thickness: 2.5px; --gap: 10px; @@ -37,8 +39,8 @@ button, img, table, iframe { - -webkit-border-radius: var(--border-radius); - border-radius: var(--border-radius); + -webkit-border-radius: var(--border-radius-2); + border-radius: var(--border-radius-2); } iframe { @@ -84,6 +86,14 @@ table { align-content: center; } +ul { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 85%; + + box-sizing: border +} a:link { color: var(--col-links); @@ -93,8 +103,6 @@ a:link { a:visited { color: var(--col-links); - font-weight: bolder; - text-decoration: none; } @@ -106,6 +114,7 @@ a:visited { align-items: center; justify-content: center; flex-wrap: nowrap; + gap: var(--gap); } @@ -189,8 +198,7 @@ a:visited { } .dot { - width: 0%; - height: 50%; + width: 1%; outline: 0.1vmin solid var(--dot-color); } @@ -207,6 +215,7 @@ a:visited { .nowrap { white-space: nowrap; } + .clip-hidden { overflow: hidden; } @@ -216,7 +225,8 @@ a:visited { left: 10px; top: calc(max(50% - 360px, 10px)); width: calc(100% - 20px); - height: calc(max(min(100% - 20px, 720px), 540px)); + height: calc(min(100% - 20px, 720px)); + } #base { @@ -225,31 +235,39 @@ a:visited { background-color: var(--col-basewin); box-sizing: border-box; overflow-y: auto; - animation: slide-base 1s var(--easer) 0.1s both, flash_outline 250ms var(--easer) 0.1s both; + + -webkit-border-radius: var(--border-radius-3); + border-radius: var(--border-radius-3); + + animation: slide-base 1s var(--easer) 0.1s both, flash_outline 250ms var(--easer) 0.1s both; transition: 1s cubic-bezier(0.19, 1, 0.22, 1) all; } -.flash-inner, -.flash-inner * { - animation: flash_inner 250ms var(--easer); -} -.bolder { - font-weight: bolder; +#pfbox { + grid-column: 1; + grid-row: 1; } -#nowrap-wrapper { - width: calc(max(100%, 500px)); - height: 50%; +#embedbox { + grid-column: 2; + grid-row: 1; + width: 0%; + height: calc(min(100%, 720px)); + transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); + text-overflow: clip; } #profilepic { - width: calc(min(256px, 25%)); + width: 256px; height: 256px; object-fit: cover; outline: var(--outline-thickness) solid white; - animation: flash_outline 500ms var(--easer) 0.2s both; + animation: + 500ms var(--easer) 0.2 flash_outline, + 1.5s var(--easer) 0s profileintro; + transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } @@ -266,12 +284,11 @@ a:visited { animation: infointro 1s var(--easer) 0.4s both, flash_outline 0.5s var(--easer) 0.5s both; } -#tablesdiv { - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; -} - #tablebox { + display: grid; + grid-template-columns: 100%; + grid-template-rows: 1fr 6fr; + height: 100%; width: 100%; animation: linksreveal 0.4s var(--easer) 0.8s both, flash_outline 0.5s var(--easer) 0.8s both; @@ -282,31 +299,78 @@ a:visited { } #buttonbox { - height: 15%; width: 100%; justify-content: space-evenly; } +#contactbox { + width: 100%; + height: 100%; + overflow-x: hidden; +} + +.link-name { + grid-column: 1; +} + +.link-a { + grid-column: 2; +} + + +.flash-inner, +.flash-inner * { + animation: flash_inner 250ms var(--easer); +} + +.bolder { + font-weight: bolder; +} + +#nowrap-wrapper { + width: calc(max(100%, 500px)); + height: 50%; +} + + #linksbox { overflow-x: hidden; overflow-y: auto; - box-sizing: border-box; - padding-top: var(--gap); - padding-bottom: var(--gap); } - .linkcell { height: 50%; - width: calc(100% - (var(--gap) * 4)); + width: calc(100% - (var(--gap) * 2)); background-size: cover; background-position: center; image-rendering: pixelated; - overflow-x: hidden; - overflow-y: hidden; - margin-left: calc(var(--gap) * 2); - margin-top: var(--gap); - margin-bottom: var(--gap); + overflow-x: auto; + text-overflow: clip; + overflow-y: auto; + + -webkit-border-radius: var(--border-radius-1); + border-radius: var(--border-radius-1); + + white-space: nowrap; + margin-left: calc(var(--gap)); + margin-top: calc(var(--gap) / 2); + margin-bottom: calc(var(--gap) / 2); +} + +.linkcell:is(:nth-child(1)) { + margin-top: var(--gap) +} + +.linkcell:is(:nth-last-child(1)) { + margin-bottom: var(--gap) +} + +.linkcell * { + -webkit-border-radius: var(--border-radius-1); + border-radius: var(--border-radius-1); + overflow-x: auto; + text-overflow: clip; + overflow-y: auto; } @@ -332,12 +396,6 @@ a:visited { overflow: hidden; } -#embedDiv { - width: 0%; - height: calc(min(100%, 720px)); - transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); - text-overflow: clip; -} #embedframe { opacity: 0; @@ -420,4 +478,14 @@ a:visited { 80% { box-shadow: inset 0px 0px 0vmin 0vmin var(--col-shadow); } +} + +@keyframes profileintro { + 0% { + width: 0%; + } + + 30% { + width: 0% + } } \ No newline at end of file diff --git a/index.html b/index.html index fb9f3ff..65dc293 100644 --- a/index.html +++ b/index.html @@ -17,11 +17,11 @@
-
+ +
profile picture lmao -

Hi

@@ -32,65 +32,46 @@

Hi

I hope you enjoy your stay. the `Links` tab is disabled on mobile.

-
-
-
- - - - - - - - - - - - - - - -
GitHub: zeptofine
Youtube: Zeptofine
Discord: zeptofine
+
+
+
+
-
+
- +
+ - \ No newline at end of file diff --git a/scripts/hideifmobile.js b/scripts/hideifmobile.js index cc6e516..2faf6a4 100644 --- a/scripts/hideifmobile.js +++ b/scripts/hideifmobile.js @@ -6,6 +6,4 @@ window.mobileCheck = function () { if (window.mobileCheck()) { document.getElementById("linksbox").remove(); -} -console.log(window.mobileCheck()); -console.log(navigator.userAgent || navigator.vendor || window.opera); \ No newline at end of file +} \ No newline at end of file diff --git a/scripts/icon.js b/scripts/icon.js deleted file mode 100644 index c3a93a4..0000000 --- a/scripts/icon.js +++ /dev/null @@ -1,12 +0,0 @@ - -icon = document.getElementById("profilepic"); - -icon.onclick = () => { - if (icon.style.width == "512px") { - icon.style.width = ""; - icon.style.height = ""; - } else { - icon.style.width = "512px"; - icon.style.height = "512px"; - } -} \ No newline at end of file diff --git a/scripts/links.js b/scripts/links.js index 1507d32..f28690b 100644 --- a/scripts/links.js +++ b/scripts/links.js @@ -1,71 +1,66 @@ -class LinksHandler { - constructor(container, links, iframe, embedDiv, resetter) { - this.container = container; - this.links = links; - this.iframe = iframe; - this.div = embedDiv; - this.resetter = resetter; - this.sourceLink = document.getElementById("source"); - this.linkParagraph = document.getElementById("link"); - this.gap = getComputedStyle(document.querySelector(':root')).getPropertyValue('--gap'); - - - // get button links and bind onclick - var button; - for (let i = 0; i < this.links.length; i++) { - button = this.links[i]; - if ("link" in button.dataset) { - console.log(button.dataset.link); - button.onclick = () => this.selectSrc(i); - } - } - this.resetter.onclick = () => this.revert(); - } - selectSrc(idx) { - console.log("selected source: ", this.links[idx]); - let button = this.links[idx]; - let dataset = button.dataset; +const container = document.getElementById("base"); +const links = document.getElementById("linksbox").getElementsByClassName("linkcell"); +const resetbutton = document.getElementById("resetLayoutButton"); +const iframe = document.getElementById("embedframe"); +const div = document.getElementById("embedbox"); + +const sourceLink = document.getElementById("source"); +const linkParagraph = document.getElementById("link"); - this.div.style.width = "100%"; - this.div.style.opacity = "1"; - - this.iframe.src = dataset.link; - if ("source" in dataset) { - this.sourceLink.href = dataset.source; - this.sourceLink.text = this.sourceLink.href; - this.sourceLink.style.height = ""; - } else { - this.sourceLink.style.height = "0%"; - } +function selectSrc(idx) { - this.iframe.style.width = "calc(100% - " + this.gap + ")"; // gross - this.iframe.style.opacity = "1"; - this.iframe.style.marginLeft = this.gap; - this.container.style.width = "calc(min(100%, 1350px))"; + let button = links[idx]; + let dataset = button.dataset; + div.style.width = "100%"; + div.style.opacity = "1"; + div.style.marginLeft = "var(--gap)"; + if (iframe.src != links[idx].dataset.link) { + iframe.src = dataset.link; } - revert() { - this.iframe.style.width = ""; - this.iframe.style.opacity = "0"; - this.iframe.style.marginLeft = ""; + if ("source" in dataset) { + pulseanimation(sourceLink, "flash-inner"); + sourceLink.href = dataset.source; - this.container.style.width = ""; - this.div.style.width = "0%"; - this.div.style.opacity = "0"; + sourceLink.text = sourceLink.href; + sourceLink.style.height = ""; + } else { + sourceLink.style.height = "0%"; + } + iframe.style.opacity = "1"; + + container.style.width = "calc(min(100%, 1350px))"; + + console.log("selected source: ", links[idx]); +} + +function revert() { + iframe.style.width = ""; + iframe.style.opacity = "0"; + iframe.style.marginLeft = ""; + + container.style.width = ""; + div.style.width = "0%"; + div.style.opacity = "0"; + div.style.marginLeft = ""; + +} +// get button links and bind onclick +var button; +for (let i = 0; i < links.length; i++) { + button = links[i]; + if ("link" in button.dataset) { + console.log(button.dataset.link); + button.onclick = () => selectSrc(i); } } +resetbutton.onclick = () => revert(); -let resetbutton = document.getElementById("resetLayoutButton"); -let container = document.getElementById("base"); -const links = document.getElementById("linksbox").getElementsByClassName("linkcell"); -const iframe = document.getElementById("embedframe"); -const embedDiv = document.getElementById("embedDiv"); -const linkhandler = new LinksHandler(container, links, iframe, embedDiv, resetbutton); -linkhandler.revert(); \ No newline at end of file +revert(); \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index 949b68f..695c7ed 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -6,86 +6,82 @@ const interleave = ([x, ...xs], ...rest) => : interleave(...rest) // inductive: no x, some rest : [x, ...interleave(...rest, xs)]; // inductive: some x, some rest -class TableHandler { - constructor(tables, box) { - this.tables = tables; - this.selected; - // Create buttons to operate the tables - let listdiv = document.createElement('div'); - listdiv.id = "buttonbox"; - listdiv.className = "row"; - - this.buttons = this.createTableButtons(); - console.log("created buttons", this.buttons); - Array.from(this.interleaveDots(this.buttons)).forEach(element => { - listdiv.appendChild(element) - }); - box.insertBefore(listdiv, box.firstChild); - } - - createTableButtons() { - let newdivs = []; - var table; - for (let i = 0; i < this.tables.length; i++) { - table = this.tables[i]; - console.assert(true, 'name' in table.dataset); - if ('name' in table.dataset) { - var newdiv = document.createElement('button'); - newdiv.type = "button"; - newdiv.textContent = table.dataset.name; - newdiv.onclick = () => handler.open(i); - newdivs.push(newdiv); - } +function createTableButtons() { + let newdivs = []; + var table; + for (let i = 0; i < tables.length; i++) { + table = tables[i]; + console.assert(true, 'name' in table.dataset); + if ('name' in table.dataset) { + var newdiv = document.createElement('button'); + newdiv.type = "button"; + newdiv.textContent = table.dataset.name; + newdiv.onclick = () => open(i); + newdivs.push(newdiv); } - return newdivs; } + return newdivs; +} - interleaveDots(divs) { - let dots = []; - var dot; - for (let i = 1; i < divs.length; i++) { - dot = document.createElement("div"); - dot.className = "dot"; - dots.push(dot); - } - return interleave(divs, dots); + +function interleaveDots(divs) { + let dots = []; + var dot; + for (let i = 1; i < divs.length; i++) { + dot = document.createElement("div"); + dot.className = "dot"; + dots.push(dot); } + return interleave(divs, dots); +} - open(sel) { - if (this.tables[sel] === this.selected) { - console.log("table already selected"); - return; - } - for (let i = 0; i < this.tables.length; i++) { - if (i == sel) { - this.tables[i].style.width = "100%"; - this.tables[i].style.opacity = "1"; - this.tables[i].classList.add("flash-inner"); +const tables = document.getElementById("tablesdiv").getElementsByClassName("tables"); +let selected; +let listdiv = document.getElementById("buttonbox"); +let buttons = createTableButtons(); - this.buttons[i].style.letterSpacing = "2px"; - this.buttons[i].style.color = "white"; - this.buttons[i].classList.add("bolder"); +Array.from(interleaveDots(buttons)).forEach(element => listdiv.appendChild(element)); - this.selected = this.tables[i]; - console.log("selected ", this.selected); - } else { - this.tables[i].style.width = "0px"; - this.tables[i].style.opacity = "0"; - this.tables[i].classList.remove("flash-inner"); - this.buttons[i].classList.add("bolder"); +function open(sel) { + if (tables[sel] === selected) + return; - this.buttons[i].style.letterSpacing = ""; - this.buttons[i].style.color = ""; - this.buttons[i].classList.remove("bolder"); - } + var table; + for (let i = 0; i < tables.length; i++) { + if (i == sel) { + table = tables[i]; + table.style.width = ""; + table.style.opacity = "1"; + pulseanimation(table, "flash-inner"); + + buttons[i].style.letterSpacing = "2px"; + buttons[i].style.color = "white"; + buttons[i].classList.add("bolder"); + + selected = tables[i]; + } else { + tables[i].style.width = "0px"; + tables[i].style.opacity = "0"; + buttons[i].classList.add("bolder"); + + buttons[i].style.letterSpacing = ""; + buttons[i].style.color = ""; + buttons[i].classList.remove("bolder"); } } } -const handler = new TableHandler( - document.getElementById("tablesdiv").getElementsByClassName("tables"), - document.getElementById("tablebox"), -); -handler.open(0); -console.log(handler); \ No newline at end of file +open(0); + +for (let i = 0; i < buttons.length; i++) { + buttons[i].addEventListener("keydown", (event) => { + console.log(event); + }) +} + +document.addEventListener("keydown", (event) => { + if (isFinite(event.key) && event.key <= buttons.length) { // is a number + open(event.key - 1); + } +}) \ No newline at end of file diff --git a/scripts/pulseanimation.js b/scripts/pulseanimation.js new file mode 100644 index 0000000..3d8f0c9 --- /dev/null +++ b/scripts/pulseanimation.js @@ -0,0 +1,9 @@ + +function pulseanimation(element, classname) { + element.classList.add(classname); + let originalend = element.onanimationend; + element.onanimationend = () => { + element.classList.remove(classname); + element.onanimationend = originalend; + } +} \ No newline at end of file