diff options
| -rw-r--r-- | apps/website/src/components/base/Section.astro | 13 | ||||
| -rw-r--r-- | apps/website/src/components/base/Slider.astro | 5 | ||||
| -rw-r--r-- | apps/website/src/components/base/navbar/Navbar.astro | 29 | ||||
| -rw-r--r-- | apps/website/src/components/base/navbar/NavbarElement.astro | 4 | ||||
| -rw-r--r-- | apps/website/src/pages/projects/oneconfig.astro | 6 | ||||
| -rw-r--r-- | apps/website/src/styles/global.css | 7 |
6 files changed, 33 insertions, 31 deletions
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro index b2842f6..0ff8e3a 100644 --- a/apps/website/src/components/base/Section.astro +++ b/apps/website/src/components/base/Section.astro @@ -18,7 +18,7 @@ const { 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-4${ +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 md:items-center md:flex-row` : '' }${props.class ? ` ${props.class}` : ''}`; --- @@ -31,12 +31,11 @@ const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} p <slot name="left"></slot> </div> - <div class="flex flex-col items-start text-left relative"> - <slot name="right"></slot> - </div> - ) - : ( + <div class="flex flex-col items-start text-left relative"> + <slot name="right"></slot> + </div> + ) : ( <slot></slot> - )} + )} </div> </section> diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro index 625d7ff..139a250 100644 --- a/apps/website/src/components/base/Slider.astro +++ b/apps/website/src/components/base/Slider.astro @@ -51,10 +51,13 @@ const { } } } + + /** &:hover > .wrapper, &.reverse:hover > .wrapper { - /* TODO: Possibly add fancy hover card anim? */ animation-play-state: paused; } + */ + &.reverse > .wrapper { animation: var(--speed) linear infinite slide-reverse; @keyframes slide-reverse { diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro index ca39f2b..96c9955 100644 --- a/apps/website/src/components/base/navbar/Navbar.astro +++ b/apps/website/src/components/base/navbar/Navbar.astro @@ -4,18 +4,17 @@ 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"> - <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"> - {(config as Config).navbar.left.map((element, index) => ( - <NavbarElement {element} {index}/> - ))} - </ul> - <ul class="flex flex-row justify-end gap-4"> - {(config as Config).navbar.right.map((element, index) => ( - <NavbarElement {element} {index}/> - ))} - </ul> - </nav> - </div> +<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3"> + <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) => ( + <NavbarElement {element} {index}/> + ))} + </ul> + <ul class="flex flex-row justify-end gap-4"> + {(config as Config).navbar.right.map((element, index) => ( + <NavbarElement {element} {index}/> + ))} + </ul> + </nav> +</div> diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro index 8a455de..346869c 100644 --- a/apps/website/src/components/base/navbar/NavbarElement.astro +++ b/apps/website/src/components/base/navbar/NavbarElement.astro @@ -51,9 +51,9 @@ const { md:top-full md:right-0 group-focus-within:pointer-events-auto group-focus-within:opacity-100 - group-hover:pointer-events-auto group-hover:opacity-100 + md:group-hover:pointer-events-auto md:group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100 - hover:pointer-events-auto hover:opacity-100 + md:hover:pointer-events-auto md:hover:opacity-100 `}> <ScrollbarOverlayContainer tabindex="-1" diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro index 04de167..1ff50d4 100644 --- a/apps/website/src/pages/projects/oneconfig.astro +++ b/apps/website/src/pages/projects/oneconfig.astro @@ -59,7 +59,7 @@ import { Code } from 'astro:components'; </div> </Section> - <Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="pt-10 md:py-20 gap-4"> + <Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="pt-10 md:py-20"> <div slot="left"> <!-- TODO: FIX Codeblock overflowing on mobile --> <div class="max-sm:hidden"> @@ -160,8 +160,8 @@ import { Code } from 'astro:components'; <Section class="flex-col justify-center items-center md:h-4/5 md:min-h-[600px] mb-[10rem]"> <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 max-sm:w-11/12 -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12"> - <Logo logo="oneconfig.logo_text" class="w-48 h-12 md:min-w-max md:h-auto"></Logo> + <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"> + <Logo logo="oneconfig.logo_text" class="w-48 h-12 md:min-w-72 md:h-auto"></Logo> <Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit"/> </div> </div> diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css index 9efd728..340c9e0 100644 --- a/apps/website/src/styles/global.css +++ b/apps/website/src/styles/global.css @@ -53,10 +53,10 @@ .astro-code code span.line { counter-increment: listing; text-align: left; - /* float: left; - clear: left; */ + float: left; + clear: left; font-size: 13px; - text-wrap: nowrap; + white-space: pre; } .astro-code code span.line::before { @@ -66,6 +66,7 @@ width: 2em; padding: 0; margin-left: auto; + margin-right: 1ch; /* margin-right: 10px; */ text-align: right; font-family: 'Roboto Mono', monospace !important; |