Adjust layout

src/components/Layout.jsx

@@ -146,7 +146,8 @@ export function Layout({ children, title, tableOfContents }) {
   return (
     <>
       <HeroPattern/>
-      <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12 lg:ml-72 xl:ml-80">
+      <div className="relative mx-auto flex max-w-8xl justify-center xl:px-8 lg:ml-52 xl:ml-60">
+      {/*<div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12 lg:ml-72 xl:ml-80">*/}
         <motion.header
             layoutScroll
             className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"

src/components/NavigationDocs.jsx

@@ -79,7 +79,7 @@ function NavigationGroup({ group, className }) {
         <li className={clsx('relative mt-6', className)}>
             <motion.h2
                 layout="position"
-                className="text-s font-semibold text-zinc-900 dark:text-white"
+                className="text-s font-semibold text-zinc-900 dark:text-gray-300"
             >
                 {group.title}
             </motion.h2>

src/styles/tailwind.css

@@ -16,7 +16,7 @@
 
 .imagewrapper {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  border-radius: 6px;
+  border-radius: 4px;
   overflow:hidden;
 }
 

tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
     fontSize: {
       '2xs': ['0.75rem', { lineHeight: '1.25rem' }],
       xs: ['0.8125rem', { lineHeight: '1.5rem' }],
-      sm: ['0.875rem', { lineHeight: '1.5rem' }],
+      sm: ['1rem', { lineHeight: '1.5rem' }],
       base: ['1rem', { lineHeight: '1.75rem' }],
       lg: ['1.125rem', { lineHeight: '1.75rem' }],
       xl: ['1.25rem', { lineHeight: '1.75rem' }],
@@ -27,7 +27,7 @@ module.exports = {
       maxWidth: {
         lg: '33rem',
         '2xl': '40rem',
-        '3xl': '50rem',
+        '3xl': '55rem',
         '5xl': '66rem',
       },
       opacity: {