Skip to content

Commit

Permalink
Increase font size + scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@LynithDev
LynithDev committed Dec 28, 2023
1 parent 97cf840 commit bf5075e
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 85 deletions.
9 changes: 6 additions & 3 deletions apps/website/src/components/base/Section.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,24 @@ interface Props extends HTMLAttributes<'section'> {
colReverse?: boolean
wrapperClass?: string
wFull?: boolean
hFull?: boolean
}
const {
maxWidth = '1080px',
colReverse = true,
wrapperClass = '',
wFull = true,
hFull = false,
...props
} = Astro.props;
const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-x-20 gap-y-4${
twoColumn ? ` ${maxWidth === 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row items-center md:flex-row` : ''
}${props.class ? ` ${props.class}` : ''}`;
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 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}` : ''}`;
---

<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/base/navbar/Navbar.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import config from 'config';
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">
<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">
{(config as Config).navbar.left.map((element, index) => (
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/base/navbar/NavbarElement.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function isCurrentPage(url: string): boolean {
? (
<a href={element.path} class={`p-2 flex flex-row justify-center items-center hover:text-blue-500 ${isCurrentPage(element.path) ? 'text-blue-400' : 'text-gray-700'}`}>
{element.text && element.text}
{element.logo && <Logo transition:persist class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
{element.logo && <Logo class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
{element.dropdown && <Icon icon="chevron-down"/>}
</a>
)
Expand Down
158 changes: 79 additions & 79 deletions apps/website/src/pages/projects/oneconfig.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Code } from 'astro:components';
---

<Layout>
<Section class="flex-col justify-center items-center h-screen md:max-h-[800px] md:min-h-[600px]">
<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>.
Expand All @@ -26,7 +26,7 @@ import { Code } from 'astro:components';
</Section>

<div class="flex flex-col gap-40">
<Section tabindex="0">
<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>
Expand All @@ -37,7 +37,7 @@ import { Code } from 'astro:components';
</div>
</Section>

<Section tabindex="0" colReverse={false}>
<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>
Expand All @@ -48,7 +48,7 @@ import { Code } from 'astro:components';
</div>
</Section>

<Section tabindex="0">
<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>
Expand All @@ -59,67 +59,69 @@ import { Code } from 'astro:components';
</div>
</Section>

<Section maxWidth="1120px" wrapperClass="bg-blue-75 -mb-40" wFull={false} class="pt-10 md:py-20">
<div slot="left">
<!-- TODO: FIX Codeblock overflowing on mobile -->
<div class="max-sm:hidden">
<Code
code={
`public class MyConfig {
@Switch(
name = "Sub Switch",
type = OptionType.SWITCH
)
public static boolean subSwitch = false;
public MyConfig() {
super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
addDependency("subSwitch", () -> {
// Do stuff here
});
<div class="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">
<div slot="left">
<!-- TODO: FIX Codeblock overflowing on mobile -->
<div class="max-sm:hidden">
<Code
code={
`public class MyConfig {
@Switch(
name = "Sub Switch",
type = OptionType.SWITCH
)
public static boolean subSwitch = false;
public MyConfig() {
super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
addDependency("subSwitch", () -> {
// Do stuff here
});
}
}`
}
}`
}
lang="java"/>
lang="java"/>
</div>
</div>
</div>

<div slot="right" class="flex flex-col gap-2 text-left items-start">
<Header size="xl" class="text-blue-500">Written for developers</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig.
</Paragraph>
<div class="flex">
<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
<div slot="right" class="flex flex-col gap-2 text-left items-start">
<Header size="xl" class="text-blue-500">Written for developers</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig.
</Paragraph>
<div class="flex">
<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
</div>
</div>
</div>
</Section>

<Section maxWidth="1120px" wrapperClass="bg-blue-75" wFull={false} class="py-10 md:py-20 gap-4">
<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]">
We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there.
</Paragraph>
<div class="flex">
<Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/>
</Section>

<Section 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]">
We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there.
</Paragraph>
<div class="flex">
<Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/>
</div>
</div>
</div>
<div slot="right">
<img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/>
</div>
</Section>
<div 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 max-h-96 md:h-4/5 md:min-h-[600px]">
<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>

<Section wrapperClass="bg-blue-100 -mb-40" class="py-10 md:py-20 gap-4 pr-2">
<div slot="left" class="flex flex-col gap-2 text-left items-start">
<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]">
Discover a wide range of mods integrated with OneConfig to enhance your experience.
Expand All @@ -130,35 +132,33 @@ import { Code } from 'astro:components';
<Button iconLeft="link-external" style="ghost" text="Download a modpack"/>
</div>
</div>
</Section>

<!-- TODO: add more 3rd party mods, like DSM PSS and Neu maybe -->
<div class="flex flex-col justify-center items-center bg-blue-100 pb-10 max-w-full overflow-hidden">
<div class="flex flex-col justify-between items-center overflow-hidden h-[280px] max-w-[1920px]">
<Slider wrapperClass="-mb-40 pb-4 bg-blue-100" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
<Slider dir="right" wrapperClass="bg-blue-100" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
<div class="flex flex-col justify-center items-center bg-blue-100 pb-10 max-w-full overflow-hidden">
<div class="flex flex-col justify-between items-center overflow-hidden h-[280px] max-w-[1920px]">
<Slider wrapperClass="-mb-40 pb-4 bg-blue-100" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
<Slider dir="right" wrapperClass="bg-blue-100" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
</div>
</div>
</div>
</Section>

<Section class="flex-col justify-center items-center md:h-4/5 md:min-h-[600px] mb-[10rem]">
<Section class="flex-col justify-center items-center mb-20" hFull>
<div class="flex relative md:-left-12">
<img src="/media/oneconfig/page_media_4.png" class="rounded-2xl"/>
<div class="border border-gray-200 rounded-3xl md:rounded-4xl shadow-sm bg-gray-50 flex flex-col justify-center items-center md:items-start p-4 md:p-8 absolute -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12 gap-y-2 md:gap-y-8">
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

html,
body {
@apply text-[15px] md:text-[16px];
@apply text-[15px] md:text-[19px];
}

a {
Expand Down

0 comments on commit bf5075e

Please sign in to comment.