Skip to content

Commit

Permalink
remove base, add search params
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeptofine
zeptofine committed Sep 15, 2023
1 parent eb9876a commit fcea707
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 103 deletions.
36 changes: 11 additions & 25 deletions css/projects.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 * {
Expand All @@ -56,10 +52,6 @@
#embedbox {
height: 100%;
width: 100%;
box-sizing: border-box;
padding: var(--gap);
padding-inline: var(--gap);
gap: var(--gap)
}

#embedframe {
Expand All @@ -76,12 +68,6 @@
}


.collapsed {
width: 0px;
height: 0px;
opacity: 0;
}


#source {
width: 100%;
Expand Down
54 changes: 40 additions & 14 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -234,32 +239,26 @@ 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;

-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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -311,6 +311,13 @@ a:visited {
font-weight: bolder;
}

.collapsed {
width: 0px;
height: 0px;
opacity: 0;
}



.blacktext {
color: black
Expand All @@ -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% {
Expand Down
127 changes: 66 additions & 61 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,80 +15,85 @@
<base target="_blank">
<div id="marginprovider" class="gapless">
<div id="container" class="row gapless">
<div id="base" class="outlined gapless">
<div id="tablebox">
<div id="buttonbox" class="row fullheight sharp-bl sharp-br"></div>
<div id="tablesdiv" class="gapless row fullheight fullwidth">
<div id="aboutbox" class="tables sharp-tl sharp-tr" data-name="About me">
<div class="pad column">
<div class="infobox">
<!-- <div class="picture row">
<div id="tablebox" class="outlined gapless">
<div id="buttonbox" class="row fullheight sharp-bl sharp-br"></div>
<div id="tablesdiv" class="gapless row fullheight fullwidth">
<div id="aboutbox" class="tables sharp-tl sharp-tr" data-name="About me" data-height="7">
<div class="pad-x pad-y column fullheight">
<div class="infobox">
<!-- <div class="picture row">
<img id="profilepic" src="images/profile.png" title="Hey, that's my icon!"
alt="profile picture lmao" decoding="async">
</div> -->
<h1 class="row">Hi! I'm Zeptofine</h2>
<hr>
<p>I'm an amateur Python, Java, Shell scripter / programmer. </p>
<p>I know some html, css, and js (enough to make this site).</p>
<hr>
<p>she / her / they / them</p>
<p>I hope you enjoy your stay.</p>
<hr>
<ul>
<li><a href="https://github.com/zeptofine">GitHub (zeptofine)</a></li>
<li><a href="https://www.youtube.com/@zeptofine">Youtube (Zeptofine)</a>
</li>
<li><a href="https://discord.com/users/254947853074432001">Discord
(zeptofine)</a>
</li>
</ul>
</div>
<h1 class="row">Hi! I'm Zeptofine</h1>
<hr>
<p>I'm an amateur Python, Java, Shell scripter / programmer. </p>
<p>I know some html, css, and js (enough to make this site).</p>
<hr>
<p>she / her / they / them. I hope you enjoy your stay.</p>
<hr>
<p>Social media:
<ul>
<li><a href="https://github.com/zeptofine">GitHub (zeptofine)</a></li>
<li><a href="https://www.youtube.com/@zeptofine">Youtube (Zeptofine)</a>
</li>
<li><a href="https://discord.com/users/254947853074432001">Discord
(zeptofine)</a>
</li>
</ul>
</div>
</p>
<!-- <div id="featured-images" class="pad-x">
</div> -->
</div>
<div id="linksbox" class="row tables sharp-tl sharp-tr" data-name="Projects" data-width="8">
<div class="buttonlist">
<button id="CIMUTILS" class="linkcell outlined-hovered whitetext" type="button"
data-link="https://zeptofine.github.io/Console_Image_Utils"
data-source="https://github.com/zeptofine/Console_Image_Utils">
<div class="linkcell-div boxed-inset">
<p>Console_Image_Utils:</p>
<p>A set of utilities to help with managing images</p>
</div>
</button>
<button id="PXSORTER" class="linkcell outlined-hovered" type="button"
data-link="https://zeptofine.github.io/pixelsorter"
data-source="https://github.com/zeptofine/pixelsorter">
<div class="linkcell-div boxed-inset">
<p>Pixelsorter:</p>
<p>A small-ish pixelsorter script i made to learn.</p>
</div>
</button>
<button id="TH264" class="linkcell outlined-hovered whitetext" type="button"
data-link="https://zeptofine.github.io/TurnH264/"
data-source="https://github.com/zeptofine/TurnH264">
<div class="linkcell-div boxed-inset">
<p>TurnH264: </p>
<p>A TurnH264 fork with a lot of changes</p>
</div>
</button>
</div>
<div id="embedbox" class="sharp column">
<a id="source"></a>
<iframe title="embed" id="embedframe" src="" class="outlined"
sandbox="allow-scripts allow-popups">
</iframe>
</div>
</div>
<!-- <div id="contactbox" class="tables sharp-tl sharp-tr" data-name="Contact">
</div> -->
<div id="linksbox" class="row tables sharp-tl sharp-tr" data-name="Projects" data-width="8">
<div id="projectlinks" class="buttonlist pad-x pad-y">
<button id="CIMUTILS" class="linkcell outlined-hovered whitetext" type="button"
data-link="https://zeptofine.github.io/Console_Image_Utils"
data-source="https://github.com/zeptofine/Console_Image_Utils">
<div class="linkcell-div boxed-inset">
<p>Console_Image_Utils:</p>
<p>A set of utilities to help with managing images</p>
</div>
</button>
<button id="PXSORTER" class="linkcell outlined-hovered" type="button"
data-link="https://zeptofine.github.io/pixelsorter"
data-source="https://github.com/zeptofine/pixelsorter">
<div class="linkcell-div boxed-inset">
<p>Pixelsorter:</p>
<p>A small-ish pixelsorter script i made to learn.</p>
</div>
</button>
<button id="TH264" class="linkcell outlined-hovered whitetext" type="button"
data-link="https://zeptofine.github.io/TurnH264/"
data-source="https://github.com/zeptofine/TurnH264">
<div class="linkcell-div boxed-inset">
<p>TurnH264: </p>
<p>A TurnH264 fork with a lot of changes</p>
</div>
</button>
</div>
<div id="embedbox" class="sharp column pad-x pad-y">
<a id="source"></a>
<iframe title="embed" id="embedframe" src="" class="outlined"
sandbox="allow-scripts allow-popups">
</iframe>
</div>
<!-- <div id="gallerybox" class="tables sharp-tl sharp-tr" data-name="Gallery" data-width=100 data-height=100>
<div></div>
</div> -->
</div>
<!-- <div id="gallerybox" class="tables sharp-tl sharp-tr" data-name="Gallery" data-width=100
data-height=100>
<div></div>
</div> -->
</div>
</div>
</div>
</div>
<script src="scripts/pulseanimation.js"></script>
<script src="scripts/hideifmobile.js"></script>
<script src="scripts/links.js"></script>
<!-- <script src="scripts/images.js"></script> -->
<script src="scripts/main.js"></script>
</body>
18 changes: 15 additions & 3 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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");
Expand All @@ -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);
})
}
Expand Down

0 comments on commit fcea707

Please sign in to comment.