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