fix: css tweaks and simplifications (#290)

* simplifying

* clean

src/app/[...slug]/layout.tsx

@@ -108,19 +108,13 @@ export default async function Layout({ params, children }: Props) {
                         <label
                           className={cn(
                             'mb-2 text-xs font-bold uppercase leading-4',
-                            // "text-gray-500"
                             'text-on-surface-variant/50',
                           )}
                         >
                           Previous
                         </label>
                         <div className="text-xl">
-                          <Link
-                            href={previousPage.url}
-                            // className="text-gray-900 dark:text-gray-300"
-                          >
-                            {previousPage.title}
-                          </Link>
+                          <Link href={previousPage.url}>{previousPage.title}</Link>
                         </div>
                       </div>
                     )}
@@ -129,19 +123,13 @@ export default async function Layout({ params, children }: Props) {
                         <label
                           className={cn(
                             'mb-2 text-xs font-bold uppercase leading-4',
-                            // "text-gray-500"
                             'text-on-surface-variant/50',
                           )}
                         >
                           Next
                         </label>
                         <div className="text-xl">
-                          <Link
-                            href={nextPage.url}
-                            // className="text-gray-900 dark:text-gray-300"
-                          >
-                            {nextPage.title}
-                          </Link>
+                          <Link href={nextPage.url}>{nextPage.title}</Link>
                         </div>
                       </div>
                     )}

src/app/[...slug]/page.tsx

