diff --git a/styles.css b/styles.css index e185d9e..43db047 100644 --- a/styles.css +++ b/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;