From 64d4de010c73bc8e62c095234fc1aa3cdc7ea65e Mon Sep 17 00:00:00 2001
From: Stone-Red-Code <56473591+Stone-Red-Code@users.noreply.github.com>
Date: Wed, 5 May 2021 21:52:41 +0200
Subject: [PATCH] Added some nice animations

---
 nav.html  |  3 ++-
 style.css | 49 +++++++++++++++++++++++++++++++++----------------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/nav.html b/nav.html
index 4956544..df36e78 100644
--- a/nav.html
+++ b/nav.html
@@ -3,7 +3,8 @@
     <a class="navbar-brand" href="http://github.com/Stone-Red-Code" aria-label="GitHub Link"><img class="rounded"
             src="https://github.com/Stone-Red-Code.png" height="45" alt="Profile picture"></a>
 
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-label="Menu Button">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
+        aria-label="Menu Button">
         <span class="navbar-toggler-icon"></span>
     </button>
 
diff --git a/style.css b/style.css
index 2eb1dc2..1a96280 100644
--- a/style.css
+++ b/style.css
@@ -47,7 +47,17 @@ footer {
     top: 1.5rem;
     transform: translate(-50%, 0%);
     width: fit-content;
-  }
+}
+
+.jumbotron {
+    animation-name: fadeGray;
+    background: #dadde0;
+    transition: background-color 0.5s ease-out 100ms;
+}
+
+.jumbotron:hover {
+    background-color: #ffffff;
+}
 
 #quotes {
     font-weight: normal;
@@ -62,9 +72,8 @@ footer {
     visibility: hidden;
 }
 
-.fade-in
-{
-    visibility:visible !important;
+.fade-in {
+    visibility: visible !important;
     animation: fadeIn;
     animation-duration: 1s;
 }
@@ -98,7 +107,6 @@ h3 {
     color: black;
 }
 
-
 a:link {
     color: gray;
     text-decoration: underline;
@@ -113,7 +121,7 @@ a:visited {
 /* mouse over link */
 
 a:hover {
-    color: rgb(0, 0, 0);
+    color: black;
 }
 
 /* selected link */
@@ -125,14 +133,22 @@ a:active {
 .nav-link {
     text-decoration: var(--fg-theme);
     text-decoration: none!important;
+    transition: background-color 0.5s ease-out 100ms
+}
+
+.nav-link:hover {
+    background-color: rgb(155, 155, 155);
+}
+
+.dropdown-menu {
+    background-color: var(--fg-theme);
 }
 
 .toolIcon img {
     width: 100;
 }
 
-.dropdown-item:active
-{
+.dropdown-item:active {
     background-color: lightgray;
 }
 
@@ -149,15 +165,13 @@ a:active {
     .header-text {
         margin-top: 1.1rem;
     }
-    
     #quotes {
         display: none;
     }
 }
 
-@media screen and (max-width: 580px)
-{
-    .dropdown-menu{
+@media screen and (max-width: 580px) {
+    .dropdown-menu {
         background-color: var(--fg-theme)!important;
         border: none;
     }
@@ -172,8 +186,11 @@ a:active {
     }
 }
 
-@keyframes fadeIn
-{
-    from{opacity: 0%;}
-    to{opacity: 100%;}
+@keyframes fadeIn {
+    from {
+        opacity: 0%;
+    }
+    to {
+        opacity: 100%;
+    }
 }
\ No newline at end of file