Style PR (#34)

* codeblock styling

* fix hover rounding

* checkpoint layout

* improve highlight algo

* v1 syntax theme

* fix table cell add title style

* color tweaks

* opaque sticky numbers

* fix collection spaces

* card aspect fix

* adding back full-width tables

* num tabs

* Add v1 more table types

* format

src/components/Header/CollectionSpacesDropdown.tsx

@@ -17,6 +17,7 @@ export function CollectionSpacesDropdown(props: {
                 <div
                     {...buttonProps}
                     className={tcls(
+                        'justify-self-start',
                         'flex',
                         'flex-row',
                         'items-center',
@@ -24,8 +25,9 @@ export function CollectionSpacesDropdown(props: {
                         'rounded-full',
                         'px-3',
                         'py-1',
-                        'bg-header-background-400',
-                        'text-header-link-500',
+                        'bg-dark/2',
+                        'dark:bg-light/2',
+                        /*                         'text-header-link-500', */
                     )}
                 >
                     {space.title}

src/components/Header/Dropdown.tsx

@@ -121,7 +121,9 @@ export function DropdownMenuItem(props: {
                 'px-3',
                 'py-1',
                 'rounded',
-                active ? ['bg-primary-50'] : ['hover:bg-dark/2', 'dark:hover:bg-light/2'],
+                active
+                    ? ['bg-primary-100', 'dark:bg-light/2']
+                    : ['hover:bg-dark/2', 'dark:hover:bg-light/2'],
             )}
         >
             {children}

src/components/Header/Header.tsx

@@ -58,8 +58,8 @@ export function Header(props: {
                 className={tcls(
                     'gap-8',
                     'grid',
-                    'grid-cols-[min-content_min-content]',
-                    'sm:grid-cols-[min-content_1fr_min-content]',
+                    'grid-flow-col',
+                    'auto-cols-[auto_auto_1fr_auto]',
                     'h-16',
                     'items-center',
                     'align-center',
@@ -70,13 +70,15 @@ export function Header(props: {
                 )}
             >
                 <HeaderLogo collection={collection} space={space} customization={customization} />
-                {collection ? (
-                    <CollectionSpacesDropdown
-                        space={space}
-                        collection={collection}
-                        collectionSpaces={collectionSpaces}
-                    />
-                ) : null}
+                <span>
+                    {collection ? (
+                        <CollectionSpacesDropdown
+                            space={space}
+                            collection={collection}
+                            collectionSpaces={collectionSpaces}
+                        />
+                    ) : null}
+                </span>
                 <HeaderLinks>
                     {customization.header.links.map((link, index) => {
                         return (

src/components/Header/HeaderLinks.tsx

@@ -11,10 +11,12 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
         <div
             className={tcls(
                 '@container/headerlinks',
+                'w-full',
                 'hidden',
-                'sm:flex',
+                'sm:inline-flex',
                 'justify-end',
                 'h-full',
+                'tracking-[-0.02em]',
                 //hide children
                 `[&>*]:hidden`,
                 //hide each child per container breakpoint