Skip to content

Commit

Permalink
what
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeptofine
zeptofine committed Sep 13, 2023
1 parent 3aee0d8 commit 906dc65
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 96 deletions.
162 changes: 90 additions & 72 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
--gap: 10px;

--height-multiplier: 5;
--width-multiplier: 8;
--width-multiplier: 6;
--height-controller: calc(min(var(--height-multiplier) * 120px, 100%));
--width-controller: calc(min(var(--width-multiplier) * 120px, 100%));
}
Expand Down Expand Up @@ -61,10 +61,6 @@ button {
transition: 1000ms cubic-bezier(0.19, 1, 0.22, 1) all;
}

#buttonbox button {
color: var(--col-text-button);
}

.hover-clickable:hover {
cursor: pointer;
}
Expand Down Expand Up @@ -95,10 +91,12 @@ ul {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 85%;


box-sizing: border
}
li {
margin: 10px;
}

a:link {
color: var(--col-links);
Expand Down Expand Up @@ -130,6 +128,8 @@ a:visited {
align-items: flex-start;
justify-content: flex-start;
justify-items: flex-start;
flex-wrap: nowrap;

gap: var(--gap);
}

Expand Down Expand Up @@ -168,17 +168,19 @@ a:visited {
box-shadow: inset 5px 5px var(--col-shadow);
}

.sharp {
border-radius: 0;
.sharp-bl {
border-bottom-left-radius: 0
}

.sharp-bottom {
border-bottom-left-radius: 0;
.sharp-br {
border-bottom-right-radius: 0;
}

.sharp-top {
.sharp-tl {
border-top-left-radius: 0;
}

.sharp-tr {
border-top-right-radius: 0;
}

Expand All @@ -203,7 +205,7 @@ a:visited {
}

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

Expand Down Expand Up @@ -238,67 +240,73 @@ a:visited {
height: 100%;
transition: 1s cubic-bezier(0.19, 1, 0.22, 1) all;
}

#base {
height: var(--height-controller);
width: var(--width-controller);
padding: var(--gap);
background-color: var(--col-basewin);


box-sizing: border-box;
overflow-y: auto;

-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;
animation: flash_outline 250ms var(--easer) 0.1s both;
transition: 1s cubic-bezier(0.19, 1, 0.22, 1) all;
}


#pfbox {
grid-column: 1;
grid-row: 1;
#picture {
height: 100%;
}



#embedbox {
grid-column: 2;
grid-row: 1;
width: 0%;
height: var(--height-controller);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
text-overflow: clip;
}

#profilepic {
width: 300px;
height: 300px;
object-fit: cover;
#profile {
height: 250px;
background-image: url("../images/profile.png");
background-size: cover;
background-position: center;
background-color: black;
outline: var(--outline-thickness) solid white;
animation:
500ms var(--easer) 0.2 flash_outline,
1.5s var(--easer) 0s profileintro;

animation:
4s var(--easer) 0s profileintro;
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}


#info {
#infobox {
width: 100%;
height: 100%;
padding-inline: var(--gap);
align-items: center;
align-self: center;
justify-content: left;
overflow-y: auto;
background-color: var(--col-darker);
animation: infointro 1s var(--easer) 0.4s both, flash_outline 0.5s var(--easer) 0.5s both;
overflow-wrap: normal;

outline: var(--outline-thickness) solid white;

-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);

/* background-color: black; */
animation:
0.5s var(--easer) 0.5s flash_outline,
1.5s var(--easer) 0s infointro;
}

#tablebox {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50px 8fr;
grid-template-rows: 50px 1fr;

height: 100%;
width: 100%;
Expand All @@ -310,12 +318,6 @@ a:visited {
}


#contactbox {
width: 100%;
height: 100%;
overflow-x: hidden;
}

.link-name {
grid-column: 1;
}
Expand Down Expand Up @@ -345,15 +347,20 @@ a:visited {
overflow-y: auto;
}

#buttonbox button {
color: var(--col-text-button);
height: 100%;
}

