Update theming and colours (#53)

neoforged · Feb 20, 2024 · 55ddbc4 · 55ddbc4
1 parent 4252a18
commit 55ddbc4
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 40 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,8 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 const {themes} = require('prism-react-renderer');
-const lightTheme = themes.github;
-const darkTheme = themes.dracula;
+const lightTheme = themes.oneLight;
+const darkTheme = themes.vsDark;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -84,10 +84,14 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        respectPrefersColorScheme: true
+      },
+
       // Replace with your project's social card
       //image: 'img/docusaurus-social-card.jpg',
       navbar: {
-        title: "NeoForged documentation",
+        title: "Homepage",
         logo: {
           alt: "NeoForged Logo",
           src: "img/logo.svg",
@@ -97,7 +101,7 @@ const config = {
             type: "docSidebar",
             sidebarId: "mainSidebar",
             position: "left",
-            label: "Getting Started",
+            label: "NeoForge Documentation",
           },
           {
             type: "docSidebar",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -6,25 +6,73 @@
 
 /* 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-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-color-primary: #3819d2;
+  --ifm-color-primary-dark: #3217bd;
+  --ifm-color-primary-darker: #3015b3;
+  --ifm-color-primary-darkest: #271193;
+  --ifm-color-primary-light: #3f1ee4;
+  --ifm-color-primary-lighter: #4829e5;
+  --ifm-color-primary-lightest: #1f0e73;
+  --ifm-code-font-size: 90%;
+
+  --context-divier: #e2e2e3;
+
+  --ifm-color-warning-contrast-background: rgb(254, 243, 213);
+  --ifm-code-border-radius: 0.55rem;
+
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.125);
 }
 
 /* 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;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+html[data-theme="dark"] {
+  --ifm-color-primary: #0896d4;
+  --ifm-color-primary-dark: #0891ce;
+  --ifm-color-primary-darker: #088ec9;
+  --ifm-color-primary-darkest: #078ac3;
+  --ifm-color-primary-light: #09a5e9;
+  --ifm-color-primary-lighter: #09acf4;
+  --ifm-color-primary-lightest: #27b8f7;
+
+  --ifm-background-color: #121214;
+  --ifm-background-surface-color: #1b1b1b;
+
+  --ifm-color-secondary-contrast-background: rgba(72, 71, 71, 0.55);
+  --ifm-color-warning-contrast-background: rgba(77, 56, 0, 0.55);
+
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.45);
+  --ifm-code-background: rgba(255, 255, 255, 0.08);
+
+  --content-divier: #2e2e32;
+}
+
+.menu__caret:before {
+  background: var(--ifm-menu-link-sublist-icon) 50%/1.65rem;
+}
+
+.menu__link--sublist-caret:after {
+  background: var(--ifm-menu-link-sublist-icon) 50%/1.65rem;
 }
+
+.hash-link:link {
+  text-decoration: none;
+}
+
+a.no-underline {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.link-card:hover {
+  transform: scale(1.05);
+  border: 1px solid var(--ifm-color-primary-light);
+}
+
+.link-card {
+  transition: transform 450ms ease-in-out;
+}
+
+h2 {
+  margin: 48px 0 16px;
+  padding-top: 24px;
+  border-top: 1px solid var(--context-divier);
+}
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -14,18 +14,18 @@ If you would like to contribute to the docs, read [Contributing to the Docs][con
 
 <div class="container">
   <div class="row">
-    <div class="col col--6">
+    <div class="col col--6" style={{padding: '10px'}}>
       <Card
-        title="NeoForged Documentation"
+        title="NeoForge Documentation"
         body="Learn how to create your first mod using NeoForge, and discover the vast APIs it provides."
         link="/docs/gettingstarted/"
         linkTitle="Get Started"
       />
     </div>
-    <div class="col col--6">
+    <div class="col col--6" style={{padding: '10px'}}>
       <Card
         title="NeoGradle Documentation"
-        body="NeoGradle is the gradle plugin empowering developers to create mods for NeoForge and develop NeoForge itself."
+        body="Learn about the Gradle plugin empowering developers to create mods for NeoForge and develop NeoForge itself."
         link="/neogradle/docs/"
         linkTitle="Read More"
       />

diff --git a/src/theme/Card.tsx b/src/theme/Card.tsx
@@ -3,20 +3,22 @@ import Link from "@docusaurus/Link";
 
 export default function Card(props: any) {
   return (
-    <div className="card">
-      <div className="card__header">
-        <h3>{props.title}</h3>
+    <a href={props.link} className="no-underline">
+      <div className="card link-card">
+        <div className="card__header">
+          <h3>{props.title}</h3>
+        </div>
+        <div className="card__body">
+          <p>
+            {props.body}
+          </p>
+        </div>
+        {(props.link != undefined) ? <div className="card__footer">
+          <Link isNavLink={true} to={props.link} className="button button--secondary button--block">
+            {props.linkTitle}
+          </Link>
+        </div> : ''}
       </div>
-      <div className="card__body">
-        <p>
-          {props.body}
-        </p>
-      </div>
-      {(props.link != undefined) ? <div className="card__footer">
-        <Link isNavLink={true} to={props.link} className="button button--secondary button--block">
-          {props.linkTitle}
-        </Link>
-      </div> : ''}
-    </div>
+    </a>
   );
 }