@@ -41,8 +41,8 @@ export default async function Page({ params }: Props) {
   return (
     <>
       <div className="mx-auto max-w-3xl">
-        <div className={cn('post-header mb-4 border-b pb-6', 'border-outline-variant/50')}>
-          <h1 className="mb-4 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
+        <div className={cn('post-header mb-6 border-b pb-4', 'border-outline-variant/50')}>
+          <h1 className="mb-2 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
           {!!doc?.description?.length && (
             <p className={cn('text-base leading-5', 'text-on-surface-variant/50')}>
               {doc.description}

src/app/globals.css

@@ -13,26 +13,10 @@ body {
   font-optical-sizing: auto;
 }
 
-pre,
-code,
-code span {
-  font-family: 'Inconsolata', monospace !important;
-}
-
-/* Inline code */
-:not(pre) > code {
-  @apply bg-surface-container-high rounded-md px-1.5 py-0.5;
-}
-
 /* Start purging... */
 @tailwind components;
 /* Stop purging. */
 
-/* Write your own custom component styles here */
-.btn-blue {
-  @apply bg-primary-container rounded px-4 py-2 font-bold;
-}
-
 /* Start purging... */
 @tailwind utilities;
 /* Stop purging. */
@@ -50,127 +34,7 @@ code span {
 }
 
 .content-container :target {
-  /* <Search />'s h-16 + more spacing */
-  scroll-margin-top: theme('spacing.20');
-}
-
-.content-container ul > li {
-  @apply my-2;
-}
-
-.content-container ul > li:before {
-  content: '—';
-  @apply mr-3 inline-block;
-}
-
-.content-container :is(pre, code) {
-  @apply text-sm;
-}
-
-.content-container pre {
-  @apply mb-8 overflow-hidden overflow-x-auto rounded p-4;
-}
-
-main a {
-  @apply text-primary;
-}
-
-.content-container .heading {
-  @apply block font-bold text-on-surface no-underline hover:underline;
-}
-
-blockquote p {
-  @apply text-on-surface-variant/50;
-}
-
-details {
-  @apply ml-4;
-}
-
-summary {
-  @apply -ml-4 mb-2 cursor-pointer select-none;
-}
-
-table {
-  @apply bg-surface-container-low;
-}
-
-th {
-  @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wide;
-}
-
-thead {
-  /* @apply bg-gray-50 dark:bg-gray-800; */
-  @apply text-on-surface-variant/50;
-}
-
-tbody tr:nth-child(even) {
-  /* @apply bg-white dark:bg-gray-900; */
-  @apply bg-surface;
-}
-
-tbody tr:nth-child(odd) {
-  /* @apply bg-gray-50 dark:bg-gray-800; */
-}
-
-td {
-  @apply px-6 py-4 text-sm;
-}
-
-td:first-child {
-  @apply font-medium;
-}
-
-ul.grid-list > li:before {
-  display: none;
-}
-
-/* #intro-demos {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-around;
-  align-items: center;
-  margin: 2em auto;
-  max-width: 900px;
-}
-#intro-demos .demo-cell {
-  padding-right: 10px;
-}
-
-#intro-demos .demo-cell img.laptop {
-  max-width: 410px;
-}
-
-#intro-demos .demo-cell img {
-  width: 100%;
-  margin-right: 10px;
-}
-
-#intro-demos .demo-cell img.tablet {
-  max-width: 280px;
-}
-
-#intro-demos .demo-cell img.phone {
-  max-width: 90px;
-}
-
-.demo-grid {
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.demo-grid > div:last-of-type:nth-child(odd) {
-  grid-column: 1 / -1;
-} */
-
-.search-item.focus-visible li > div {
-  /* @apply bg-gray-800 text-gray-200; */
-}
-
-.hint p {
-  /* @apply dark:text-gray-500; */
-}
-.hint p.mb-4:last-of-type {
-  margin-bottom: 0;
+  scroll-margin-top: theme('spacing.20'); /* <Search />'s h-16 + more spacing */
 }
 
 /**
@@ -182,23 +46,13 @@ ul.grid-list > li:before {
 code[class*='language-'],
 pre[class*='language-'] {
   background: none;
-  /* color: #e4f0fb;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3); */
-  /* font-family: Menlo, Monaco, 'Courier New', monospace; */
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
   line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 
@@ -215,10 +69,7 @@ pre[class*='language-'] {
   --literal: #fffac2;
   --falsy: #f087bd;
 
-  @apply p-6;
-  @apply my-5;
-  @apply overflow-auto;
-  @apply rounded-lg;
+  @apply my-5 overflow-auto rounded-lg p-6 font-mono text-sm;
 }
 
 :not(pre) > code[class*='language-'],

src/app/layout.tsx

@@ -1,12 +1,13 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Inter, Inconsolata } from 'next/font/google'
 import './globals.css'
 import { svg } from '@/utils/icon'
 import resolveMdxUrl from '@/utils/resolveMdxUrl'
 import { ThemeProvider } from 'next-themes'
 import cn from '@/lib/cn'
 
 const inter = Inter({ subsets: ['latin'] })
+const inconsolata = Inconsolata({ subsets: ['latin'] })
 
 const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL
 const NEXT_PUBLIC_LIBNAME = process.env.NEXT_PUBLIC_LIBNAME

src/components/Codesandbox.tsx

@@ -57,30 +57,15 @@ export default function Codesandbox({
 
       {!hideTitle && (
         <>
-          <h6
-            className={cn(
-              'mt-4 font-bold',
-              // "text-gray-700"
-            )}
-          >
-            {title}
-          </h6>
-          <p
-            className={cn(
-              'mt-1',
-              // "text-gray-700"
-            )}
-          >
-            {description}
-          </p>
+          <h6 className={cn('mt-4 font-bold')}>{title}</h6>
+          <p className={cn('mt-1')}>{description}</p>
           <div className="w-full">
             {tags.map((tag, i) => (
               <span
                 key={i}
                 className={cn(
                   'mt-2 inline-block rounded px-1 py-1 text-xs',
                   i !== tags.length - 1 && 'mr-1',
-                  // 'bg-gray-100 text-gray-500',
                 )}
               >
                 {tag}

src/components/Search/SearchItem.tsx

@@ -40,10 +40,7 @@ function SearchItem({ search, result }: SearchItemProps) {
             // eslint-disable-next-line @next/next/no-img-element
             <img className="max-w-[40%] rounded" src={result.image} alt={result.title} />
           ) : (
-            <Icon
-              icon="enter"
-              // className="text-gray-400"
-            />
+            <Icon icon="enter" />
           )}
         </div>
       </li>

src/components/Search/SearchModal.tsx

@@ -18,10 +18,7 @@ function SearchModal({ search, results, onClose, onChange }: SearchModelProps) {
       <div className="z-100 absolute bottom-20 left-2/4 top-20 w-[500px] max-w-[90%] -translate-x-1/2 transform overflow-y-auto">
         <div className="relative mt-1 rounded-md shadow-sm">
           <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-            <Icon
-              icon="search"
-              // className="text-gray-300"
-            />
+            <Icon icon="search" />
           </div>
           <input
             type="search"

src/components/Search/index.tsx

@@ -58,10 +58,7 @@ function Search() {
             </span>
             <span
               style={{ opacity: 1 }}
-              className={cn(
-                'hidden rounded-md border px-1.5 py-0.5 text-sm leading-5 sm:block',
-                // 'border-gray-300 text-gray-400 dark:border-gray-700',
-              )}
+              className={cn('hidden rounded-md border px-1.5 py-0.5 text-sm leading-5 sm:block')}
             >
               <span className="sr-only">Press </span>
               <kbd className="font-sans">

src/components/Toc.tsx

@@ -31,12 +31,7 @@ function Toc({ toc }: ToCProps) {
 
   return (
     <div className="max-h-(screen-16) sticky top-16 flex flex-col justify-between overflow-y-auto pb-6">
-      <label
-        className={cn(
-          'mb-2 mt-12 text-sm font-semibold uppercase tracking-wide lg:text-xs',
-          // "text-gray-900 dark:text-gray-300"
-        )}
-      >
+      <label className={cn('mb-2 mt-12 text-sm font-semibold uppercase tracking-wide lg:text-xs')}>
         On This Page
       </label>
       {toc.map((item, index) => (

src/components/mdx/Grid.tsx

@@ -12,7 +12,6 @@ export const Grid = ({ children, cols = 4 }: { children: React.ReactNode; cols?:
             ? 'md:grid-cols-2'
             : 'md:grid-cols-1',
       `grid-list gap-4 text-sm`,
-      // 'text-gray-700',
     )}
     style={{ marginBottom: '1rem' }}
   >

src/components/mdx/Hint.tsx

@@ -3,13 +3,7 @@ import { IoDocumentTextOutline } from 'react-icons/io5'
 
 export const Hint = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div
-      className={cn(
-        'hint my-6 overflow-clip rounded-lg px-6 py-4',
-        // 'bg-yellow-100 dark:text-gray-500',
-        'bg-hint-container',
-      )}
-    >
+    <div className={cn('hint my-6 overflow-clip rounded-lg px-6 py-4', 'bg-hint-container')}>
       <p className="mb-2 flex items-center gap-1 text-lg">
         <IoDocumentTextOutline className="text-[125%]" />
         Note