Landing Page Layout (#11)

* landing page layout * fixing broken links
OlympusDAO · Aug 26, 2022 · 60c44c8 · 60c44c8
1 parent 7dbe6d2
commit 60c44c8
Show file tree

Hide file tree

Showing 18 changed files with 757 additions and 452 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -62,11 +62,17 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        defaultMode: "light",
+        disableSwitch: false,
+        respectPrefersColorScheme: false,
+      },
       navbar: {
-        title: "My Site",
+        title: "",
         logo: {
-          alt: "My Site Logo",
+          alt: "Olympus Docs",
           src: "img/logo.svg",
+          srcDark: "img/logo_dark.svg",
         },
         items: [
           {
@@ -99,7 +105,7 @@ const config = {
             items: [
               {
                 label: "Discord",
-                href: "https://discord.com/invite/olympusdao",
+                href: "https://discord-invite.olympusdao.finance/",
               },
               {
                 label: "Twitter",
@@ -121,7 +127,7 @@ const config = {
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} Olympus DAO, Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} Olympus DAO`,
       },
       prism: {
         theme: lightCodeTheme,

diff --git a/package.json b/package.json
@@ -17,6 +17,9 @@
   "dependencies": {
     "@docusaurus/core": "2.0.1",
     "@docusaurus/preset-classic": "2.0.1",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@heroicons/react": "^2.0.7",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "mdx-embed": "^1.0.0",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #3F4552;
+  --ifm-color-primary-dark: #2C2E37;
+  --ifm-color-primary-darker: #141722;
+  --ifm-color-primary-darkest: #141722;
+  --ifm-color-primary-light: #8A8B90;
+  --ifm-color-primary-lighter: #BBBDC0;
+  --ifm-color-primary-lightest: #EEE9E2;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --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: #FAFAFB;
+  --ifm-color-primary-dark: #3F4552;
+  --ifm-color-primary-darker: #2C2E37;
+  --ifm-color-primary-darkest: #181A1D;
+  --ifm-color-primary-light: #FAFAFB;
+  --ifm-color-primary-lighter: #A3A3A3;
+  --ifm-color-primary-lightest: #676B74;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -1,23 +1,38 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
 .heroBanner {
   padding: 4rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
   }
 }
+@media screen and (min-width: 997px) {
+  :root {
+    --ifm-font-size-base: 17px;
+  }
+  article header h1 {
+    font-size: 2rem !important;
+  }
+}
 
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  height: 200px;
+  width: 200px;
+}