add hover classes to links and buttons

Signed-off-by: Jess Chitas <[email protected]>

Author: jessicachitas

src/App.jsx

@@ -188,10 +188,10 @@ function App() {
       <div className="footer orange-background">
         <footer>
           <p>
-            <a href="https://github.com/containers/ramalama">Github</a> |{" "}
-            <a href="https://matrix.to/#/#ramalama:fedoraproject.org">Matrix</a>{" "}
+            <a className="footer-link" href="https://github.com/containers/ramalama">Github</a> |{" "}
+            <a className="footer-link" href="https://matrix.to/#/#ramalama:fedoraproject.org">Matrix</a>{" "}
             |{" "}
-            <a href="https://github.com/containers/ramalama/blob/main/README.md">
+            <a className="footer-link" href="https://github.com/containers/ramalama/blob/main/README.md">
               Docs
             </a>
           </p>

src/css/index.css

@@ -51,7 +51,7 @@ h1 {
 /* ----------------------------- Navbar Section ---------------------------- */
 
 .logo-text {
-  width: 20%;
+  width: 15%;
   margin: 1.25rem 2rem;
 
   @media screen and (max-width: 1024px) {
@@ -109,6 +109,10 @@ h1 {
   align-items: center;
 }
 
+.nav-links a:hover {
+  color:#cf3c23
+}
+
 .github-stars-badge {
   height: 28px;
   @media screen and (max-width: 768px) {
@@ -204,6 +208,49 @@ h1 {
   }
 }
 
+button:hover {
+  background-color: #f7f7f7;
+}
+
+button {
+  align-items: center;
+  border-radius: 15px;
+  border: 1px solid transparent;
+  margin: 12.5px 0;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: white;
+  color: black;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:not(.install-button, .copy-button) {
+  display: flex;
+  align-items: center;
+  width: 70%;
+  @media screen and (max-width: 500px) {
+    padding: 0.3rem 0.75rem;
+    font-size: 0.7rem;
+    width: 100%;
+  }
+}
+
+button img {
+  padding-left: 5%;
+}
+
+button p {
+  padding-left: 10%;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
 /* ----------------------------- Install Section ---------------------------- */
 .copy-button {
   align-content: center;
@@ -401,46 +448,11 @@ h1 {
 
 /* ------------------------------ Other Styles ------------------------------ */
 
-button {
-  align-items: center;
-  border-radius: 15px;
-  border: 1px solid transparent;
-  margin: 12.5px 0;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: white;
-  color: black;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:not(.install-button, .copy-button) {
-  display: flex;
-  align-items: center;
-  width: 70%;
-  @media screen and (max-width: 500px) {
-    padding: 0.3rem 0.75rem;
-    font-size: 0.7rem;
-    width: 100%;
-  }
-}
-
-button img {
-  padding-left: 5%;
-}
-
-button p {
-  padding-left: 10%;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-}
-
 footer {
   padding: 25px;
   text-align: center;
 }
+
+.footer-link:hover {
+  text-decoration: underline;
+}