wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Animation

Browse Source
This commit is contained in:
James Dinh 2022-06-02 23:19:56 -07:00
parent 45b66a2ef1
commit a92e915ba3
1 changed files with 101 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
css/general.css
View File

@ -682,32 +682,13 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
width: 400px; width: 400px;
min-width: 300px; min-width: 300px;
border-radius: 10px; border-radius: 10px;
background-color: #0d1117; background-color: #181a1d;
background-color: #1e2227;
margin: 10px auto; margin: 10px auto;
padding: 10px 30px; padding: 10px 30px;
box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
text-align: left; text-align: left;
} }
.list-item {
margin: 0 0 30px 30px;
padding: 10px;
position: relative;
}
.list-item::before {
content: "";
position: relative;
margin-right: 10px;
width: 10px;
height: 10px;
background: rgb(255, 255, 255);
border-radius: 999px;
float: left;
border: 3px solid rgb(44, 44, 44);
}
/* Outer Layer with the steps border */ /* Outer Layer with the steps border */
.outer { .outer {
border-left: 2px solid #333; border-left: 2px solid #333;
@ -718,11 +699,16 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
position: relative; position: relative;
margin: 0 0 20px 20px; margin: 0 0 20px 20px;
padding: 10px; padding: 10px;
background: #333; background: rgb(49, 48, 48);
color: gray; color: gray;
border-radius: 8px; border-radius: 8px;
max-width: 400px; max-width: 400px;
} }
.card:hover {
filter: brightness(120%);
transition: 0.5s;
}
#signup-header { #signup-header {
padding-top: 10px; padding-top: 10px;
@ -741,10 +727,11 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: white; background: rgb(56, 105, 56);
border-radius: 50%; border-radius: 50%;
left: -28px; left: -28px;
border: 2px solid rgb(155, 144, 144); cursor: pointer;
border: 2px solid rgb(255, 255, 255);
} }
#rules-description { #rules-description {
@ -1045,6 +1032,18 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
#line-header { #line-header {
width: 200px; width: 200px;
margin: 0 auto 5px; margin: 0 auto 5px;
animation: grow-wide ease 2s;
}
@keyframes grow-wide {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
} }
abbr[title] { abbr[title] {
@ -1121,4 +1120,82 @@ footer li {
footer a { footer a {
color:rgb(108, 176, 231); color:rgb(108, 176, 231);
font-size: 16px; font-size: 16px;
}
@keyframes move {
50% {
padding-left: 8px;
padding-right: 0px;
}
100% {
padding-right: 4px;
}
}
@keyframes slice {
60% {
width: 100%;
left: 4px;
}
100% {
width: 100%;
left: -2px;
padding-left: 0;
}
}
@keyframes check-01 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(45deg);
}
100% {
width: 5px;
top: 8px;
transform: rotate(45deg);
}
}
@keyframes check-02 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(-45deg);
}
100% {
width: 10px;
top: 8px;
transform: rotate(-45deg);
}
}
@keyframes firework {
0% {
opacity: 1;
box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
}
30% {
opacity: 1;
}
100% {
opacity: 0;
box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
}
} }