Update CSS classes (#170)

CIROH-UA · Jul 2, 2024 · 243c6f9 · 243c6f9
2 parents aa9b188 + 6f1979a
commit 243c6f9
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 86 deletions.
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
@@ -322,7 +322,7 @@ const Card = ({ title, image, description, link }) => (
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
+    <section className={styles.homepageContainer}>
       <div className="container" >
         <div className="row">
           <Card
@@ -349,16 +349,16 @@ export default function HomepageFeatures() {
       </div>
       <div className={clsx('hero hero--primary', styles.heroBanner)}>
           <div className="container">
-            <div className={styles.content}>
+            <div className={styles.flexStart}>
 
               <div className="hero-text" >
                 <h1 className={styles.h1}>CONTRIBUTE</h1>
                 <br />
                 <p className={styles.heroText}>
                 We would like CIROH Consortium members to contribute to CIROH DocuHub. Please contribute by adding product/project documentation, tutorials, training data, or conference presentations. The CIROH DocuHub repository provides a collaborative platform for sharing project's technical documentation. <strong>Learn more about how you can contribute and access the CIROH DocuHub repository here:</strong></p>
                 <br />
-                <div className={styles.content}>
-                <a className={`button button--info ${styles.col4}`} href="/Contribute" style={{ textDecoration: 'none',marginRight: '10px'}}>
+                <div className={styles.flexStart}>
+                <a className={`button button--secondary ${styles.col4}`} href="/Contribute" style={{ textDecoration: 'none',marginRight: '10px'}}>
                   How to Contribute?
                 </a>
                 <a className={`button button--info ${styles.col4}`} href="https://github.com/CIROH-UA/ciroh-ua_website" style={{ textDecoration: 'none'}}>
@@ -371,7 +371,7 @@ export default function HomepageFeatures() {
           </div>
         </div>
       <div className="container" style={{width:"100%"}}>
-        <div className={styles.bgcontainer}>
+        <div className={styles.logoBackground}>
         <div className="container-fluid">
           <div className="row">
             <div className="col col--12">
@@ -621,4 +621,4 @@ export default function HomepageFeatures() {
       </div>
     </section>
   );
-}
+}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -1,100 +1,83 @@
-.features {
+.buttons {
+  display: flex;
   align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  justify-content: center;
 }
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
+.col1 {
+  width: 25%;
 }
-
-.imagecontainer{
-  display:block;
-  margin:1.3rem auto;
-  height: auto;
-
+.col2 {
+  width: 50%;
 }
-.sponserimage
-{
-  display:inline-block !important;
-  margin: 1.1rem auto;
-  /* height: auto; */
+.col3 {
+  width: 30%;
 }
-.heading{
-  font-size: calc(1.4rem + .6vw);
-  font-weight:bolder;
+.col4 {
+  width: 40%;
+  margin-bottom: calc(0.4rem + 1.5vw);
+}
+.flexStart {
+  display: flex;
+  justify-content: flex-start;
+}
+.heading {
+  font-size: calc(1.4rem + 0.6vw);
+  font-weight: bolder;
   color: #2c3e50;
   line-height: 1.2;
   padding-top: 4rem;
   padding-bottom: 1.2rem;
   text-align: center;
 }
-
-
-
-[data-theme='dark']  .bgcontainer{
-  background-color: #A9A9A9;
-  padding: 0 0;
-  margin-top: 5%;
-  width:100%;
-  border-radius:17px;
-
-}
-/* turn on invert filter for logo container when dark mode is on for docusauras */
-
 .heroBanner {
   padding: 3rem 4rem 3rem 4rem;
   text-align: left;
   overflow: auto;
   margin: 3rem 0rem;
 }
-.content
-{
-  display:flex;
-  justify-content:flex-start;
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.heroimage{
+.heroimage {
   width: 35%;
   margin: auto 0;
   border-radius: 18px;
   margin-left: 1.4rem;
 }
-.row1{
-  display: flex;
-  justify-content: space-between;
+.homepageContainer {
   align-items: center;
+  padding: 2rem 0;
+  width: 100%;
 }
-.col1{
-  width: 25%;
+.imagecontainer {
+  display: block;
+  margin: 1.3rem auto;
+  height: auto;
 }
-.col2{
-  width: 50%;
+
+.row1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.col3{
-  width: 30%;
+.sponserimage {
+  display: inline-block !important;
+  margin: 1.1rem auto;
+  /* height: auto; */
 }
-.col4{
-  width:40%;
-  margin-bottom: calc(0.4rem + 1.5vw);
+[data-theme="dark"] .logoBackground {
+  background-color: #a9a9a9;
+  padding: 0 0;
+  margin-top: 5%;
+  width: 100%;
+  border-radius: 17px;
 }
 
 @media screen and (max-width: 1440px) {
   /* Styles for small devices */
-  
+
   .heroBanner {
     padding: 2rem 4rem 2rem 4rem;
   }
 }
 
-
-
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
@@ -105,44 +88,41 @@
 
   .col1 {
     width: 50%; /* Adjusts width for two logos per row */
-    margin:0 auto;
+    margin: 0 auto;
   }
-  .col2{
-    width:35%;
-    margin:0 auto;
+  .col2 {
+    width: 35%;
+    margin: 0 auto;
   }
 }
 @media screen and (max-width: 940px) {
   /* Styles for small devices */
 
-  .heroimage{
-    width:310px;
-
-
+  .heroimage {
+    width: 310px;
   }
 }
 @media screen and (max-width: 840px) {
   /* Styles for small devices */
 
-  .heroimage{
-    width:0px;
+  .heroimage {
+    width: 0px;
   }
-  .h1{
+  .h1 {
     text-align: center;
   }
-  .content{
+  .flexStart {
     display: block;
   }
 }
-.contribute{
-  background:white;
-  width:100%;
+.contribute {
+  background: white;
+  width: 100%;
 }
 @media screen and (max-width: 840px) {
   /* Styles for small devices */
 
-  .col4{
-    width:100%;
+  .col4 {
+    width: 100%;
   }
-
-}
+}