rebrand first pass

docs/dev-guides-home.md

@@ -3,7 +3,7 @@ title: Dev Guides Home
 slug: /dev-guides-home
 ---
 
-import DevChia from '@site/static/img/home_pages/dev_on_chia.png';
+import DevChia from '@site/static/img/home_pages/chia_dev.png';
 import ChialispIntro from '@site/static/img/home_pages/chialisp_intro.png';
 import SmartCoins from '@site/static/img/home_pages/smart_coins.png';
 import Signatures from '@site/static/img/home_pages/signatures.png';

docusaurus.config.js

@@ -10,7 +10,7 @@ const katex = require('rehype-katex');
     baseUrl: '/',
     onBrokenLinks: 'warn',
     onBrokenMarkdownLinks: 'warn',
-    favicon: '/svg/chia-leaf-green.svg',
+    favicon: '/svg/chia-leaf.svg',
     organizationName: 'Chia-Network',
     projectName: 'chia-docs',
     trailingSlash: true,
@@ -40,12 +40,12 @@ const katex = require('rehype-katex');
     themeConfig:
       /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
       ({
-        image: '/img/og-chia.png',
+        image: '/img/chia-logo-yellow.png',
         navbar: {
           title: 'Chia Docs',
           logo: {
-            alt: 'Chia Logo',
-            src: '/svg/chia-leaf-green.svg',
+            alt: 'Chia Icon',
+            src: '/svg/chia-leaf.svg',
           },
           items: [
             {
@@ -154,6 +154,11 @@ const katex = require('rehype-katex');
           theme: require('./src/theme/prism-light-theme-chialisp'),
           additionalLanguages: ['powershell', 'lisp'],
         },
+        colorMode: {
+          defaultMode: 'light',
+          disableSwitch: false,
+          respectPrefersColorScheme: true,
+        },
       }),
     themes: [
       [

i18n/zh-Hans/docusaurus-plugin-content-docs/current/dev-guides-home.md

@@ -3,7 +3,7 @@ title: Dev Guides Home
 slug: /dev-guides-home
 ---
 
-import DevChia from '@site/static/img/home_pages/dev_on_chia.png';
+import DevChia from '@site/static/img/home_pages/chia_dev.png';
 import ChialispIntro from '@site/static/img/home_pages/chialisp_intro.png';
 import SmartCoins from '@site/static/img/home_pages/smart_coins.png';
 import Signatures from '@site/static/img/home_pages/signatures.png';
@@ -29,7 +29,7 @@ import SimulatorGuide from '@site/static/img/home_pages/simulator_guide.png';
 import WalletConnect from '@site/static/img/home_pages/wallet_connect.png';
 
 import GreatChia from '@site/static/img/home_pages/chia_great.png';
-import AppDev from '@site/static/img/home_pages/dev_on_chia.png';
+import AppDev from '@site/static/img/home_pages/chia_dev.png';
 import ToolsSetup from '@site/static/img/home_pages/env_setup.png';
 import ProgrammingClsp from '@site/static/img/home_pages/clsp_programming.png';
 import CoinLifecycle from '@site/static/img/home_pages/coin_lifecycle.png';

src/components/HomepageFeatures.module.css

@@ -10,6 +10,14 @@
   width: 50px;
 }
 
+.featureSvg {
+    fill: #42506C;
+}
+
+html[data-theme='dark'] .featureSvg {
+    fill: #E5FE75;
+}
+
 .button {
   font-size: 14px;
   font-weight: 700;
@@ -19,7 +27,7 @@
   border-radius: 4px;
   letter-spacing: 0.03em;
   color: #fff;
-  background-color: #53c371;
+  background-color: #42506C;
   box-sizing: border-box;
   height: 32px;
   line-height: 32px;
@@ -64,12 +72,12 @@ form {
 }
 
 .emailInput:focus {
-  border-color: #53c371;
+  border-color: #42506C;
   outline: none;
 }
 
 h3 {
-  color: #53c371;
+  color: #42506C;
 }
 
 label {
@@ -79,10 +87,6 @@ label {
   font-weight: bold;
 }
 
-#mc_embed_signup.h3 {
-  color: #5ece71;
-}
-
 .mceResponses {
   float: left;
   top: -1.4em;
@@ -108,7 +112,7 @@ div.response {
 }
 
 #mce-success-response {
-  color: #5ece71;
+  color: #42506C;
   display: none;
 }
 

src/css/custom.css

@@ -1,7 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #5ece71;
-  --ifm-color-primary-dark: #297e40;
+  --ifm-color-primary: #42506C;
+  --ifm-color-primary-dark: #2C323C;
   --ifm-color-primary-darker: #1c552b;
   --ifm-color-primary-darkest: #073112;
   --ifm-color-primary-light: #44b161;
@@ -10,6 +12,114 @@
   --ifm-code-font-size: 95%;
 }
 
+/* Fonts */
+/* Apply Poppins Bold to all H1 elements */
+h1 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: bold;
+  color: #42506C;
+}
+
+/* Apply Poppins Medium to subhead elements */
+.subhead {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  color: #42506C;
+}
+
+/* Apply Poppins Semibold to all H2 and H3 elements */
+h2, h3 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  color: #42506C;
+}
+
+/* Apply Poppins Medium to all H4 elements */
+h4 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  color: #42506C;
+}
+
+/* Apply Inter Regular to the body and paragraph elements */
+body, p {
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  color: #2C323C;
+}
+
+/* Make body and paragraph links bold (light theme) */
+body a:not(.navbar__link, .menu__link, .table-of-contents__link, .footer__link-item),
+p a:not(.navbar__link, .menu__link, .table-of-contents__link, .footer__link-item) {
+  font-weight: bold;
+}
+
+/* Dark  */
+/* Make body and paragraph links bold (dark theme) */
+@media (prefers-color-scheme: dark) {
+  html[data-theme='dark'] body a:not(.navbar__link, .menu__link, .table-of-contents__link, .footer__link-item),
+  html[data-theme='dark'] p a:not(.navbar__link, .menu__link, .table-of-contents__link, .footer__link-item) {
+    font-weight: bold;
+  }
+
+  /* Main headings */
+  html[data-theme='dark'] h3,
+  html[data-theme='dark'] .menu__link,
+  html[data-theme='dark'] .navbar__link,
+  html[data-theme='dark'] .dropdown__link,
+  html[data-theme='dark'] .table-of-contents__link {
+    color: #FFF;
+  }
+
+  /* Active links */
+  html[data-theme='dark'] a,
+  html[data-theme='dark'] #mc_embed_signup h3, /* Mailchimp */
+  html[data-theme='dark'] .menu__link--active,
+  html[data-theme='dark'] .navbar__link--active,
+  html[data-theme='dark'] .dropdown__link--active,
+  html[data-theme='dark'] .tabs-container .tabs__item--active,
+  html[data-theme='dark'] .pagination-nav__label,
+  html[data-theme='dark'] .table-of-contents__link--active,
+  html[data-theme='dark'] .theme-edit-this-page,
+  html[data-theme='dark'] .breadcrumbs .breadcrumbs__link {
+    color: #E5FE75;
+  }
+
+  /* Hovered links */
+  html[data-theme='dark'] a:hover,
+  html[data-theme='dark'] .menu__link:hover,
+  html[data-theme='dark'] .navbar__link:hover,
+  html[data-theme='dark'] .dropdown__link:hover,
+  html[data-theme='dark'] .tabs-container .tabs__item:hover,
+  html[data-theme='dark'] .pagination-nav__label:hover,
+  html[data-theme='dark'] .table-of-contents__link:hover,
+  html[data-theme='dark'] .theme-edit-this-this-page:hover,
+  html[data-theme='dark'] .breadcrumbs .breadcrumbs__link:hover {
+    color: #A8BEF1;
+  }
+
+  /* Body Text */
+  html[data-theme='dark'] body,
+  html[data-theme='dark'] p {
+    color: #FFF;
+  }
+}
+
+.footer a {
+  color: #E5FE75;
+}
+
+.footer a:hover {
+    color: #A8BEF1;
+}
+
+a:hover,
+.navbar__link:hover,
+.dropdown__link:hover,
+.toc-highlight:hover {
+    color: #A8BEF1;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;
@@ -27,6 +137,20 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   }
 }
 
+.hero.hero--primary.heroBanner_qdFl {
+    color: #42506C;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.hero.hero--primary .button.button--secondary {
+    color: #42506C;
+    background-color: #E5FE75;
+    border: 1px;
+    border-color: #42506C;
+}
+
 .feature-item {
   margin-bottom: 50px;
 }

src/pages/index.js

@@ -9,7 +9,7 @@ import styles from './index.module.css';
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage: `url('/img/hero-background.png')`}}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>