refactoring

wilhelm-lenz · Nov 29, 2023 · 5f37743 · 5f37743
1 parent d731748
commit 5f37743
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 323 deletions.
diff --git a/src/App.css b/src/App.css
@@ -73,11 +73,8 @@ a {
   margin-bottom: 2%;
 }
 
-.heading-primary-dark {
-  font-size: 6.4rem;
-  font-family: "Poppins-Bold";
+.light .heading-primary {
   color: #444;
-  margin-bottom: 2%;
 }
 
 .heading-secondary {
@@ -87,11 +84,8 @@ a {
   font-size: 3.6rem;
 }
 
-.heading-secondary-dark {
-  font-family: "Poppins-Bold";
+.light .heading-secondary {
   color: #444;
-  margin-bottom: 3%;
-  font-size: 3.6rem;
 }
 
 .heading-tertiary {
@@ -101,11 +95,8 @@ a {
   margin-bottom: 3%;
 }
 
-.heading-tertiary-dark {
+.light .heading-tertiary {
   color: #444;
-  font-family: "Poppins-Bold";
-  font-size: 3.2rem;
-  margin-bottom: 3%;
 }
 
 .light {
@@ -122,23 +113,15 @@ a {
     text-align: left;
   }
 
-  .heading-primary-dark {
-    font-size: 3rem;
-    text-align: left;
-  }
-
   .heading-secondary {
     color: #cdcdff;
     margin-bottom: 8%;
     font-size: 2.4rem;
     text-align: left;
   }
 
-  .heading-secondary-dark {
+  .light .heading-secondary {
     color: #444;
-    margin-bottom: 8%;
-    font-size: 2.4rem;
-    text-align: left;
   }
 
   .heading-tertiary {
@@ -147,81 +130,36 @@ a {
     text-align: left;
     padding-inline: 5%;
   }
-
-  .heading-tertiary-dark {
-    font-size: 1.8rem;
-    margin-block: 8%;
-    text-align: left;
-    padding-inline: 5%;
-  }
 }
 
 @media (min-width: 768px) and (max-width: 819px) {
   .heading-primary {
     font-size: 4.4rem;
   }
 
-  .heading-primary-dark {
-    font-size: 4.4rem;
-  }
-
   .heading-secondary {
     color: #cdcdff;
     font-size: 3rem;
     margin-bottom: 0;
   }
 
-  .heading-secondary-dark {
+  .light .heading-secondary {
     color: #444;
-    font-size: 3rem;
-    margin-bottom: 0;
   }
 
   .heading-tertiary {
     font-size: 2.8rem;
     margin-block: 6%;
     padding-inline: 5%;
   }
-
-  .heading-tertiary-dark {
-    font-size: 2.8rem;
-    margin-block: 6%;
-    padding-inline: 5%;
-  }
 }
 
 @media (min-width: 1200px) and (max-width: 1439px) {
   .heading-primary {
     font-size: 5.2rem;
   }
 
-  .heading-primary-dark {
-    font-size: 5.2rem;
-  }
-
   .heading-tertiary {
     font-size: 3rem;
   }
-
-  .heading-tertiary-dark {
-    font-size: 3rem;
-  }
 }
-
-/*
-// Small devices (landscape phones, 576px and up)
-@media (max-width: 576px) { ... }
-
-// Medium devices (tablets, 768px and up)
-@media (max-width: 768px) { ... }
-
-// Large devices (desktops, 992px and up)
-@media (max-width: 992px) { ... }
-
-// X-Large devices (large desktops, 1200px and up)
-@media (max-width: 1200px) { ... }
-
-// XX-Large devices (larger desktops, 1400px and up)
-@media (max-width: 1400px) { ... }
-
-*/
diff --git a/src/App.jsx b/src/App.jsx
@@ -11,8 +11,8 @@ function App() {
   return (
     <div className={`'inline-padding' ${darkMode ? "light" : null}`}>
       <Header setDarkMode={setDarkMode} darkMode={darkMode} />
-      <Main darkMode={darkMode} />
-      <Footer darkMode={darkMode} />
+      <Main />
+      <Footer />
     </div>
   );
 }

diff --git a/src/assets/components/button/Button.css b/src/assets/components/button/Button.css
@@ -11,39 +11,35 @@
   transition: all 0.2s ease-out;
 }
 
-.btn-light {
-  font-family: "Poppins-Medium";
-  border: 2px solid #2978b5;
-  color: #2978b5;
+.btn:hover,
+.btn:active,
+.btn:focus {
+  border: 2px solid #90a0d9;
+  color: #23283e;
   font-size: 1.8rem;
   padding: 1.2rem 2rem;
+  background-position: left;
+}
+
+.light .btn {
+  border: 2px solid #2978b5;
+  color: #2978b5;
   background: linear-gradient(to left, transparent 50%, #2978b5 50%);
   background-size: 200% 100%;
   background-position: right bottom;
-  cursor: pointer;
   transition: all 0.2s ease-out;
 }
 
-.btn-light:hover,
-.btn-light:active,
-.btn-light:focus {
+.light .btn:hover,
+.light .btn:active,
+.light .btn:focus {
   border: 2px solid #2978b5;
   color: #fff;
   font-size: 1.8rem;
   padding: 1.2rem 2rem;
   background-position: left;
 }
 
-.btn:hover,
-.btn:active,
-.btn:focus {
-  border: 2px solid #90a0d9;
-  color: #23283e;
-  font-size: 1.8rem;
-  padding: 1.2rem 2rem;
-  background-position: left;
-}
-
 @media (max-width: 567px) {
   .btn {
     margin-left: 5%;

diff --git a/src/assets/components/button/Button.jsx b/src/assets/components/button/Button.jsx
@@ -1,9 +1,7 @@
 import "./Button.css";
 
-const Button = ({ contentText, darkMode }) => {
-  return (
-    <button className={darkMode ? "btn-light" : "btn"}>{contentText}</button>
-  );
+const Button = ({ contentText }) => {
+  return <button className="btn">{contentText}</button>;
 };
 
 export default Button;