aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apps/website/package.json1
-rw-r--r--apps/website/src/components/base/Footer.astro7
-rw-r--r--apps/website/src/components/base/Section.astro8
-rw-r--r--apps/website/src/components/base/navbar/Navbar.astro5
-rw-r--r--apps/website/src/env.d.ts3
-rw-r--r--apps/website/src/layouts/Layout.astro22
-rw-r--r--apps/website/src/pages/projects/oneconfig.astro48
-rw-r--r--apps/website/src/styles/global.css8
-rw-r--r--pnpm-lock.yaml40
9 files changed, 110 insertions, 32 deletions
diff --git a/apps/website/package.json b/apps/website/package.json
index 553b23c..a6e73a0 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -17,6 +17,7 @@
"@astrojs/tailwind": "^5.0.4",
"astro": "^4.0.7",
"fullpage.js": "^4.0.20",
+ "locomotive-scroll": "^4.1.4",
"sass": "^1.69.5",
"tailwindcss": "^3.4.0",
"vitest": "^1.1.0"
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
index 88e6d7b..9463edc 100644
--- a/apps/website/src/components/base/Footer.astro
+++ b/apps/website/src/components/base/Footer.astro
@@ -2,10 +2,15 @@
import Icon from '@components/icons/Icon.astro';
import Logo from '@components/logos/Logo.astro';
import configConst from '@config';
+import type { HTMLAttributes } from 'astro/types';
import Link from './Link.astro';
+
+interface Props extends HTMLAttributes<'footer'> {}
+
+const props = Astro.props;
---
-<footer class="section flex justify-center items-center bg-blue-100 mt-4 pt-20 pb-8 px-20">
+<footer {...props} class="section flex justify-center items-center bg-blue-100 -mt-40 pt-20 pb-8 px-20">
<div class="max-w-[1024px] w-full flex flex-col gap-y-24">
<div class="flex flex-col gap-y-20 justify-center items-start md:flex-row md:items-start md:justify-between">
<div class="flex-1 flex flex-col gap-y-3 text-blue-gray">
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index c463a16..5f3cc1d 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'section'> {
wrapperClass?: string
wFull?: boolean
hFull?: boolean
+ scrollSection?: boolean
}
const {
@@ -15,6 +16,7 @@ const {
wrapperClass = '',
wFull = true,
hFull = false,
+ scrollSection = true,
...props
} = Astro.props;
@@ -24,9 +26,13 @@ const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-c
${colReverse ? 'flex-col-reverse' : 'flex-col'} lg:flex-row items-center`;
const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 xl:px-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
+
+const sectionAttr = {
+ ...(scrollSection ? { 'data-scroll-section': '' } : {}),
+};
---
-<section class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
+<section {...sectionAttr} class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
<div class={className} {...props}>
{twoColumn
? (
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index 944d88d..bd2c2b5 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -1,10 +1,13 @@
---
import type { Config } from '@webtypes/Config';
+import type { HTMLAttributes } from 'astro/types';
import config from 'config';
import NavbarElement from '../navbar/NavbarElement.astro';
+interface Props extends HTMLAttributes<'div'> {}
+const props = Astro.props;
---
-<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
+<div {...props} class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
<nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
<ul class="flex flex-row justify-start gap-4 max-md:mt-4">
{(config as Config).navbar.left.map((element, index) => (
diff --git a/apps/website/src/env.d.ts b/apps/website/src/env.d.ts
index 026fcd0..01db714 100644
--- a/apps/website/src/env.d.ts
+++ b/apps/website/src/env.d.ts
@@ -1,3 +1,4 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
-/// <reference types="./types/global.d.ts" />
+
+declare module 'locomotive-scroll';
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
index a06cdd2..660083a 100644
--- a/apps/website/src/layouts/Layout.astro
+++ b/apps/website/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
---
import Footer from '@components/base/Footer.astro';
import Favicon from '/media/polyfrost/minimal_bg.svg?url';
+import 'locomotive-scroll/dist/locomotive-scroll.min.css';
import Navbar from '../components/base/navbar/Navbar.astro';
import '../styles/global.css';
@@ -35,12 +36,27 @@ const {
</head>
<body class="bg-gray-50 overflow-x-hidden">
- <Navbar />
- <main class="min-h-screen h-auto flex flex-col gap-40" id="fullpage">
+ <main class="min-h-screen h-auto flex flex-col gap-40" data-scroll-container>
+ <Navbar data-scroll-section />
+
<slot/>
+
+ <Footer data-scroll-section />
</main>
- <Footer/>
</body>
</html>
+
+<script>
+import LocomotiveScroll from 'locomotive-scroll';
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+const scroll = new LocomotiveScroll({
+ el: document.querySelector('[data-scroll-container]'),
+ smooth: true,
+ lerp: 0.05,
+ touchMultiplier: 0,
+ resetNativeScroll: false,
+});
+</script>
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index 11708be..47d415c 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -15,13 +15,15 @@ import { Code } from 'astro:components';
<Layout>
<Section class="flex-col justify-center items-center h-screen md:min-h-[600px]">
- <Logo size={56} logo="oneconfig.minimal"/>
- <Header align="center" size="xxl" class="max-w-[600px]">
- Meet <b>OneConfig</b>, the library designed for <b>everyone</b>.
- </Header>
- <div class="flex flex-row justify-center items-center gap-2">
- <Button href="/projects/oneconfig/download" iconLeft="download" text="Download"/>
- <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
+ <div class="flex flex-col justify-center items-center gap-y-4">
+ <Logo size={56} logo="oneconfig.minimal"/>
+ <Header align="center" size="xxl" class="max-w-[600px]">
+ Meet <b>OneConfig</b>, the library designed for <b>everyone</b>.
+ </Header>
+ <div class="flex flex-row justify-center items-center gap-2">
+ <Button href="/projects/oneconfig/download" iconLeft="download" text="Download"/>
+ <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
+ </div>
</div>
</Section>
@@ -30,13 +32,13 @@ import { Code } from 'astro:components';
<Header size="xl" class="text-navy-peony">Forge is complicated</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">Modding Minecraft has always been difficult, particularly with their configuration. Remembering all of the keybinds, commands; it just isn't intuitive.</Paragraph>
</div>
- <div slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto">
+ <div data-scroll data-scroll-speed="10" slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto">
<img class="w-full md:w-[20rem]" src="/media/oneconfig/page_media_1.svg" alt="stuff"/>
</div>
</Section>
<Section tabindex="0" colReverse={false} hFull>
- <div slot="left" class="w-1/2 max-w-80 md:max-w-none md:w-auto flex justify-center">
+ <div data-scroll data-scroll-speed="10" slot="left" class="w-1/2 max-w-80 md:max-w-none md:w-auto flex justify-center">
<img class="w-full md:w-[20rem]" src="/media/oneconfig/page_media_2.svg" alt="stuff"/>
</div>
@@ -47,19 +49,19 @@ import { Code } from 'astro:components';
</Section>
<Section tabindex="0" hFull>
- <div slot="left">
+ <div data-scroll data-scroll-sticky slot="left">
<Header size="xl" class="text-navy-peony">Best of both worlds</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.</Paragraph>
</div>
- <div slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto flex justify-center">
+ <div data-scroll data-scroll-speed="10" slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto flex justify-center">
<img class="w-full md:w-[20rem] lg:w-[30rem]" src="/media/oneconfig/page_media_3.svg" alt="stuff"/>
</div>
</Section>
- <div class="section bg-blue-75 flex flex-col justify-center items-center min-h-screen">
- <Section colReverse={false} maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen">
- <div slot="left">
+ <div data-scroll-section class="section bg-blue-75 flex flex-col justify-center items-center min-h-screen">
+ <Section scrollSection={false} colReverse={false} maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen">
+ <div data-scroll data-scroll-speed="2" slot="left">
<!-- TODO: FIX Codeblock overflowing on mobile -->
<div class="max-sm:hidden">
<Code
@@ -94,7 +96,7 @@ import { Code } from 'astro:components';
</div>
</Section>
- <Section maxWidth="1120px" wFull={false} class="py-10 md:py-20 gap-4 max-sm:h-screen">
+ <Section scrollSection={false} maxWidth="1120px" wFull={false} class="py-10 md:py-20 gap-4 max-sm:h-screen">
<div slot="left" class="flex flex-col gap-2 text-left items-start">
<Header size="xl" class="text-blue-500">Designed for users</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
@@ -104,18 +106,20 @@ import { Code } from 'astro:components';
<Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/>
</div>
</div>
- <div slot="right">
+ <div data-scroll data-scroll-speed="3" slot="right">
<img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/>
</div>
</Section>
</div>
- <Section class="flex-col justify-center items-center h-screen md:min-h-[600px]" hFull>
- <img src="/media/oneconfig/page_media_5.png" class="max-h-[285px] md:max-h-96 lg:max-h-[581px] rounded-2xl"/>
- <Header size="xl" align="center" class="w-96">A unified HUD editor</Header>
- <Paragraph class="w-96 text-center text-gray-400">
- Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind.
- </Paragraph>
+ <Section id="unified_hud_editor" class="flex-col justify-center items-center h-screen md:min-h-[600px]" hFull>
+ <img data-scroll data-scroll-sticky data-scroll-target="#unified_hud_editor" data-scroll-direction="horizontal" src="/media/oneconfig/page_media_5.png" class="max-h-[285px] md:max-h-96 lg:max-h-[581px] rounded-2xl"/>
+ <div data-scroll data-scroll-speed="2" class="flex flex-col justify-center items-center gap-y-4">
+ <Header size="xl" align="center" class="w-96">A unified HUD editor</Header>
+ <Paragraph class="w-96 text-center text-gray-400">
+ Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind.
+ </Paragraph>
+ </div>
</Section>
<Section wrapperClass="bg-blue-100 -mb-40" wFull maxWidth="none" class="py-10 md:py-20 gap-4 !px-0 flex flex-col items-center justify-center" hFull>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 807e345..f29f0f0 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -24,7 +24,7 @@
html,
body {
- @apply text-[15px] md:text-[16px] lg:text-[19px] overflow-x-hidden;
+ @apply text-[15px] md:text-[16px] lg:text-[19px] overflow-hidden;
}
a {
@@ -32,8 +32,10 @@
}
}
-.fp-overflow:focus-visible {
- @apply outline-none ring-0 ;
+[data-scroll-container], [data-scroll-section] {
+ transform-style: preserve-3d;
+ will-change: transform;
+ perspective: 1px;
}
main {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6753293..b15153c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -157,6 +157,9 @@ importers:
fullpage.js:
specifier: ^4.0.20
version: 4.0.20
+ locomotive-scroll:
+ specifier: ^4.1.4
+ version: 4.1.4
sass:
specifier: ^1.69.5
version: 1.69.5
@@ -6240,6 +6243,10 @@ packages:
open: 8.4.2
dev: true
+ /bezier-easing@2.1.0:
+ resolution: {integrity: sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==}
+ dev: false
+
/big-integer@1.6.52:
resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
engines: {node: '>=0.6'}
@@ -6260,6 +6267,10 @@ packages:
chainsaw: 0.1.0
dev: false
+ /bindall-standalone@1.0.5:
+ resolution: {integrity: sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==}
+ dev: false
+
/bl@4.1.0:
resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
requiresBuild: true
@@ -9883,6 +9894,10 @@ packages:
needle: 3.3.1
source-map: 0.6.1
+ /lethargy@1.0.9:
+ resolution: {integrity: sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==}
+ dev: false
+
/leven@3.1.0:
resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
engines: {node: '>=6'}
@@ -9958,6 +9973,14 @@ packages:
dependencies:
p-locate: 5.0.0
+ /locomotive-scroll@4.1.4:
+ resolution: {integrity: sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==}
+ dependencies:
+ bezier-easing: 2.1.0
+ smoothscroll-polyfill: 0.4.4
+ virtual-scroll: 1.5.2
+ dev: false
+
/lodash.castarray@4.4.0:
resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
dev: true
@@ -12749,6 +12772,10 @@ packages:
resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
engines: {node: '>=8'}
+ /smoothscroll-polyfill@0.4.4:
+ resolution: {integrity: sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==}
+ dev: false
+
/snake-case@3.0.4:
resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
dependencies:
@@ -13329,6 +13356,10 @@ packages:
readable-stream: 3.6.2
dev: true
+ /tiny-emitter@1.2.0:
+ resolution: {integrity: sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==}
+ dev: false
+
/tiny-invariant@1.3.1:
resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
@@ -14042,6 +14073,15 @@ packages:
vfile-message: 4.0.2
dev: false
+ /virtual-scroll@1.5.2:
+ resolution: {integrity: sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==}
+ dependencies:
+ bindall-standalone: 1.0.5
+ lethargy: 1.0.9
+ object-assign: 4.1.1
+ tiny-emitter: 1.2.0
+ dev: false
+
/vite-node@1.1.0:
resolution: {integrity: sha512-jV48DDUxGLEBdHCQvxL1mEh7+naVy+nhUUUaPAZLd3FJgXuxQiewHcfeZebbJ6onDqNGkP4r3MhQ342PRlG81Q==}
engines: {node: ^18.0.0 || >=20.0.0}
generated by cgit (git 2.46.0) at 2024-11-21 17:22:36 +0000