css tweaks and simplifications

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