Skip to content

Commit

Permalink
Add locomotive
Browse files Browse the repository at this point in the history
  • Loading branch information
@LynithDev
LynithDev committed Dec 30, 2023
1 parent d568fe0 commit 5b5bc9e
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 32 deletions.
1 change: 1 addition & 0 deletions apps/website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 6 additions & 1 deletion apps/website/src/components/base/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 7 additions & 1 deletion apps/website/src/components/base/Section.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'section'> {
wrapperClass?: string
wFull?: boolean
hFull?: boolean
scrollSection?: boolean
}
const {
Expand All @@ -15,6 +16,7 @@ const {
wrapperClass = '',
wFull = true,
hFull = false,
scrollSection = true,
...props
} = Astro.props;
Expand All @@ -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
? (
Expand Down
5 changes: 4 additions & 1 deletion apps/website/src/components/base/navbar/Navbar.astro
View file
Original file line number Diff line number Diff line change
@@ -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) => (
Expand Down
3 changes: 2 additions & 1 deletion apps/website/src/env.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
/// <reference types="./types/global.d.ts" />

declare module 'locomotive-scroll';
22 changes: 19 additions & 3 deletions apps/website/src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
48 changes: 26 additions & 22 deletions apps/website/src/pages/projects/oneconfig.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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
Expand Down Expand Up @@ -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]">
Expand All @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions apps/website/src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,18 @@

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 {
-webkit-user-drag: none;
}
}

.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 {
Expand Down
40 changes: 40 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 5b5bc9e

Please sign in to comment.