Improve dark mode colors and pictures + improve home page on mobile

website/docusaurus.config.ts

@@ -65,10 +65,11 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'The S2 Standard',
+      title: 'S2 Docs',
       logo: {
         alt: 'S2 Standard',
         src: 'img/Logo-S2-no-text.svg',
+        srcDark: 'img/s2-logo-dark.svg'
       },
       items: [
         {

website/src/css/custom.css

@@ -1,12 +1,12 @@
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #123EB7;
-  --ifm-color-primary-dark: #002098;
-  --ifm-color-primary-darker: #002098;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #4778FF;
-  --ifm-color-primary-lighter: #7286dd;
-  --ifm-color-primary-lightest: #e8eaf9;
+  --ifm-color-primary: #123eb7;
+  --ifm-color-primary-dark: #1038a5;
+  --ifm-color-primary-darker: #0f359c;
+  --ifm-color-primary-darkest: #0d2b80;
+  --ifm-color-primary-light: #1444c9;
+  --ifm-color-primary-lighter: #1547d2;
+  --ifm-color-primary-lightest: #1d53e9;
   --ifm-color-success: #2EA339;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
@@ -18,13 +18,13 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #889EDB;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #8ac5ff;
+  --ifm-color-primary-dark: #63b2ff;
+  --ifm-color-primary-darker: #4fa8ff;
+  --ifm-color-primary-darkest: #148bff;
+  --ifm-color-primary-light: #b1d8ff;
+  --ifm-color-primary-lighter: #c5e2ff;
+  --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -38,7 +38,7 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   h2 {
-    font-size: 16pt;
+    font-size: 32pt;
   }
 }
 

website/src/pages/index.module.css

@@ -22,8 +22,10 @@
   justify-content: center;
 } */
 
-.actionButton{
-  min-width: 280px;
+@media screen and (max-width: 996px){
+  .actionButton {
+    min-width: 280px;
+  }
 }
 
 .flexContainer{
@@ -35,3 +37,43 @@
 .systemImg {
   max-width: 40%;
 }
+
+/* Title styles for homepage hero - responsive */
+.title {
+  font-size: 3rem;
+  line-height: 1.05;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+}
+
+@media screen and (max-width: 996px) {
+  .title {
+    font-size: 2.4rem;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .title {
+    font-size: 1.8rem;
+    line-height: 1.1;
+  }
+}
+
+/* Subtitle styles for homepage hero - responsive */
+.subtitle {
+  font-size: 1.25rem;
+  line-height: 1.4;
+  margin: 0 0 1.25rem 0;
+}
+
+@media screen and (max-width: 996px) {
+  .subtitle {
+    font-size: 1.05rem;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .subtitle {
+    font-size: 0.95rem;
+  }
+}

website/src/pages/index.tsx

@@ -4,6 +4,8 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './index.module.css';
 
@@ -14,17 +16,23 @@ function HomepageHeader() {
       <div className="container">
         <div className="row">
           <div className="col col--6">
-            <Heading as="h1" className="hero__title">
+            <Heading as="h1" className={styles.title}>
               {siteConfig.title}
             </Heading>
-            <p className="hero__subtitle padding-bottom--lg">{siteConfig.tagline}</p>
+            <p className="padding-bottom--lg">{siteConfig.tagline}</p>
             <div className={styles.flexContainer}>
-                <Link to="/docs/welcome" className={clsx("button button--primary button--lg shadow--md", styles.actionButton)}>Read the documentation</Link>
-                <Link to="/model-reference/reading-this-documentation" className={clsx("button button--outline button--primary button--lg", styles.actionButton)}>Data model reference</Link>
+                <Link to="/docs/welcome" className={clsx("button button--primary shadow--md", styles.actionButton)}>Read the documentation</Link>
+                <Link to="/model-reference/reading-this-documentation" className={clsx("button button--outline button--primary ", styles.actionButton)}>Data model reference</Link>
             </div>
           </div>
         <div className="col col--6">
-          <img src='img/CEM-system-1536x864.png' alt='S2-system'></img>
+          <ThemedImage
+            alt="My image"
+            sources={{
+              light: useBaseUrl('/img/CEM-system-1536x864.png'),
+              dark: useBaseUrl('/img/cem-home-dark.png'),
+            }}
+          />
         </div>
         </div>
       </div>