.linkcell {
height: 40%;
width: calc(100% - (var(--gap) * 2));
background-size: cover;
background-position: center;
image-rendering: pixelated;
overflow-x: auto;
overflow-x: hidden;
text-overflow: clip;
overflow-y: auto;
overflow-y: hidden;

-webkit-border-radius: var(--border-radius-1);
border-radius: var(--border-radius-1);
Expand All @@ -375,25 +382,35 @@ a:visited {
.linkcell * {
-webkit-border-radius: var(--border-radius-1);
border-radius: var(--border-radius-1);
overflow-x: auto;
overflow-x: hidden;
text-overflow: clip;
overflow-y: auto;
overflow-y: hidden;
}

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

.blacktext {
color: black
}

.whitetext {
color: white
}

#CIMUTILS {
background-image: url("../images/ConsoleImageUtils.png");
color: white;
}

#PXSORTER {
background-image: url("../images/pixelsorter.png");
color: black;
}

#TH264 {
background-image: url("../images/TH264.png");
color: white;
}

#resetLayoutButton {
Expand All @@ -417,20 +434,19 @@ a:visited {
overflow: hidden;
}

#gallerybox {
height: 100%;
width: 100%;
}



.blurred-background {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);

}

@keyframes slide-base {
0% {
background-color: var(--col-background);
box-shadow: inset 0px 0px var(--col-background);
}
}


@keyframes flash_outline {
0% {
outline: 0px solid var(--col-bloom)
Expand Down Expand Up @@ -458,20 +474,32 @@ a:visited {
}
}

@keyframes infointro {
@keyframes profileintro {
0% {
box-shadow: 0px 0px var(--col-shadow);
height: 0%;
background-color: var(--col-background);
background-position: 0px 0px;
}

40% {
height: 0%;

}


@keyframes infointro {
0% {

-webkit-backdrop-filter: blur(100px);
backdrop-filter: blur(100px);

color: #00000000;
}

50% {
box-shadow: 0px 0px var(--col-shadow);
20% {
color: #00000000;
}

60% {}


80% {
overflow-y: hidden
}
Expand All @@ -485,14 +513,4 @@ a:visited {
80% {
box-shadow: inset 0px 0px 0vmin 0vmin var(--col-shadow);
}
}

@keyframes profileintro {
0% {
width: 0%;
}

30% {
width: 0%
}
}
27 changes: 14 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,10 @@
<base target="_blank">
<div id="marginprovider" class="row gapless">
<div id="container" class="row gapless">
<div id="base" class="row outlined boxed-inset fullheight gapless">

<div id="base" class="row outlined 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">
<div id="profile" class="row gapless">
<div id="infobox" 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>
Expand All @@ -36,17 +33,18 @@ <h2 id="hello">Hi! I'm Zeptofine</h2>
<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>
<div id="contactbox" class="tables outlined boxed-inset sharp-tl sharp-tr"
data-name="Social" data-height=4>
<ul class="column gapless">
<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"
<div id="linksbox" class="tables outlined boxed-inset sharp-tl sharp-tr"
data-name="Projects" data-height="6">
<button id="CIMUTILS" class="linkcell outlined-hovered whitetext"
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">
Expand All @@ -62,7 +60,7 @@ <h2 id="hello">Hi! I'm Zeptofine</h2>
<p>A small-ish pixelsorter script i made to learn.</p>
</div>
</button>
<button id="TH264" class="linkcell outlined-hovered"
<button id="TH264" class="linkcell outlined-hovered whitetext"
data-link="https://zeptofine.github.io/TurnH264/"
data-source="https://github.com/zeptofine/TurnH264">
<div class="row blurred-background boxed-inset fullwidth fullheight">
Expand All @@ -71,7 +69,10 @@ <h2 id="hello">Hi! I'm Zeptofine</h2>
</div>
</button>
</div>
<!-- <div id="gallerybox" class="tables outlined boxed-inset sharp-top" data-name="Gallery" data-height=100 data-width=100></div> -->
<!-- <div id="gallerybox" class="tables outlined boxed-inset sharp-tl sharp-tr" data-name="Gallery"
data-height=100 data-width=100>
</div> -->
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 906dc65

Please sign in to comment.