diff --git a/docusaurus.config.ts b/docusaurus.config.ts index b68ed2f..3be23c1 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -41,6 +41,7 @@ const config: Config = { 'https://github.com/GeyserMC/Geyser/tree/main/', routeBasePath: '/', // Serve the docs at the site's root + sidebarCollapsible: true, }, blog: false, theme: { @@ -63,6 +64,7 @@ const config: Config = { { type: 'dropdown', label: 'Wiki', + className: 'header-wiki-link', position: 'right', to: 'geyser/setup', items: [ @@ -85,19 +87,19 @@ const config: Config = { }, { to: 'download', - 'aria-label': 'Download', + label: 'Download', position: 'right', className: 'header-download-link' }, { href: 'https://github.com/GeyserMC/Geyser', - 'aria-label': 'GitHub', + label: 'GitHub', position: 'right', className: 'header-github-link' }, { href: 'https://discord.gg/geysermc', - 'aria-label': 'Discord', + label: 'Discord', position: 'right', className: 'header-discord-link' }, @@ -105,18 +107,23 @@ const config: Config = { }, footer: { style: 'dark', - copyright: `© ${new Date().getFullYear()} GeyserMC`, + copyright: `© ${new Date().getFullYear()} GeyserMC | Built with Docusaurus`, }, prism: { theme: prismThemes.github, darkTheme: prismThemes.dracula, - additionalLanguages: ['bash', 'batch', 'java'], + additionalLanguages: ['bash', 'batch', 'java', 'json'], }, colorMode: { defaultMode: 'dark', disableSwitch: false, respectPrefersColorScheme: false, }, + docs: { + sidebar: { + hideable: true, + } + }, } satisfies Preset.ThemeConfig, }; diff --git a/src/css/custom.css b/src/css/custom.css index 126f306..5929305 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -5,6 +5,8 @@ */ /* You can override the default Infima variables here. */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat: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'); + :root { --ifm-color-primary: #2e8555; --ifm-color-secondary: #0097c5; @@ -17,6 +19,8 @@ --ifm-code-font-size: 95%; --ifm-horizontal-line-color: rgba(28, 30, 33, 0.2); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --ifm-font-family-base: 'Montserrat'; + --ifm-heading-font-family: 'Montserrat'; } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -29,15 +33,36 @@ --ifm-color-primary-light: #29d5b0; --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; + --ifm-navbar-background-color: #0f1b23; + --ifm-dropdown-background-color: #0f1b23; + --ifm-background-color: #0f1b23; + --ifm-background-surface-color: #1a2a3a; --ifm-horizontal-line-color: rgba(227, 227, 227, 0.2); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } +html[data-theme='dark'] { + --ifm-background-color: #0e161b; + --ifm-background-surface-color: #1a2a3a; +} + +.navbar { + box-shadow: 0px 10px 12px 0px rgba(0, 100, 100, 0.1); +} + +.header-discord-link { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + gap: 10px; +} + .header-discord-link::before { content: ''; width: 32px; height: 26px; - display: flex; + display: inline-block; background-color: var(--ifm-navbar-link-color); mask-image: url('data:image/svg+xml,'); transition: background-color var(--ifm-transition-fast) @@ -48,11 +73,19 @@ background-color: var(--ifm-navbar-link-hover-color); } +.header-download-link { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + gap: 10px; +} + .header-download-link::before { content: ''; width: 24px; height: 24px; - display: flex; + display: inline-block; background-color: var(--ifm-navbar-link-color); mask-image: url('data:image/svg+xml,'); transition: background-color var(--ifm-transition-fast) @@ -63,11 +96,19 @@ background-color: var(--ifm-navbar-link-hover-color); } +.header-github-link { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + gap: 10px; +} + .header-github-link::before { content: ''; width: 24px; height: 24px; - display: flex; + display: inline-block; background-color: var(--ifm-navbar-link-color); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); transition: background-color var(--ifm-transition-fast) @@ -78,6 +119,29 @@ background-color: var(--ifm-navbar-link-hover-color); } +.header-wiki-link { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + gap: 10px; +} + +.header-wiki-link::before { + content: ''; + width: 22px; + height: 25px; + display: inline-block; + background-color: var(--ifm-navbar-link-color); + mask-image: url('data:image/svg+xml,'); + transition: background-color var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.header-wiki-link:hover::before { + background-color: var(--ifm-navbar-link-hover-color); +} + .collapsible-header { display: flex; justify-content: space-between; diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 81648dd..bbbcd3a 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -8,6 +8,33 @@ position: relative; overflow: hidden; color: var(--ifm-font-color-base); + background-color: var(--ifm-background-color); +} + +.heroContent { + position: absolute; + top: 80%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; +} + +.heroImage { + -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 100, 100, 0.5)); + filter: drop-shadow(12px 12px 7px rgba(0, 100, 100, 0.5)); +} + +.heroImageBackgroundBlur { + position: absolute; + top: 0; + left: 0; + top: 40%; + left: 50%; + width: 80vh; + filter: blur(1.5rem); + transform: translate(-50%, -50%); + opacity: 0.5; + z-index: -1; } @media screen and (max-width: 996px) { @@ -17,7 +44,6 @@ } .textSection { - text-shadow: 1px 1px 5px #000; color: #fff; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 11b9b6f..4f86b2c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,19 +1,26 @@ import clsx from 'clsx'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useColorMode } from '@docusaurus/theme-common'; import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Heading from '@theme/Heading'; import HeroBackground from '@site/static/img/site/split-background.png'; +import HeroBackgroundLight from '@site/static/img/site/split-background-light.png'; import HeroImage from '@site/static/img/site/geyser.png'; import styles from './index.module.css'; function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); + const { colorMode } = useColorMode(); + + const backgroundImageUrl = colorMode === 'dark' ? HeroBackground : HeroBackgroundLight; + return ( -
-
- Geyser Logo +
+
+ Geyser Logo + Geyser Logo
{siteConfig.tagline} diff --git a/static/img/site/split-background-light.png b/static/img/site/split-background-light.png new file mode 100644 index 0000000..4c832fe Binary files /dev/null and b/static/img/site/split-background-light.png differ diff --git a/static/img/site/split-background.png b/static/img/site/split-background.png index 2c968ff..d9516ff 100644 Binary files a/static/img/site/split-background.png and b/static/img/site/split-background.png differ