Tweak styles

Author: soareschen

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,34 @@
 .features {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  padding: 2rem 0;
+  padding: 4rem 0;
   width: 100%;
 }
 
+.featuresTitle {
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+}
+
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 180px;
+  width: 180px;
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 996px) {
+  .features {
+    padding: 2rem 0;
+  }
+
+  .featuresTitle {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .featureSvg {
+    height: 150px;
+    width: 150px;
+  }
 }

src/pages/index.module.css

@@ -3,21 +3,131 @@
  * and scoped locally.
  */
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
+.hero {
+  background-color: var(--ifm-color-primary-dark);
+  padding: 4rem 2rem;
+}
+
+.heroInner {
+  margin: 0 auto;
+  max-width: 1100px;
+  padding: 0 0.5rem;
+}
+
+.heroProjectTagline {
+  color: #fff;
+  font-size: 3rem;
+  margin: 0;
+}
+
+.heroLogo {
+  display: block;
+  margin: 0 auto 1.5rem;
+  border-radius: 50%;
+  float: right;
+}
+
+.heroTitleTextHtml {
+  display: block;
+  margin-top: 0.5rem;
+  line-height: 1.2;
+}
+
+.heroTitleTextHtml b {
+  color: var(--ifm-color-primary-light);
+}
+
+.indexCtas {
+  --ifm-button-size-multiplier: 1.2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.indexCtasGitHubButtonWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.indexCtasGitHubButton {
+  border: 0;
   overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.section {
+  padding: 4rem 2rem;
+}
+
+.sectionAlt {
+  background-color: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='dark'] .sectionAlt {
+  background-color: var(--ifm-color-emphasis-200);
+}
+
+.codeExample {
+  background-color: var(--ifm-code-background);
+  border-radius: var(--ifm-code-border-radius);
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.codeExample pre {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.problemCard {
+  padding: 1.5rem;
+  border-radius: 8px;
+  height: 100%;
+  background-color: var(--ifm-card-background-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.problemCard h3 {
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
 }
 
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 996px) {
+  .hero {
+    padding: 2rem 1rem;
+  }
+
+  .heroProjectTagline {
+    font-size: 2rem;
+  }
+
+  .heroLogo {
+    width: 150px;
+    height: 150px;
+  }
+
+  .section {
+    padding: 2rem 1rem;
+  }
+
+  .indexCtas {
+    flex-direction: column;
+  }
+
+  .indexCtasGitHubButtonWrapper {
+    width: 100%;
+    justify-content: center;
+  }
 }

src/pages/index.tsx

@@ -6,6 +6,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
+import CodeBlock from '@theme/CodeBlock';
 
 import styles from './index.module.css';
 
@@ -17,7 +18,7 @@ function HeroBanner() {
           <img
             alt="Context-Generic Programming"
             className={styles.heroLogo}
-            src={useBaseUrl('/img/docusaurus.png')}
+            src={useBaseUrl('/img/cgp-logo.svg')}
             width="200"
             height="200"
           />
@@ -69,7 +70,7 @@ function CodeExampleSection() {
           </div>
           <div className="col col--6">
             <div className={styles.codeExample}>
-              <pre>
+              <CodeBlock language="rust">
 {`#[cgp_component(HashProvider)]
 pub trait Hash { ... }
 
@@ -84,7 +85,7 @@ delegate_components! {
         HashProviderComponent: HashWithDisplay,
     }
 }`}
-              </pre>
+              </CodeBlock>
             </div>
           </div>
         </div>