fix: improve homepage quotes ui

- set secondary color for homepage sections
Hocdoc · Apr 7, 2022 · 1d33708 · 1d33708
1 parent febcab2
commit 1d33708
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/src/components/HomepageQuotes/HomepageQuotes.js b/src/components/HomepageQuotes/HomepageQuotes.js
@@ -25,7 +25,7 @@ const Quote = ({ text, name }) => {
 	return <div className={clsx("col col--4 quote-col", styles.quote)}>
 		<div className={styles.quoteHighlight} />
 		<FaQuoteRight size={32}/>
-		<div className="text--center padding-horiz--md">
+		<div className={clsx("text--center padding-horiz--md", styles.quoteText)}>
 			<h3>{name}</h3>
 			<p>"{text}"</p>
 		</div>

diff --git a/src/components/HomepageQuotes/HomepageQuotes.module.css b/src/components/HomepageQuotes/HomepageQuotes.module.css
@@ -1,14 +1,22 @@
 .quotesContainer {
     --ifm-hero-text-color: #FFFFFF;
     margin: 40px 0;
-    /*background-color: var(--ifm-hero-background-color);*/
+
     color: var(--ifm-hero-text-color);
 }
 
+.quotesContainer h3 {
+    color: #000000;
+}
+
 html[data-theme='dark'] .quotesContainer {
     --ifm-hero-text-color: #000000;
 }
 
+html[data-theme='dark'] .quotesContainer  h3 {
+    color: #FFFFFF;
+}
+
 .quote {
     --quote-bg-color: rgba(28, 35, 40, 0.5);
     position: relative;
@@ -47,6 +55,7 @@ html[data-theme='dark'] .quotesContainer {
 
 .quotesContainer :global(.row .col.col.col) {
     max-width: 400px;
+    padding-top: 40px;
 }
 
 @media (max-width: 800px) {
@@ -85,15 +94,21 @@ html[data-theme='dark'] .quote {
 .quote p {
     position: relative;
     padding: 0 10%;
-}
-
-.quote h3 {
-    position: relative;
-    margin-top: 40px;
+    flex-grow: 2;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
 }
 
 .quote svg {
     position: absolute;
     left: 14%;
     top: 20%;
 }
+
+.quoteText {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 100%;
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -3,6 +3,13 @@
  * and scoped locally.
  */
 
+:global(
+    html[data-theme='dark'] .hero--primary
+) {
+    --ifm-hero-background-color: #2b3c5e;
+}
+
+
 .heroBanner {
     padding: 4rem 0 6rem;
     text-align: center;