Some wild css
Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>
This commit is contained in:
6 files changed
+116
-12
No files matched your search
+12
-5
@@ -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,
|
||||
};
|
||||
|
||||
|
||||
+67
-3
@@ -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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>');
|
||||
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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>');
|
||||
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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg>');
|
||||
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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+10
-3
@@ -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 (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage: `url(${HeroBackground})`}}>
|
||||
<div className="container">
|
||||
<img src={HeroImage} alt="Geyser Logo" className="hero__image"/>
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage: `url(${backgroundImageUrl})`}}>
|
||||
<div className={styles.heroContent}>
|
||||
<img src={HeroImage} alt="Geyser Logo" className={styles.heroImage}/>
|
||||
<img src={HeroImage} alt="Geyser Logo" className={styles.heroImageBackgroundBlur}/>
|
||||
<div className={styles.textSection}>
|
||||
<Heading as="h1" className="hero__title">
|
||||
{siteConfig.tagline}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 11 MiB |
Reference in new issue
Block a user