Skip to content

Commit

Permalink
new width and height handling in buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeptofine
zeptofine committed Sep 13, 2023
1 parent ca76577 commit 3aee0d8
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 73 deletions.
29 changes: 18 additions & 11 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(*) */
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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%;
Expand All @@ -298,10 +309,6 @@ a:visited {
justify-content: left;
}

#buttonbox {
width: 100%;
justify-content: space-evenly;
}

#contactbox {
width: 100%;
Expand Down Expand Up @@ -339,7 +346,7 @@ a:visited {
}

.linkcell {
height: 50%;
height: 40%;
width: calc(100% - (var(--gap) * 2));
background-size: cover;
background-position: center;
Expand Down
113 changes: 59 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,63 +15,68 @@

<body>
<base target="_blank">
<div id="container" class="row gapless">
<div id="base" class="row outlined boxed-inset fullheight gapless">
<div id="marginprovider" class="row gapless">
<div id="container" class="row gapless">
<div id="base" class="row outlined boxed-inset fullheight gapless">

<div id="pfbox" class="column fullheight fullwidth">
<div class="row">
<img id="profilepic" src="images/profile.png" title="Hey, that's my icon!"
alt="profile picture lmao" decoding="async">
<div id="info" class="outlined boxed-inset nowrap">
<h2 id="hello">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>
</div>
</div>
<div id="tablebox" class="outlined boxed-inset">
<div id="buttonbox" class="row"></div>
<div id="tablesdiv" class="gapless row fullheight fullwidth">
<div id="tmpbox" class="tables outlined boxed-inset sharp-top" data-name="Social">
<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 id="pfbox" class="column fullheight fullwidth">
<div class="row">
<img id="profilepic" src="images/profile.png" title="Hey, that's my icon!"
alt="profile picture lmao" decoding="async">
<div id="info" class="outlined boxed-inset nowrap">
<h2 id="hello">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>
</div>
<div id="linksbox" class="tables outlined boxed-inset sharp-top" data-name="Links">
<button id="CIMUTILS" class="linkcell outlined-hovered"
data-link="https://zeptofine.github.io/Console_Image_Utils"
data-source="https://github.com/zeptofine/Console_Image_Utils">
<div class="row blurred-background boxed-inset fullwidth fullheight">
<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"
data-link="https://zeptofine.github.io/pixelsorter"
data-source="https://github.com/zeptofine/pixelsorter">
<div class="row blurred-background boxed-inset fullwidth fullheight">
<p>Pixelsorter:</p>
<p>A small-ish pixelsorter script i made to learn.</p>
</div>
</button>
<button id="TH264" class="linkcell outlined-hovered"
data-link="https://zeptofine.github.io/TurnH264/"
data-source="https://github.com/zeptofine/TurnH264">
<div class="row blurred-background boxed-inset fullwidth fullheight">
<p>TurnH264: </p>
<p>A TurnH264 fork with a lot of changes</p>
</div>
</button>
</div>
<div id="tablebox" class="outlined boxed-inset">
<div id="buttonbox" class="row"></div>
<div id="tablesdiv" class="gapless row fullheight fullwidth">
<div id="contactbox" class="tables outlined boxed-inset sharp-top" data-name="Social">
<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>
<div id="linksbox" class="tables outlined boxed-inset sharp-top" data-name="Projects"
data-height=6>
<button id="CIMUTILS" class="linkcell outlined-hovered"
data-link="https://zeptofine.github.io/Console_Image_Utils"
data-source="https://github.com/zeptofine/Console_Image_Utils">
<div class="row blurred-background boxed-inset fullwidth fullheight">
<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"
data-link="https://zeptofine.github.io/pixelsorter"
data-source="https://github.com/zeptofine/pixelsorter">
<div class="row blurred-background boxed-inset fullwidth fullheight">
<p>Pixelsorter:</p>
<p>A small-ish pixelsorter script i made to learn.</p>
</div>
</button>
<button id="TH264" class="linkcell outlined-hovered"
data-link="https://zeptofine.github.io/TurnH264/"
data-source="https://github.com/zeptofine/TurnH264">
<div class="row blurred-background boxed-inset fullwidth fullheight">
<p>TurnH264: </p>
<p>A TurnH264 fork with a lot of changes</p>
</div>
</button>
</div>
<!-- <div id="gallerybox" class="tables outlined boxed-inset sharp-top" data-name="Gallery" data-height=100 data-width=100></div> -->
</div>
</div>
</div>
</div>
<div id="embedbox" class="column sharp fullheight">
<div id="embedbox" class="column sharp">
<div class="row fullwidth">
<button id="resetLayoutButton" class="row">
<span class="material-symbols-outlined">
Expand All @@ -80,13 +85,13 @@ <h2 id="hello">Hi! I'm Zeptofine</h2>
</button>
<a id="source"></a>
</div>
<iframe id="embedframe" src="" class="boxed-inset outlined"
sandbox="allow-scripts allow-popups"></iframe>
<iframe id="embedframe" src="" class="outlined" sandbox="allow-scripts allow-popups">
</iframe>
</div>
</div>
</div>
<script src="scripts/pulseanimation.js"></script>
<script src="scripts/hideifmobile.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/links.js"></script>
<script src="scripts/main.js"></script>
</body>
3 changes: 1 addition & 2 deletions scripts/links.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -34,7 +34,6 @@ function selectSrc(idx) {
}
iframe.style.opacity = "1";

container.style.width = "calc(min(100%, 1350px))";

console.log("selected source: ", links[idx]);

Expand Down
18 changes: 12 additions & 6 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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");
}
}
}
Expand Down

0 comments on commit 3aee0d8

Please sign in to comment.