Skip to content

Commit

Permalink
refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeptofine
zeptofine committed Jul 17, 2023
1 parent 0504d98 commit 0fd6a07
Show file tree
Hide file tree
Showing 7 changed files with 264 additions and 229 deletions.
152 changes: 110 additions & 42 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -93,8 +103,6 @@ a:link {

a:visited {
color: var(--col-links);
font-weight: bolder;
text-decoration: none;
}


Expand All @@ -106,6 +114,7 @@ a:visited {
align-items: center;
justify-content: center;
flex-wrap: nowrap;

gap: var(--gap);
}

Expand Down Expand Up @@ -189,8 +198,7 @@ a:visited {
}

.dot {
width: 0%;
height: 50%;
width: 1%;
outline: 0.1vmin solid var(--dot-color);
}

Expand All @@ -207,6 +215,7 @@ a:visited {
.nowrap {
white-space: nowrap;
}

.clip-hidden {
overflow: hidden;
}
Expand All @@ -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 {
Expand All @@ -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);
}

Expand All @@ -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;
Expand All @@ -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;
}


Expand All @@ -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;
Expand Down Expand Up @@ -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%
}
}
73 changes: 27 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@
<base target="_blank">
<div id="container" class="row gapless">
<div id="base" class="row outlined boxed-inset fullheight gapless">
<div class="column fullheight fullwidth">

<div id="pfbox" class="column fullheight fullwidth">
<div class="row">
<img id="profilepic" src="images/SiteWall.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</h2>
<hr>
Expand All @@ -32,65 +32,46 @@ <h2 id="hello">Hi</h2>
<p>I hope you enjoy your stay. the `Links` tab is disabled on mobile.</p>
</div>
</div>
<div id="tablebox" class="outlined boxed-inset column fullheight clip-hidden">
<div id="tablesdiv" class="gapless row fullheight">
<div class="tables outlined boxed-inset sharp-top" data-name="Social">
<table rules="rows">
<tbody>
<tr>
<th>GitHub: </th>
<td><a href="https://github.com/zeptofine">zeptofine</a></td>
</tr>
<tr>
<th>Youtube: </th>
<td><a href="https://www.youtube.com/@zeptofine">Zeptofine</a></td>
</tr>
<tr>
<th>Discord: </th>
<td>zeptofine</td>
</tr>
</tbody>
</table>
<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>
<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">
<table class="blurred-background boxed-inset" rules="rows">
<tbody>
<tr>
<th>Console_Image_Utils:</th>
<td>A set of utilities to help with managing images</td>
</tr>
</tbody>
</table>
<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">
<table class="blurred-background boxed-inset" rules="rows">
<tbody>
<tr>
<th>Pixelsorter:</th>
<td>A small-ish pixelsorter script i made to learn.</td>
</tr>
</tbody>
</table>
<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">
<table class="blurred-background boxed-inset" rules="rows">
<tbody>
<tr><th>TurnH264: </th><td>A TurnH264 fork with a lot of changes</td></tr>
</tbody>
</table>
<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>
</div>
</div>
<div id="embedDiv" class="column sharp fullheight">
<div id="embedbox" class="column sharp fullheight">
<div class="row fullwidth">
<button id="resetLayoutButton" class="row">
<span class="material-symbols-outlined">
Expand All @@ -99,13 +80,13 @@ <h2 id="hello">Hi</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="boxed-inset 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/icon.js"></script>
</body>
4 changes: 1 addition & 3 deletions scripts/hideifmobile.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 0fd6a07

Please sign in to comment.