Merge pull request #27 from Pma913/edit/home

Edit/home

src/components/ExpandedCard/ExpandedCard.css

@@ -73,7 +73,11 @@
   margin-right: 20px;
 }
 
-@media (max-width: 1110px) {
+@media (max-width: 1170px) {
+  .expanded-background {
+    background-color: black;
+  }
+
   .stats-column-con {
     display: flex;
     flex-direction: column;

src/components/Favorites/Favorites.css

@@ -4,7 +4,6 @@
   flex-wrap: wrap;
   justify-content: center;
   align-content: flex-start;
-  /* position: relative; */
 }
 
 .no-ideas {

src/components/Hamburg/Hamburg.css

@@ -0,0 +1,35 @@
+.hamburg {
+  width: 40px;
+}
+
+.ham-menu-box {
+    display: none;
+  }
+
+.reveal {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: -2px;
+  top: 33px;
+  background-color: white;
+  z-index: 1;
+  width: 130px;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  background-color: #4b5d67c8;
+}
+
+@media (max-width: 820px) {
+  .ham-menu-box {
+    display: flex;
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+  }
+
+  .hamburg {
+    width: 2em;
+    cursor: pointer;
+  }
+}

src/components/Hamburg/Hamburg.js

@@ -15,7 +15,7 @@ const Hamburg = () => {
   }
 
   const toggleHidden = () => {
-    hidden === 'hidden' ? setHidden('') : setHidden('hidden');
+    hidden === 'hidden' ? setHidden('reveal') : setHidden('hidden');
   }
 
   return (

src/components/Header/Header.css

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: space-evenly;
   background-color: 		#4b5d67;
+  position: relative;
 }
 
 .logo {
@@ -12,9 +13,9 @@
 
 .logo:hover {
   animation-name: spin;
-  animation-duration: 5000ms;
+  animation-duration: 2000ms;
   animation-iteration-count: infinite;
-  animation-timing-function: linear;
+  animation-timing-function:linear;
 }
 
 @keyframes spin {
@@ -28,7 +29,7 @@
 
 .app-title {
   font-size: xxx-large;
-  transition: text-shadow 0.56s ease-in-out;
+  transition: text-shadow 0.5s ease-in-out;
 }
 
 .app-title:hover {
@@ -49,14 +50,14 @@
 
 .link {
   margin: 5px;
-  font-size: large;
+  font-size: x-large;
   font-weight: 600;
+  transition: all .3s ease-in-out;
 }
 
 .link:hover {
   color: rgb(255, 255, 255);
-  border-bottom: solid 2px rgb(255, 255, 255);
-  border-radius: 2px;
+  border-bottom: solid 3px rgb(255, 255, 255);
 }
 
 .link:active {
@@ -70,12 +71,24 @@
 
 .nav-links {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
 }
 
-@media (min-width: 584px) {
-  .ham-menu-box {
+@media (max-width: 820px) {
+  .nav-links {
     display: none;
+  } 
+
+  .link {
+    margin:10px;
+  }
+
+  .header {
+    justify-content: space-between;
+  }
+
+  .app-title {
+    margin-right: 6px;
   }
 }
 
@@ -85,21 +98,12 @@
   }
 
   .logo {
-    display: none;
+    height: 100px;
+    margin: 5px;
   }
 
   .header {
-    flex-direction: column;
     align-items: center;
-  }
-
-  .hamburg {
-    width: 2em;
-    cursor: pointer;
-  }
-
-  .nav-links {
-    display: none;
-  }  
+  } 
 }   
 

src/components/Home/Home.css

@@ -6,94 +6,20 @@
 .hero-img {
   width: 100%;
   overflow: hidden;
-  height: 39em;
+  height: 125%;
   object-fit: cover;
 }
 
-.home-btn-con {
-  position: absolute;
-  width: 50%;
-  display: flex;
-  justify-content: space-around;
-  bottom: 0;
-  left: 25%;
-  background-color: rgba(255, 255, 255, 0.5);
-  height: 12%;
-  border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
-  align-items: center;
-}
-
-.fact-btn,
-.fav-btn {
-  bottom: 2%;
-  cursor: pointer;
-  border-radius: 27px;
-  width: 15%;
-  height: 5%;
-  background-color: #4b5d67;
-  border: 0;
-  color: black;
-  font-weight: 800;
-  width: 150%;
-  height: 35px;
-}
-
-.fact-btn:hover,
-.fav-btn:hover {
-  background-color: #262a2d;
-  border-bottom: solid black 4px;
-  color: white;
-}
-
-.fact-btn:active,
-.fav-btn:active {
-  background-color: #ffffff;
-  border-bottom: 0px;
-  color: black;
-}
-
-.fact-btn {
-  right: 30%;
-
-}
-
-.fav-btn {
-  left: 30%;
-}
-
-@media (max-width: 847px) {
-  .fact-btn,
-  .fav-btn {
-    width: 115px;
-  }
-} 
-
 @media (max-width: 750px) {
-  .fact-btn,
-  .fav-btn {
-    height: 25px;
-  }
-
-  .fact-btn {
-  right: 5%;
-
-  }
-
-  .fav-btn {
-    left: 5%;
-  }  
-
   .hero-img,
   .hero {
-    height: 27em;
     position: relative;
   }  
 }
 
-@media (max-width: 584px) {
+/* @media (max-width: 584px) {
   .hero-img,
   .hero {
     height: 15em;
   } 
-}
+} */

src/components/Home/Home.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import './Home.css';
-import About from '../About/About'
-import { Link } from 'react-router-dom';
 import kitty from '../../utilities/home-page-kitty.jpg';
 import bigKitty from '../../utilities/full-size-kitty.jpg';
 
@@ -15,13 +13,6 @@ const homeCat = screenWidth > 1000 ? bigKitty : kitty;
     <section className="home">
       <div className="hero">
         <img className="hero-img" src={homeCat} alt="Cat lying on its back"/>
-        <div className="home-btn-con">
-          <Link to="/fact"><button className="fact-btn">Get Cat Facts</button></Link>
-          <Link to="/favorites"><button className="fav-btn">Get Favorites</button></Link>
-        </div>
-      </div>
-      <div>
-        <About />
       </div>
     </section>
   );