Skip to content

Commit

Permalink
another damn redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeptofine
zeptofine committed Sep 15, 2023
1 parent 906dc65 commit d6ddec6
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 185 deletions.
227 changes: 99 additions & 128 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@
--col-links: #feffe8;
--col-base-border: #9566b5;
--col-sub-border: #56326e;
--col-background: #292533;
--col-basewin: #221e2b;
--col-background: #2b2342;
--col-basewin: #252030;
--col-shadow: #130618b0;
--col-darker: #211a29;
--col-darkest: #191422;
--easer: cubic-bezier(0.19, 1, 0.22, 1);
--border-radius-1: 5px;
--border-radius-2: 10px;
--border-radius-3: 20px;
--border-radius-1: 15px;
--border-radius-2: 20px;
--border-radius-3: 30px;
--dot-color: #453b53;
--outline-thickness: 2px;
--gap: 10px;

--height-multiplier: 5;
--height-multiplier: 6;
--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 @@ -88,14 +88,11 @@ table {
}

ul {
display: flex;
flex-direction: column;
justify-content: space-evenly;

box-sizing: border
}

li {
margin: 10px;
margin: 5px;
}

a:link {
Expand Down Expand Up @@ -205,19 +202,11 @@ a:visited {
}

.dot {
width: 30%;
outline: 0.1vmin solid var(--dot-color);
width: 10px;
height: 20px;
background-color: var(--dot-color);
}

.tables {
width: 100%;
height: 100%;
background-color: var(--col-darkest);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
overflow-y: auto;
transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

.nowrap {
white-space: nowrap;
Expand All @@ -233,144 +222,122 @@ a:visited {
top: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);

background-image: url("../images/profile.png");
background-size: cover;
background-position: center;
background-color: black;
animation: 4s var(--easer) 0s profileintro;
}

#container {
-webkit-backdrop-filter: blur(64px);
backdrop-filter: blur(64px);
width: 100%;
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);


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

-webkit-border-radius: var(--border-radius-3);
border-radius: var(--border-radius-3);
background-color: var(--col-background);

animation: 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;
}

#picture {
height: 100%;
}



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

#profile {
height: 250px;
background-image: url("../images/profile.png");
background-size: cover;
background-position: center;
background-color: black;

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


#infobox {
width: 100%;
height: 100%;
padding-inline: var(--gap);
align-items: center;
align-self: center;
justify-content: left;
overflow-y: auto;
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 1fr;

height: 100%;
width: 100%;
animation: linksreveal 0.4s var(--easer) 0.8s both, flash_outline 0.5s var(--easer) 0.8s both;
animation: linksreveal 0.4s var(--easer) 0.2s both, flash_outline 0.5s var(--easer) 0.2s both;
background-color: var(--col-darker);
align-items: center;
align-self: center;
justify-content: left;
}


.link-name {
grid-column: 1;
#buttonbox>button {
color: var(--col-text-button);
height: 100%;
}

.link-a {
grid-column: 2;
.tables {
width: 100%;
height: 100%;
background-color: var(--col-darkest);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
overflow-y: auto;
transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

#profile {
width: 100%;
height: 100%;

.flash-inner,
.flash-inner * {
animation: flash_inner 250ms var(--easer);
animation: infointro 1s var(--easer) 0.4s both;
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.bolder {
font-weight: bolder;
}
#infobox {
width: 100%;
height: 100%;
align-items: center;
align-self: center;
padding: var(--gap);
box-sizing: border-box;

#nowrap-wrapper {
width: calc(max(100%, 500px));
height: 50%;
}


#linksbox {
overflow-x: hidden;
overflow-y: auto;
/* overflow-y: hidden; */
}

#buttonbox button {
color: var(--col-text-button);
.buttonlist {
height: 100%;
width: 75%;
overflow-y: scroll;
overflow: auto;

}

.linkcell {
height: 40%;
height: 20%;
width: calc(100% - (var(--gap) * 2));
background-size: cover;
background-position: center;
image-rendering: pixelated;
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: calc(var(--gap));
margin-top: calc(var(--gap) / 2);
margin-bottom: calc(var(--gap) / 2);
}

.linkcell-div {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}


.linkcell:is(:nth-child(1)) {
margin-top: var(--gap)
}
Expand All @@ -387,6 +354,35 @@ a:visited {
overflow-y: hidden;
}

#embedbox {
height: 100%;
width: 100%;
box-sizing: border-box;
padding: var(--gap);
padding-inline: var(--gap);
gap: var(--gap)
}

#embedframe {
width: 100%;
height: 100%;

-webkit-border-radius: var(--border-radius-1);
border-radius: var(--border-radius-1);
}



.flash-inner,
.flash-inner * {
animation: flash_inner 250ms var(--easer);
}

.bolder {
font-weight: bolder;
}


.collapsed {
width: 0px;
height: 0px;
Expand All @@ -401,6 +397,16 @@ a:visited {
color: white
}


#resetLayoutButton {
color: white;
height: 100%;
width: 64px;
overflow: hidden;
}



#CIMUTILS {
background-image: url("../images/ConsoleImageUtils.png");
}
Expand All @@ -413,21 +419,6 @@ a:visited {
background-image: url("../images/TH264.png");
}

#resetLayoutButton {
color: white;
height: 100%;
width: 64px;
overflow: hidden;
}


#embedframe {
opacity: 0;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
width: 100%;
height: 100%;
}

#source {
width: 100%;
text-overflow: clip;
Expand All @@ -441,12 +432,6 @@ a:visited {



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

}

@keyframes flash_outline {
0% {
outline: 0px solid var(--col-bloom)
Expand Down Expand Up @@ -486,23 +471,9 @@ a:visited {

@keyframes infointro {
0% {
opacity: 0;}

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

color: #00000000;
}

20% {
color: #00000000;
}

60% {}


80% {
overflow-y: hidden
}
}

@keyframes linksreveal {
Expand Down

0 comments on commit d6ddec6

Please sign in to comment.