add responsive logo to nav

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

Author: jessicachitas

.DS_Store

@@ -2,17 +2,27 @@
 /*                           Style Sheet for Nav.jsx                          */
 /* -------------------------------------------------------------------------- */
 
-.logo {
+.logo-text {
   width: 20%;
   margin: 1.25rem 2rem;
 
   @media screen and (max-width: 1024px) {
     width: 30%;
     @media screen and (max-width: 768px) {
-      width: 40%;
-      @media screen and (max-width: 500px) {
-        width: 50%;
-      }
+      display: none;
+    }
+  }
+}
+
+.logo-mascot {
+  display: none;
+  width: 20%;
+  margin: 1.25rem 2rem;
+  
+  @media screen and (max-width: 768px) {
+    display: flex;
+    @media screen and (max-width: 500px) {
+      width: 50%;
     }
   }
 }
@@ -64,4 +74,4 @@
 
 .github-stars-badge {
   height: 28px;
-}
+}

src/.DS_Store

@@ -3,14 +3,16 @@
 /* -------------------------------------------------------------------------- */
 
 import "./Nav.css";
-import ramalamaLogo from "./assets/ramalama-logo-text-only.svg";
+import ramalamaText from "./assets/ramalama-logo-text-only.svg";
+import ramalamaLogo from "./assets/ramalama-logo-llama-only.svg";
 
 const Navbar = () => {
   return (
     <nav className="navbar">
       <div className="navbar-left">
         <a href="">
-          <img className="logo" src={ramalamaLogo} alt="RamaLama Logo"></img>
+          <img className="logo-text" src={ramalamaText} alt="RamaLama Logo"></img>
+          <img className="logo-mascot" src={ramalamaLogo} alt="RamaLama Logo"></img>
         </a>
       </div>
       <div className="navbar-middle"></div>