From c95d9b2893c96b6b2d833b560580ded8e85e7a0e Mon Sep 17 00:00:00 2001
From: Scarlett <kadansk8@gmail.com>
Date: Tue, 29 Aug 2023 10:48:59 -0500
Subject: [PATCH] footer is footing
---
src/assets/stylesheets/footer.scss | 132 ++++++++++++++---------------
src/components/Footer.js | 50 +++++------
2 files changed, 89 insertions(+), 93 deletions(-)
diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss
index 385eaaf..dbaee73 100644
--- a/src/assets/stylesheets/footer.scss
+++ b/src/assets/stylesheets/footer.scss
@@ -9,97 +9,93 @@
}
.footer {
- position: relative;
background-color: #232323;
- bottom: 0px;
width: 100%;
- height: 150px;
- overflow: hidden;
+ height: 100px;
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: 100vw;
- height: 6vh;
- overflow: hidden;
+ width: 80vw;
+ height: 50px;
+ padding: 0px;
+ 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 {
- width: 40px;
- margin-left: 0.8vw;
- margin-right: 0.8vw;
- filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
- brightness(100%) contrast(100%);
- opacity: 20%;
- transition: 0.3s;
+.footer__links_ul_li {
+ padding: 0px;
+ margin: 20px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.footer__links_svg:hover {
- opacity: 50%;
+.footer__links_ul_li_a {
+ 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;
- height: 100px;
+ width: 80vw;
+ height: 30px;
+ display: flex;
justify-content: center;
align-items: center;
+ margin-top: 10px;
}
-.footer__toes_logo {
- color: rgb(197, 197, 197);
- text-decoration: none;
- font-size: 50px;
- font-family: "itrFont";
- transition: 0.3s;
+.footer__toes__links {
+ display: flex;
+}
+
+.footer__toes__links_link {
text-align: center;
- margin-left: 30px;
- margin-right: 30px;
- text-align: center;
- padding-left: 5px;
-}
-
-.footer__toes_logo:hover {
- 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;
- }
-}
+ width: 100px;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ height: 30px;
+ padding: 0px;
+ margin: 0px;
+}
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 673e3a0..d028b3d 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -11,73 +11,73 @@ export default class Footer extends Component {
return (
<div className="footer">
<div className="footer__links">
- <ul>
- <li>
+ <ul className="footer__links_ul">
+ <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">
- <li>
- <a href="http://localhost:3000/about">About</a>
+ <ul className="footer__toes__links">
+ <li className="footer__toes__links_link">
+ <a href="http://localhost:3000/about" className="footer__toes__links_link_a">About</a>
</li>
- <li>
- <a href="http://localhost:3000/contact">Contact</a>
+ <li className="footer__toes__links_link">
+ <a href="http://localhost:3000/contact" className="footer__toes__links_link_a">Contact</a>
</li>
- </ul>
- <a className="footer__toes_logo" href="http://localhost:3000/">
- ITR
- </a>
- <ul className="footer__toes__links_right">
- <li>
- <a href="http://localhost:3000/projects">Projects</a>
+ <li className="footer__toes__links_link">
+ <a href="http://localhost:3000/projects" className="footer__toes__links_link_a">Projects</a>
</li>
- <li>
- <a href="http://localhost:3000/gallery">Gallery</a>
+ <li className="footer__toes__links_link">
+ <a href="http://localhost:3000/gallery" className="footer__toes__links_link_a">Gallery</a>
</li>
</ul>
</div>