mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-07 08:05:54 -05:00
Update styles.css
This commit is contained in:
Squirrel
GitHub
parent
595623742e
commit
ad36829857
1 changed files with 53 additions and 183 deletions
236
styles.css
236
styles.css
|
|
@ -78,24 +78,12 @@ Common Classes
|
|||
}
|
||||
|
||||
@keyframes nudge {
|
||||
0% {
|
||||
margin-right: 0px;
|
||||
}
|
||||
20% {
|
||||
margin-right: -8px;
|
||||
}
|
||||
40% {
|
||||
margin-right: -2px;
|
||||
}
|
||||
60% {
|
||||
margin-right: -8px;
|
||||
}
|
||||
80% {
|
||||
margin-right: 0px;
|
||||
}
|
||||
100% {
|
||||
margin-right: 0px;
|
||||
}
|
||||
0% { margin-right: 0px; }
|
||||
20% { margin-right: -8px; }
|
||||
40% { margin-right: -2px; }
|
||||
60% { margin-right: -8px; }
|
||||
80% { margin-right: 0px; }
|
||||
100% { margin-right: 0px; }
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
|
|
@ -124,13 +112,9 @@ Common Classes
|
|||
0 0 2.5px #262626;
|
||||
}
|
||||
|
||||
.progress li:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.progress li:hover { transform: scale(1.2); }
|
||||
|
||||
#meetIndicator {
|
||||
background-color: #262626;
|
||||
}
|
||||
#meetIndicator { background-color: #262626; }
|
||||
|
||||
/*==================================================
|
||||
Landing
|
||||
|
|
@ -174,13 +158,8 @@ Landing
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.hi:before {
|
||||
left: -50px;
|
||||
}
|
||||
|
||||
.hi:after {
|
||||
right: -50px;
|
||||
}
|
||||
.hi:before { left: -50px; }
|
||||
.hi:after { right: -50px; }
|
||||
|
||||
.landing:hover .hi:before {
|
||||
left: 50%;
|
||||
|
|
@ -195,15 +174,9 @@ Landing
|
|||
}
|
||||
|
||||
@keyframes hi-opacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* About Me */
|
||||
|
|
@ -228,10 +201,6 @@ Vegetable Dash
|
|||
|
||||
/* General Information */
|
||||
|
||||
.meet-vegetable {
|
||||
|
||||
}
|
||||
|
||||
.about-vegetable {
|
||||
margin: 50px;
|
||||
font-size: 120%;
|
||||
|
|
@ -248,9 +217,7 @@ Vegetable Dash
|
|||
transform: scale(1);
|
||||
}
|
||||
|
||||
.space {
|
||||
width: 10px;
|
||||
}
|
||||
.space { width: 10px; }
|
||||
|
||||
.smokey {
|
||||
margin: 0;
|
||||
|
|
@ -273,61 +240,20 @@ Vegetable Dash
|
|||
filter: blur(0);
|
||||
}
|
||||
|
||||
.smokey li:nth-child(2) {
|
||||
transition-delay: .1s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(3) {
|
||||
transition-delay: .2s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(4) {
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(5) {
|
||||
transition-delay: .4s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(6) {
|
||||
transition-delay: .5s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(7) {
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(8) {
|
||||
transition-delay: .7s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(9) {
|
||||
transition-delay: .8s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(10) {
|
||||
transition-delay: .9s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(11) {
|
||||
transition-delay: 1s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(12) {
|
||||
transition-delay: 1.1s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(13) {
|
||||
transition-delay: 1.2s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(14) {
|
||||
transition-delay: 1.3s;
|
||||
}
|
||||
|
||||
.smokey li:nth-child(15) {
|
||||
transition-delay: 1.4s;
|
||||
}
|
||||
.smokey li:nth-child(2) { transition-delay: .1s; }
|
||||
.smokey li:nth-child(3) { transition-delay: .2s; }
|
||||
.smokey li:nth-child(4) { transition-delay: .3s; }
|
||||
.smokey li:nth-child(5) { transition-delay: .4s; }
|
||||
.smokey li:nth-child(6) { transition-delay: .5s; }
|
||||
.smokey li:nth-child(7) { transition-delay: .6s; }
|
||||
.smokey li:nth-child(8) { transition-delay: .7s; }
|
||||
.smokey li:nth-child(9) { transition-delay: .8s; }
|
||||
.smokey li:nth-child(10) { transition-delay: .9s; }
|
||||
.smokey li:nth-child(11) { transition-delay: 1s; }
|
||||
.smokey li:nth-child(12) { transition-delay: 1.1s; }
|
||||
.smokey li:nth-child(13) { transition-delay: 1.2s; }
|
||||
.smokey li:nth-child(14) { transition-delay: 1.3s; }
|
||||
.smokey li:nth-child(15) { transition-delay: 1.4s; }
|
||||
|
||||
/*==================================================
|
||||
Gold Rush
|
||||
|
|
@ -354,17 +280,11 @@ Gold Rush
|
|||
-webkit-text-fill-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
#gold-rush:hover h1 {
|
||||
animation: show-text 1.2s 3 forwards;
|
||||
}
|
||||
#gold-rush:hover h1 { animation: show-text 1.2s 3 forwards; }
|
||||
|
||||
@keyframes show-text {
|
||||
0% {
|
||||
background-position: -100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 250%;
|
||||
}
|
||||
0% { background-position: -100%; }
|
||||
100% { background-position: 250%; }
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
|
|
@ -374,9 +294,7 @@ Gold Rush
|
|||
transition: 0.8s;
|
||||
}
|
||||
|
||||
#gold-rush:hover .gold-text {
|
||||
animation: bounce-in 3s ease-in forwards;
|
||||
}
|
||||
#gold-rush:hover .gold-text { animation: bounce-in 3s ease-in forwards; }
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
|
|
@ -437,88 +355,49 @@ Coming Soon!
|
|||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: rotate(10deg) scaleY(1.2);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(-10deg) scaleY(1);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(10deg) scaleY(1.2);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(-10deg) scaleY(1);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(10deg) scaleY(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-10deg) scaleY(1);
|
||||
}
|
||||
0% { transform: rotate(10deg) scaleY(1.2); }
|
||||
20% { transform: rotate(-10deg) scaleY(1); }
|
||||
40% { transform: rotate(10deg) scaleY(1.2); }
|
||||
60% { transform: rotate(-10deg) scaleY(1); }
|
||||
80% { transform: rotate(10deg) scaleY(1.2); }
|
||||
100% { transform: rotate(-10deg) scaleY(1); }
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(4) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(6) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(8) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(10) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(12) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.coming:hover li:nth-child(2) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(4) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(6) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(8) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(10) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(12) { animation-delay: 0.2s; }
|
||||
|
||||
/*==================================================
|
||||
Animations
|
||||
==================================================
|
||||
|
||||
@keyframes heavenly-glow {
|
||||
0% {
|
||||
box-shadow: none;
|
||||
}
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 5px 5px 5px whitesmoke,
|
||||
5px -5px 5px whitesmoke,
|
||||
-5px 5px 5px whitesmoke,
|
||||
-5px -5px 5px whitesmoke;
|
||||
}
|
||||
100% {
|
||||
box-shadow: none;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
|
||||
@keyframes darkness-grows {
|
||||
0% {
|
||||
box-shadow: none;
|
||||
}
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 5px 5px 5px #262626,
|
||||
5px -5px 5px #262626,
|
||||
-5px 5px 5px #262626,
|
||||
-5px -5px 5px #262626;
|
||||
}
|
||||
100% {
|
||||
box-shadow: none;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
|
||||
@keyframes rainbow-glow {
|
||||
0% {
|
||||
box-shadow: none;
|
||||
}
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 2px 2px 1px red,
|
||||
4px 4px 1px orange,
|
||||
|
|
@ -548,22 +427,15 @@ Animations
|
|||
-10px -10px 1px lightblue,
|
||||
-12px -12px 1px purple;
|
||||
}
|
||||
100% {
|
||||
box-shadow: none;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Personal
|
||||
==================================================
|
||||
|
||||
.will-not-find-me-at {
|
||||
font-family: Nunito;
|
||||
}
|
||||
|
||||
.find-me {
|
||||
margin: 50px 50px 0 50px;;
|
||||
}
|
||||
.will-not-find-me-at { font-family: Nunito; }
|
||||
.find-me { margin: 50px 50px 0 50px; }
|
||||
|
||||
.will-not-find-me-at {
|
||||
display: flex;
|
||||
|
|
@ -598,9 +470,7 @@ i {
|
|||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.will-not-find-me-at a:hover {
|
||||
background-color: #262626;
|
||||
}
|
||||
.will-not-find-me-at a:hover { background-color: #262626; }
|
||||
|
||||
#linux-rainbow {
|
||||
size: auto;
|
||||
|
|
|
|||
Loading…
Reference in a new issue