docs: Styling

docs/docusaurus.config.js

@@ -7,8 +7,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/nightOwl');
 /** @type {import('@docusaurus/types').Config} */
 const config = {
     title: 'Vendure Docs',
-    tagline: 'Dinosaurs are cool',
-    favicon: 'img/favicon.ico',
+    tagline: 'For preview only. Actual docs at https://docs.vendure.io',
+    favicon: 'img/logo.webp',
 
     // Set the production url of your site here
     url: 'https://docs.vendure.io',
@@ -42,12 +42,16 @@ const config = {
                     sidebarPath: require.resolve('./sidebars.js'),
                     // Please change this to your repo.
                     // Remove this to remove the "edit this page" links.
-                    editUrl:
-                        'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+                    editUrl: 'https://github.com/vendure-ecommerce/vendure/tree/new-docs/docs/',
                 },
                 blog: false,
                 theme: {
-                    customCss: require.resolve('./src/css/custom.css'),
+                    customCss: [
+                        require.resolve('./src/css/custom.css'),
+                        require.resolve('./src/css/layout.css'),
+                        require.resolve('./src/css/overrides.css'),
+                        require.resolve('./src/css/code-blocks.css'),
+                    ],
                 },
             }),
         ],
@@ -57,6 +61,11 @@ const config = {
     themeConfig:
         /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         ({
+            colorMode: {
+                defaultMode: 'dark',
+                disableSwitch: false,
+                respectPrefersColorScheme: true,
+            },
             // Replace with your project's social card
             image: 'img/docusaurus-social-card.jpg',
             navbar: {
@@ -79,7 +88,7 @@ const config = {
                         label: 'Reference',
                     },
                     {
-                        href: 'https://github.com/facebook/docusaurus',
+                        href: 'https://github.com/vendure-ecommerce/vendure',
                         label: 'GitHub',
                         position: 'right',
                     },
@@ -91,7 +100,6 @@ const config = {
                 },
             },
             footer: {
-                style: 'dark',
                 links: [
                     {
                         title: 'Community',
@@ -107,7 +115,7 @@ const config = {
                         ],
                     },
                 ],
-                copyright: `Copyright © ${new Date().getFullYear()} Vendure GmbH. Built with Docusaurus.`,
+                copyright: `Copyright © ${new Date().getFullYear()} Vendure GmbH.`,
             },
             prism: {
                 theme: lightCodeTheme,

docs/src/css/code-blocks.css

@@ -0,0 +1,22 @@
+/* Styling of GraphQL code blocks */
+.graphql-code-block {
+    background-color: var(--ifm-pre-background);
+    border-radius: var(--ifm-pre-border-radius);
+    padding: var(--ifm-pre-padding);
+    color: var(--ifm-pre-color);
+    font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace);
+}
+
+.graphql-code-line {
+}
+
+.graphql-code-line:not(.top-level) {
+    margin-left: 24px;
+}
+.graphql-code-line.comment {
+    color: var(--color-graphql-comment);
+}
+.graphql-code-identifier {
+    color: var(--color-graphql-identifier);
+    margin-right: 6px;
+}

docs/src/css/custom.css

@@ -4,6 +4,15 @@
  * work well for content-centric websites.
  */
 
+@font-face {
+  font-family: "Inter";
+  src: url('/static/inter.woff') format('woff');
+}
+
+:root {
+  --ifm-font-family-base: "Inter"
+}
+
 /* You can override the default Infima variables here. */
 :root {
     --ifm-color-primary: hsl(196 100% 35%);
@@ -13,12 +22,17 @@
     --ifm-color-primary-light: hsl(196 100% 65%);
     --ifm-color-primary-lighter: hsl(196 100% 75%);
     --ifm-color-primary-lightest: hsl(196 100% 90%);
+    --ifm-navbar-background-color: #ffffff11;
+    --ifm-color-content: var(--ifm-color-emphasis-800);
     --ifm-code-font-size: 95%;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
     --color-graphql-comment: #47954d;
     --color-graphql-identifier: rgb(227, 17, 108);
     --color-members-border: var(--ifm-color-secondary);
     --docusaurus-highlighted-code-line-bg: #e0f1ff;
+    --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>')
+    --body-background: white;
+    --ifm-footer-background-color: #edf2f5;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -30,12 +44,14 @@
     --ifm-color-primary-light: hsl(196 100% 65%);
     --ifm-color-primary-lighter: hsl(196 100% 75%);
     --ifm-color-primary-lightest: hsl(196 100% 90%);
-    --ifm-navbar-background-color: #000212;
+    --ifm-navbar-background-color: #00021211;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
     --color-graphql-comment: #6ea372;
     --color-graphql-identifier: rgb(255, 121, 198);
     --color-members-border: #333;
     --docusaurus-highlighted-code-line-bg: rgba(15, 71, 117, 0.5);
+    --body-background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(79, 208, 255, 0.3), transparent);
+    --ifm-footer-background-color: #1a1f27;
 }
 
 html[data-theme='dark'] {
@@ -59,26 +75,3 @@ html[data-theme='dark'] {
 .members-wrapper > h3 {
     margin-top: 42px;
 }
-
-/* Styling of GraphQL code blocks */
-.graphql-code-block {
-    background-color: var(--ifm-pre-background);
-    border-radius: var(--ifm-pre-border-radius);
-    padding: var(--ifm-pre-padding);
-    color: var(--ifm-pre-color);
-    font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace);
-}
-
-.graphql-code-line {
-}
-
-.graphql-code-line:not(.top-level) {
-    margin-left: 24px;
-}
-.graphql-code-line.comment {
-    color: var(--color-graphql-comment);
-}
-.graphql-code-identifier {
-    color: var(--color-graphql-identifier);
-    margin-right: 6px;
-}

docs/src/css/layout.css

@@ -0,0 +1,12 @@
+.navbar__inner {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1419px;
+}
+
+.main-wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1419px;
+    width: 100%;
+}

docs/src/css/overrides.css

@@ -0,0 +1,30 @@
+body {
+    background: var(--body-background);
+    background-repeat: no-repeat;
+    background-position: top;
+}
+
+.menu__link--sublist-caret:after {
+    background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+    opacity: 0.6;
+}
+
+.menu__link--sublist-caret:hover:after {
+    opacity: 1;
+}
+
+
+@media screen and (min-width: 996px) {
+    .docs-wrapper article {
+        margin-left: 32px;
+    }
+}
+
+.navbar {
+    backdrop-filter: blur(20px);
+}
+
+.hero--primary {
+    --ifm-hero-background-color: transparent;
+    --ifm-hero-text-color: var(--ifm-font-color-base);
+}