footer is footing

src/assets/stylesheets/footer.scss

@@ -9,97 +9,93 @@
 }
 
 .footer {
-  position: relative;
   background-color: #232323;
-  bottom: 0px;
   width: 100%;
-  height: 150px;
+  height: 100px;
-  overflow: hidden;
   border-top: 1px solid rgb(46, 46, 46);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding-top: 15px;
+  margin: 0px;
+  padding: 0px;
 }
 
 .footer__links {
-  margin-right: 0px;
+  width: 80vw;
-  width: 100vw;
+  height: 50px;
-  height: 6vh;
+  padding: 0px;
-  overflow: hidden;
+  margin: 0px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+}
+
+.footer__links_ul {
+  margin: 0px;
+  padding: 0px;
+  width: 80vw;
+  height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.footer__links_svg {
+.footer__links_ul_li {
-  width: 40px;
+  padding: 0px;
-  margin-left: 0.8vw;
+  margin: 20px;
-  margin-right: 0.8vw;
+  height: 50px;
-  filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
+  display: flex;
-    brightness(100%) contrast(100%);
+  justify-content: center;
-  opacity: 20%;
+  align-items: center;
-  transition: 0.3s;
 }
 
-.footer__links_svg:hover {
+.footer__links_ul_li_a {
-  opacity: 50%;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer__links_ul_li_svg {
+  width: 40px;
+  height: 40px;
+  filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
+    brightness(100%) contrast(100%);
+  opacity: 30%;
+  transition: 0.3s;
+  padding: 0px;
+  margin: 0px;
+}
+
+.footer__links_ul_li_svg:hover {
+  opacity: 70%;
 }
 
 .footer__toes {
   display: flex;
-  width: 100vw;
+  width: 80vw;
-  height: 100px;
+  height: 30px;
+  display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 10px;
 }
 
-.footer__toes_logo {
+.footer__toes__links {
-  color: rgb(197, 197, 197);
+    display: flex;
-  text-decoration: none;
+}
-  font-size: 50px;
+
-  font-family: "itrFont";
+.footer__toes__links_link {
-  transition: 0.3s;
   text-align: center;
-  margin-left: 30px;
+  width: 100px;
-  margin-right: 30px;
+  justify-content: center;
-  text-align: center;
+  align-items: center;
-  padding-left: 5px;
+  display: flex;
-}
+  height: 30px;
-
+  padding: 0px;
-.footer__toes_logo:hover {
+  margin: 0px;
-  color: white;
-}
-
-.footer__toes__links_left,
-.footer__toes__links_right {
-  margin-bottom: 9px;
-  margin-bottom: 9px;
-}
-
-@media screen and (max-width: 650px) {
-  // Phones
-  .footer__links_svg {
-    width: 10vw;
-    background-color: transparent;
-    margin-left: -4vw;
-    margin-right: -4vw;
-  }
-
-  .footer__toes {
-    zoom: 80%;
-  }
-
-  .footer__toes_logo {
-    font-size: 40px;
-    font-family: "itrFont";
-    transition: 0.3s;
-    padding-left: 5px;
-  }
-
-  .footer__toes__links_left,
-  .footer__toes__links_right {
-    visibility: hidden;
-  }
 }

src/components/Footer.js

@@ -11,73 +11,73 @@ export default class Footer extends Component {
     return (
       <div className="footer">
         <div className="footer__links">
-          <ul>
+          <ul className="footer__links_ul">
-            <li>
+            <li className="footer__links_ul_li">
               <a
                 href="https://discord.gg/GA6mvMEzSu"
                 target="_blank"
                 rel="noreferrer"
+                className="footer__links_ul_li_a"
               >
-                <DiscordSVG className="footer__links_svg"></DiscordSVG>
+                <DiscordSVG className="footer__links_ul_li_svg"></DiscordSVG>
               </a>
             </li>
-            <li>
+            <li className="footer__links_ul_li">
               <a
                 href="https://twitter.com/ILTech_Robotics"
                 target="_blank"
                 rel="noreferrer"
+                className="footer__links_ul_li_a"
               >
-                <TwitterSVG className="footer__links_svg"></TwitterSVG>
+                <TwitterSVG className="footer__links_ul_li_svg"></TwitterSVG>
               </a>
             </li>
-            <li>
+            <li className="footer__links_ul_li">
               <a
                 href="https://www.facebook.com/IllinoisTechRobotics/"
                 target="_blank"
                 rel="noreferrer"
+                className="footer__links_ul_li_a"
               >
-                <FacebookSVG className="footer__links_svg"></FacebookSVG>
+                <FacebookSVG className="footer__links_ul_li_svg"></FacebookSVG>
               </a>
             </li>
-            <li>
+            <li className="footer__links_ul_li">
               <a
                 href="https://www.instagram.com/illinoistechrobotics/"
                 target="_blank"
                 rel="noreferrer"
+                className="footer__links_ul_li_a"
               >
-                <InstagramSVG className="footer__links_svg"></InstagramSVG>
+                <InstagramSVG className="footer__links_ul_li_svg"></InstagramSVG>
               </a>
             </li>
-            <li>
+            <li className="footer__links_ul_li">
               <a
                 href="https://github.com/illinoistechrobotics"
                 target="_blank"
                 rel="noreferrer"
+                className="footer__links_ul_li_a"
               >
-                <GithubSVG className="footer__links_svg"></GithubSVG>
+                <GithubSVG className="footer__links_ul_li_svg"></GithubSVG>
               </a>
             </li>
           </ul>
         </div>
 
         <div className="footer__toes">
-          <ul className="footer__toes__links_left">
+          <ul className="footer__toes__links">
-            <li>
+            <li className="footer__toes__links_link">
-              <a href="http://localhost:3000/about">About</a>
+              <a href="http://localhost:3000/about" className="footer__toes__links_link_a">About</a>
             </li>
-            <li>
+            <li className="footer__toes__links_link">
-              <a href="http://localhost:3000/contact">Contact</a>
+              <a href="http://localhost:3000/contact" className="footer__toes__links_link_a">Contact</a>
             </li>
-          </ul>
+            <li className="footer__toes__links_link">
-          <a className="footer__toes_logo" href="http://localhost:3000/">
+              <a href="http://localhost:3000/projects" className="footer__toes__links_link_a">Projects</a>
-            ITR
-          </a>
-          <ul className="footer__toes__links_right">
-            <li>
-              <a href="http://localhost:3000/projects">Projects</a>
             </li>
-            <li>
+            <li className="footer__toes__links_link">
-              <a href="http://localhost:3000/gallery">Gallery</a>
+              <a href="http://localhost:3000/gallery" className="footer__toes__links_link_a">Gallery</a>
             </li>
           </ul>
         </div>