main + color fix

wix · Oct 26, 2023 · f1b5e38 · f1b5e38
1 parent 109fb51
commit f1b5e38
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 42 deletions.
diff --git a/website/src/components/Homepage/Features/HomepageFeatures.js b/website/src/components/Homepage/Features/HomepageFeatures.js
@@ -9,7 +9,7 @@ const HomepageFeatures = () => {
       <div className="container">
         <div className="row">
           <div className="col">
-            <h1 className={styles.benefitsHeader}>Detox benefits</h1>
+            <h1 className={styles.benefitsHeader}>Our benefits</h1>
           </div>
         </div>
         <div className="row">

diff --git a/website/src/components/Homepage/Features/HomepageFeatures.module.scss b/website/src/components/Homepage/Features/HomepageFeatures.module.scss
@@ -1,15 +1,9 @@
+@import '@site/src/css/fonts';
+
 .benefitsHeader {
-  font-family: 'Nunito Sans', sans-serif;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 58px;
-  line-height: 70px;
-  color: #131419;
-  margin-top: 125px;
-  margin-bottom: 125px;
+  @include h2;
+  color: var(--ifm-heading-color);
+  margin-top: 135px;
+  margin-bottom: 105px;
   margin-left: -5px;
-}
-
-[data-theme='dark'] .benefitsHeader {
-  color: #ffffff;
-}
+}
diff --git a/website/src/components/Homepage/Header/HomepageHeader.module.scss b/website/src/components/Homepage/Header/HomepageHeader.module.scss
@@ -1,6 +1,10 @@
 @import '@site/src/css/fonts';
 
+
+
 .heroBanner {
+  --ifm-heading-color: #fff;
+
   width: 100%;
   height: calc(366px + 22vw);
   padding: 54px 10px;
@@ -50,7 +54,6 @@
 
 .tagline {
   @include t1;
-
   max-width: 450px;
   min-height: 60px;
   margin-top: -30px;
@@ -77,4 +80,4 @@
   padding: 12px 20px;
   border: 0;
   border-radius: 10px;
-}
+}
diff --git a/website/src/components/Homepage/SubHeader/HomepageSubHeader.js b/website/src/components/Homepage/SubHeader/HomepageSubHeader.js
@@ -3,27 +3,29 @@ import styles from './HomepageSubHeader.module.scss';
 
 const HomepageSubHeader = () => {
   return (
-    <div className={styles.subHeader}>
-      <div className={styles.callToAction}>
-        <span>
-          Follow us on <strong>social networks:</strong>
-        </span>
-      </div>
-      <div className={styles.socialNetworks}>
-        <a className={styles.discordButton} href="https://discord.gg/CkD5QKheF5" target="_blank"></a>
-        <a className={styles.twitterButton} href="https://x.com/detoxe2e?s=20" target="_blank">
-          <span className={styles.twitterLogo}></span>
-          <span className={styles.twitterFollowText}>Follow </span>
-          <span className={styles.twitterFollowId}>@detoxe2e</span>
-        </a>
-        <a className={styles.twitterCounter} href="https://x.com/detoxe2e?s=20" target="_blank">
-          <span>486</span>
-          <span>&nbsp;followers</span>
-        </a>
-        <a className={styles.githubButton} href="https://github.com/wix/detox" target="_blank"></a>
-        <a className={styles.githubCounter} href="https://github.com/wix/detox/stargazers" target="_blank">
-          <span>10,598</span>
-        </a>
+    <div className={styles.subHeaderWrapper}>
+      <div className={styles.subHeader}>
+        <div className={styles.callToAction}>
+          <span>
+            Follow us on <strong>social networks:</strong>
+          </span>
+        </div>
+        <div className={styles.socialNetworks}>
+          <a className={styles.discordButton} href="https://discord.gg/CkD5QKheF5" target="_blank"></a>
+          <a className={styles.twitterButton} href="https://x.com/detoxe2e?s=20" target="_blank">
+            <span className={styles.twitterLogo}></span>
+            <span className={styles.twitterFollowText}>Follow </span>
+            <span className={styles.twitterFollowId}>@detoxe2e</span>
+          </a>
+          <a className={styles.twitterCounter} href="https://x.com/detoxe2e?s=20" target="_blank">
+            <span>486</span>
+            <span>&nbsp;followers</span>
+          </a>
+          <a className={styles.githubButton} href="https://github.com/wix/detox" target="_blank"></a>
+          <a className={styles.githubCounter} href="https://github.com/wix/detox/stargazers" target="_blank">
+            <span>10,598</span>
+          </a>
+        </div>
       </div>
     </div>
   );

diff --git a/website/src/components/Homepage/SubHeader/HomepageSubHeader.module.scss b/website/src/components/Homepage/SubHeader/HomepageSubHeader.module.scss
@@ -1,3 +1,8 @@
+.subHeaderWrapper {
+  background-color: #171b20;
+  width: 100%;
+}
+
 .subHeader {
   background-color: #171b20;
   color: var(--primary-dark-a-0, #FFF);
@@ -6,11 +11,13 @@
   font-weight: 300;
   font-size: 24px;
   width: 100%;
+  max-width: 1600px;
   min-height: 85px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   padding: 0 var(--ifm-spacing-horizontal);
+  margin: 0 auto;
 }
 
 .callToAction {
@@ -22,12 +29,12 @@
 
   @media only screen and (max-width: 600px) {
     font-size: 18px;
-    line-height: 24px;
+    line-height: 25px;
   }
 
   @media only screen and (max-width: 480px) {
     max-width: 140px;
-    margin-top: 20px;
+    margin-top: 16px;
     align-items: normal;
   }
 }
@@ -200,4 +207,4 @@
   .twitterFollowText {
     display: none;
   }
-}
+}
diff --git a/website/src/css/_root.scss b/website/src/css/_root.scss
@@ -28,21 +28,22 @@
 
     --ifm-code-font-size: 95%;
 
-    --ifm-heading-color: #fff;
+
     --ifm-button-background-color: #fff;
     --ifm-color-gray-900: #12161B;
   }
 
   &[data-theme='light'] {
     @include define-detox-light-colors();
     --docusaurus-highlighted-code-line-bg: #d9e5f6;
+    --ifm-heading-color: #131419;
   }
 
   &[data-theme='dark'] {
     @include define-detox-dark-colors();
     --docusaurus-highlighted-code-line-bg: #414458;
     --ifm-background-color: var(--detox-color-a1);
     --ifm-footer-background-color: var(--detox-color-a1);
-
+    --ifm-heading-color: #fff;
   }
 }