simon/old-personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

massive update

Browse Source 
effectively restructured site, added new theme, and improved organization
This commit is contained in:
Simon O'Shea
2023-02-06 10:29:40 -05:00
parent ca6e8f1b21
commit fdbf49f932
68 changed files with 1006 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/bin/homepage/homepage-css.css.save
+611
View File
@@ -0,0 +1,611 @@
/**
normal chrome dark theme color
@media(prefers-color-scheme:dark){body{background-color:rgb(50,54,57);}}
#ball-left
{
display: block;
position: relative;
top: 2.5rem;
left: 20%;
height: .5rem;
width: .5rem;
border-radius: 50%;
animation-name: left-ball;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#ball-right
{
display: block;
position: relative;
bottom: 2.5rem;
height: .5rem;
width: .5rem;
border-radius: 50%;
animation-name: right-ball;
animation-duration: 20s;
animation-iteration-count: infinite;
}
@keyframes left-ball
{
0%
{
left: 25%;
background-color: white;
}
10%
{
left: 30%;
background-color: #fcd2d1;
}
20%
{
left: 25%;
background-color: #fcfad1;
}
30%
{
left: 30%;
background-color: #d4fcd1;
}
40%
{
left: 25%;
background-color: #d1f6fc;
}
50%
{
left: 30%;
background-color: #dfd1fc;
}
60%
{
left: 25%;
background-color: #d1eefc;
}
70%
{
left: 30%;
background-color: #eed1fc;
}
80%
{
left: 25%;
background-color: #f1d1fc;
}
90%
{
left: 30%;
background-color: #fcdcd1;
}
100%
{
left: 25%;
background-color: white;
}
}
@keyframes right-ball
{
0%
{
left: 72.25%;;
background-color: white;
}
10%
{
left: 67.25%;;
background-color: #fcd2d1;
}
20%
{
left: 72.25%;;
background-color: #fcfad1;
}
30%
{
left: 67.25%;;
background-color: #d4fcd1;
}
40%
{
left: 72.25%;;
background-color: #d1f6fc;
}
50%
{
left: 67.25%;;
background-color: #dfd1fc;
}
60%
{
left: 72.25%;;
background-color: #d1eefc;
}
70%
{
left: 67.25%;;
background-color: #eed1fc;
}
80%
{
left: 72.25%;;
background-color: #f1d1fc;
}
90%
{
left: 67.25%;;
background-color: #fcdcd1;
}
100%
{
left: 72.25%;;
background-color: white;
}
}**/
@media(prefers-color-scheme:dark){body{background-color:rgb(23,38,38);}}
@keyframes border-color
{
0%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: white;
border-left-color: white;
}
10%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcd2d1;
border-left-color: #fcd2d1;
}
20%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcfad1;
border-left-color: #fcfad1;
}
30%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d4fcd1;
border-left-color: #d4fcd1;
}
40%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1f6fc;
border-left-color: #d1f6fc;
}
50%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #dfd1fc;
border-left-color: #dfd1fc;
}
60%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1eefc;
border-left-color: #d1eefc;
}
70%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #eed1fc ;
border-left-color: #eed1fc;
}
80%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #f1d1fc;
border-left-color: #f1d1fc;
}
90%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcdcd1;
border-left-color: #fcdcd1;
}
100%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: white;
border-left-color: white;
}
}
@keyframes color
{
0%
{
color: white;
}
10%
{
color: #fcd2d1; /*light pink*/
}
20%
{
color: #fcfad1;
}
30%
{
color: #d4fcd1;
}
40%
{
color: #d1f6fc;
}
50%
{
color: #dfd1fc;
}
60%
{
color: #d1eefc;
}
70%
{
color: #eed1fc;
}
80%
{
color: #f1d1fc;
}
90%
{
color: #fcdcd1;
}
100%
{
color: white;
}
}
@keyframes hover
{
0%
{
color: #f45a5a;
font-size: 1rem;
}
25%
{
color: #84E0D5;
}
50%
{
color: #f4a75a;
font-size: 1.2rem;
}
75%
{
color: #b0e084;
}
100%
{
color: #FCB283;
font-size: 1rem;
}
}
@keyframes right-arrow
{
0%
{
transform: translateX(0%);
}
10%
{
transform: translateX(15%);
}
20%
{
transform: translateX(0%);
}
30%
{
transform: translateX(15%);
}
40%
{
transform: translateX(0%);
}
50%
{
transform: translateX(15%);
}
60%
{
transform: translateX(0%);
}
70%
{
transform: translateX(15%);
}
80%
{
transform: translateX(0%);
}
90%
{
transform: translateX(15%);
}
100%
{
transform: translateX(0%);
}
}
@keyframes left-arrow
{
0%
{
transform: translateX(0%);
}
10%
{
transform: translateX(-15%);
}
20%
{
transform: translateX(0%);
}
30%
{
transform: translateX(-15%);
}
40%
{
transform: translateX(0%);
}
50%
{
transform: translateX(-15%);
}
60%
{
transform: translateX(0%);
}
70%
{
transform: translateX(-15%);
}
80%
{
transform: translateX(0%);
}
90%
{
transform: translateX(-15%);
}
100%
{
transform: translateX(0%);
}
}
html, body
{
line-height: 15pt;
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
body
{
padding: 0px;
margin: 0px;
height: 100vh;
width: 100vw;
background-image: url("bg.png");
background-size: 100% 100%;
overflow: hidden;
scrollbar-width: none;
}
h1
{
color: white;
font-family: monospace;
font-size: 1.4rem;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
a, section
{
display: inline-block;
height: rem;
text-decoration: none;
text-align: center;
color: white;
font-family: monospace;
font-size: .8rem;
scrollbar-width: none;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
a:hover
{
animation-name: hover;
animation-duration: 1s;
animation-iteration-count: infinite;
}
hr
{
color: white;
border: .5px solid;
border-radius: 25px;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
audio
{
display: inline;
position: absolute;
right: 0%;
bottom: 0%;
width: 1.25rem;
}
#line-top
{
margin-top: 1rem;
margin-bottom: -.2rem;
}
#line-bottom
{
margin-top: -.2rem;
margin-bottom: 1rem;
}
#right-arrow
{
display: inline-block;
font-family: monospace;
font-size: 1.4rem;
position: relative;
margin-top: 0;
margin-bottom: 0;
animation: right-arrow 10s infinite, color 20s infinite;
}
#left-arrow
{
display: inline-block;
font-family: monospace;
font-size: 1.4rem;
position: relative;
margin-top:0;
margin-bottom: 0;
animation: left-arrow 10s infinite, color 20s infinite;
}
#black-box
{
width: 20rem;
height: 100%;
background-color: rgba(0, 0, 0, .6);
border-right-width: 4px;
border-left-width: 4px;
padding-top: 0%;
margin-left: 10rem;
text-align: center;
overflow: scroll;
scrollbar-width: none;
animation-name: border-color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
html::-webkit-scrollbar
{
display: none;
}
}