Merge pull request #10 from sudoaugustin/develop

update: website
sudoaugustin · Mar 4, 2024 · a8c7a79 · a8c7a79
2 parents a59964c + 67e9438
commit a8c7a79
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 78 deletions.
diff --git a/apps/supex.dev/app/docs/NavBar.tsx b/apps/supex.dev/app/docs/NavBar.tsx
@@ -22,7 +22,7 @@ export default function NavBar({ pages }: Props) {
   return (
     <>
       <aside
-        className={`py-5 fixed z-5 max-lg:px-5 max-lg:rounded-md max-lg:inset-x-2.5 max-lg:bg-slate-800 lg:py-10 lg:w-60 duration-200
+        className={`py-5 max-lg:fixed max-lg:z-5 max-lg:px-5 max-lg:rounded-md max-lg:inset-x-2.5 max-lg:bg-slate-800 lg:py-10 lg:w-60 duration-200
         ${isOpen ? 'max-lg:translate-y-0 max-lg:bottom-2.5' : 'max-lg:translate-y-full max-lg:bottom-0'}`}
       >
         {pages.map(({ path, label, subLinks }) => {

diff --git a/apps/supex.dev/app/docs/OnThisPage.tsx b/apps/supex.dev/app/docs/OnThisPage.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { ChevronRightIcon } from '@heroicons/react/16/solid';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -27,7 +26,7 @@ export default function OnThisPage() {
   }, [pathname]);
 
   return (
-    <nav className="py-5 lg:py-10 text-sm max-xl:hidden w-60">
+    <nav className="py-5 lg:py-10 text-sm max-xl:hidden w-56">
       <h5 className="font-semibold">On This Page</h5>
       <div key={pathname} className="space-y-2.5 mt-5">
         {headings.map(({ id, tag, label }, index) => (

diff --git a/apps/supex.dev/app/docs/installation/codes.ts b/apps/supex.dev/app/docs/installation/codes.ts
@@ -8,10 +8,10 @@ export default {
   },
   package: `{
   "scripts": {
-      "watch:chrome": "supex watch --browser=chrome",
-      "watch:firefox": "supex watch --browser=chrome",
-      "build:chrome": "supex build --browser=chrome",
-      "build:firefox": "supex build --browser=chrome" 
+    "watch:chrome": "supex watch --browser=chrome",
+    "watch:firefox": "supex watch --browser=chrome",
+    "build:chrome": "supex build --browser=chrome",
+    "build:firefox": "supex build --browser=chrome" 
   }
 }`,
   typescript: {

diff --git a/apps/supex.dev/app/docs/layout.tsx b/apps/supex.dev/app/docs/layout.tsx
@@ -23,14 +23,16 @@ const pages = [
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <main className="paging lg:flex lg:max-w-7xl justify-between">
-      <NavBar pages={pages} />
-      <div className="lg:pl-60 flex-1">
+    <main className="paging">
+      <div className="lg:pl-60">
         <article className="prose max-lg:prose-sm mx-auto prose-slate prose-h2:border-b prose-h2:border-slate-800 prose-h2:pb-1 prose-h1:font-bold py-5 lg:py-10 lg:mx-10 prose-invert prose-code:px-1 prose-code:rounded prose-code:my-0 prose-code:bg-slate-800/75 prose-code:border prose-code:border-slate-800 prose-a:no-underline prose-a:text-brand-600 hover:prose-a:text-brand-400 prose-code:inline-flex prose-code:items-center prose-code:justify-center prose-a:duration-150 prose-code:before:content-none prose-code:after:*:content-none">
           {children}
         </article>
       </div>
-      <OnThisPage />
+      <div className="paging justify-between w-full top-16 left-1/2 lg:flex lg:fixed lg:-translate-x-1/2 lg:max-w-7xl -z-5">
+        <NavBar pages={pages} />
+        <OnThisPage />
+      </div>
     </main>
   );
 }
diff --git a/apps/supex.dev/app/layout.tsx b/apps/supex.dev/app/layout.tsx
@@ -1,4 +1,4 @@
-import { LogoText } from 'components/Logos';
+import { LogoMark, LogoText } from 'components/Logos';
 import type { Metadata } from 'next';
 import { Inter, JetBrains_Mono } from 'next/font/google';
 import Link from 'next/link';
@@ -32,7 +32,8 @@ export default function RootLayout({
         <header className="fixed top-0 border-b z-5 border-slate-800/75 w-full backdrop-blur-sm">
           <div className="h-16 paging flex justify-between items-center">
             <Link href="/" className="flex items-center">
-              <LogoText className="w-16 lg:w-20 contrast-125 brightness-150" />
+              <LogoText className="w-20 max-lg:hidden contrast-125 brightness-150" />
+              <LogoMark className="w-10 lg:hidden contrast-125 brightness-125" />
             </Link>
             <div className="space-x-5">
               {links.map(({ name, href }) => (