aboutsummaryrefslogtreecommitdiff
path: root/apps/website/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/website/src')
-rw-r--r--apps/website/src/components/base/Card.astro4
-rw-r--r--apps/website/src/components/base/Header.astro17
-rw-r--r--apps/website/src/components/base/Section.astro6
-rw-r--r--apps/website/src/components/base/Tag.astro10
-rw-r--r--apps/website/src/components/base/navbar/Navbar.astro2
-rw-r--r--apps/website/src/components/base/navbar/NavbarElement.astro6
-rw-r--r--apps/website/src/layouts/Layout.astro2
-rw-r--r--apps/website/src/pages/mods.astro10
-rw-r--r--apps/website/src/pages/projects/oneconfig.astro29
-rw-r--r--apps/website/src/styles/global.css2
10 files changed, 46 insertions, 42 deletions
diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro
index 9b75f16..2eea908 100644
--- a/apps/website/src/components/base/Card.astro
+++ b/apps/website/src/components/base/Card.astro
@@ -16,7 +16,7 @@ const {
---
<!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. -->
-<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
+<div {...rest} class="rounded-xl bg-gray-600 w-[256px] pt-1 shrink-0">
<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
- <p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl py-[5px] pl-[12px] pr-[32px]">{text}</p>
+ <p class="text-white mx-auto bg-primary-600 rounded-b-xl text-[14px] py-[5px] pl-[12px] pr-[32px]">{text}</p>
</div>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index 7d24c8f..962b2d4 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -16,16 +16,21 @@ type Headers = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
interface Props extends HTMLAttributes<Headers> {
size?: keyof typeof sizes
align?: 'left' | 'center' | 'right' | 'inherit'
+ inheritSize?: boolean
}
const {
size = 'lg',
align = 'inherit',
+ inheritSize = false,
...attr
} = Astro.props;
const Element = sizes[size] as any; // Unfortunately gotta do this
let className: string | string[] = [];
+if (!inheritSize)
+ className.push('header');
+
if (align !== 'inherit')
className.push(`text-${align}`);
@@ -43,7 +48,7 @@ className = className.join(' ');
</Element>
<style>
- h1 {
+ h1.header {
font-size: theme("fontSize.header-lg");
&.page-header {
font-size: theme("fontSize.header-page");
@@ -51,7 +56,7 @@ className = className.join(' ');
font-weight: 600;
}
- h2 {
+ h2.header {
font-size: theme("fontSize.header");
&.page-header {
font-size: theme("fontSize.header-page");
@@ -59,22 +64,22 @@ className = className.join(' ');
font-weight: 600;
}
- h3 {
+ h3.header {
font-size: theme("fontSize.header-sm");
font-weight: 600;
}
- h4 {
+ h4.header {
font-size: theme("fontSize.body-lg");
font-weight: 500;
}
- h5 {
+ h5.header {
font-size: theme("fontSize.body");
font-weight: 500;
}
- h6 {
+ h6.header {
font-size: theme("fontSize.body-sm");
font-weight: 500;
}
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index a12ed12..c463a16 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -20,10 +20,10 @@ const {
const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
-const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-center md:justify-evenly lg:justify-between'}
- ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row items-center md:flex-row`;
+const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-center lg:justify-between'}
+ ${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 md:p-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
+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}` : ''}`;
---
<section class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
diff --git a/apps/website/src/components/base/Tag.astro b/apps/website/src/components/base/Tag.astro
index b903344..2eb5778 100644
--- a/apps/website/src/components/base/Tag.astro
+++ b/apps/website/src/components/base/Tag.astro
@@ -6,8 +6,8 @@ interface Props extends HTMLAttributes<'span'> {}
const { ...attr } = Astro.props;
---
- <div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
- <span {...attr}>
- <slot></slot>
- </span>
- </div>
+<div class="leading-none transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
+ <span {...attr}>
+ <slot></slot>
+ </span>
+</div>
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index aa31245..944d88d 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -6,7 +6,7 @@ import NavbarElement from '../navbar/NavbarElement.astro';
---
<div 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-sm:mt-4">
+ <ul class="flex flex-row justify-start gap-4 max-md:mt-4">
{(config as Config).navbar.left.map((element, index) => (
<NavbarElement {element} {index}/>
))}
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro
index 0fe544b..3033bf1 100644
--- a/apps/website/src/components/base/navbar/NavbarElement.astro
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -81,10 +81,10 @@ function isCurrentPage(url: string): boolean {
<div class="flex flex-col justify-start items-start">
<div class="flex flex-row gap-2">
- <Header size="sm" class="text-gray-800">{item.name}</Header>
- {item.tag && <Tag>{item.tag}</Tag>}
+ <Header inheritSize size="md" class="text-gray-800 text-md md:text-sm font-medium">{item.name}</Header>
+ {item.tag && <Tag class="text-sm md:text-xxs">{item.tag}</Tag>}
</div>
- <p class="text-sm text-gray-400 font-light">{item.description}</p>
+ <p class="text-md md:text-sm text-gray-400 font-light">{item.description}</p>
</div>
</div>
</a>
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
index 2658006..a06cdd2 100644
--- a/apps/website/src/layouts/Layout.astro
+++ b/apps/website/src/layouts/Layout.astro
@@ -39,8 +39,8 @@ const {
<main class="min-h-screen h-auto flex flex-col gap-40" id="fullpage">
<slot/>
- <Footer/>
</main>
+ <Footer/>
</body>
</html>
diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro
index af18358..c36c7c8 100644
--- a/apps/website/src/pages/mods.astro
+++ b/apps/website/src/pages/mods.astro
@@ -11,11 +11,11 @@ import { Code } from 'astro:components';
---
<Layout>
- <Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center max-sm:px-0">
+ <Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center max-xl:px-0">
<div class="flex flex-col justify-center items-center max-w-full overflow-hidden">
- <div class="flex flex-col justify-between items-center overflow-hidden h-auto md:h-[280px] max-w-[1920px] relative">
- <div class="absolute bottom-0 w-full h-full md:h-1/2 z-10" style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(240, 242, 244));" />
- <Slider wrapperClass="-mb-40 pb-4 max-sm:hidden" childrenNum={8}>
+ <div class="flex flex-col justify-between items-center overflow-hidden h-auto lg:h-[280px] max-w-[1920px] relative">
+ <div class="absolute -bottom-[1px] w-full h-full lg:h-1/2 z-10" style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(240, 242, 244));" />
+ <Slider wrapperClass="-mb-40 pb-4 hidden lg:block" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
@@ -123,7 +123,7 @@ public MyConfig() {
</div>
</Section>
- <Section class="flex-col justify-center items-center mb-40">
+ <Section wrapperClass="flex justify-center items-center min-h-screen -mt-40" class="flex-col justify-center items-center">
<div class="flex flex-col gap-y-1 relative md:-left-12 justify-center items-center">
<Header size="xl" class="text-navy-peony text-header-page w-11/12 md:max-w-lg text-center">Get our mods, available on Modrinth and GitHub.</Header>
<div class="flex flex-row justify-center items-center gap-x-2">
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index 700fd3d..11708be 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -27,39 +27,38 @@ import { Code } from 'astro:components';
<Section tabindex="0" hFull>
<div slot="left">
- <Header size="lg" class="text-navy-peony">Forge is complicated</Header>
- <Paragraph size="sm" 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>
+ <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 md:w-auto">
- <!-- TODO: make proper file names and alt text -->
- <img src="/media/oneconfig/page_media_1.svg" alt="stuff"/>
+ <div 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 md:w-auto flex justify-center">
- <img src="/media/oneconfig/page_media_2.svg" alt="stuff"/>
+ <div 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>
<div slot="right">
- <Header size="lg" class="text-navy-peony">Clients are locked-down</Header>
- <Paragraph size="sm" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph>
+ <Header size="xl" class="text-navy-peony">Clients are locked-down</Header>
+ <Paragraph size="md" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph>
</div>
</Section>
<Section tabindex="0" hFull>
<div slot="left">
- <Header size="lg" class="text-navy-peony">Best of both worlds</Header>
- <Paragraph size="sm" 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>
+ <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 md:w-auto flex justify-center">
- <img src="/media/oneconfig/page_media_3.svg" alt="stuff"/>
+ <div 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 maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen">
+ <Section colReverse={false} maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen">
<div slot="left">
<!-- TODO: FIX Codeblock overflowing on mobile -->
<div class="max-sm:hidden">
@@ -119,7 +118,7 @@ import { Code } from 'astro:components';
</Paragraph>
</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>
+ <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>
<div class="max-w-[1024px] w-full flex flex-col gap-2 text-left items-start px-5">
<Header size="xl" class="text-blue-500">With many fabulous mods</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 003b4c7..807e345 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-[19px] overflow-x-hidden;
+ @apply text-[15px] md:text-[16px] lg:text-[19px] overflow-x-hidden;
}
a {
generated by cgit (git 2.46.0) at 2024-11-21 22:28:17 +0000