Commit (#45)

2026-09-21 18:13:29 +00:00 · 2023-12-21 12:27:12 +01:00
parent c18ec51a4a
commit c5f75116d3
4 changed files with 14 additions and 6 deletions
@@ -3,7 +3,7 @@ import assertNever from 'assert-never';
 import Script from 'next/script';
 import colors from 'tailwindcss/colors';

-import { fonts } from '@/fonts';
+import { fonts, ibmPlexMono } from '@/fonts';
 import { getSpaceContent } from '@/lib/api';
 import { hexToRgb, shadesOfColor } from '@/lib/colors';
 import { getContentSecurityPolicyNonce } from '@/lib/csp';
@@ -65,6 +65,7 @@ export default async function SpaceRootLayout(props: {
            <body
                className={tcls(
                    `${fonts[customization.styling.font].className}`,
+                    `${ibmPlexMono.variable}`,
                    'bg-light',
                    'dark:bg-dark',
                )}
@@ -35,7 +35,6 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
                    'items-center',
                    'justify-start',
                    '[grid-area:1/1]',
-                    /*                     'mb-2', */
                    'text-sm',
                    'gap-2',
                )}
@@ -146,7 +145,6 @@ function CodeHighlightLine(props: {
                'relative',
                'linear-mask-util',
                'ring-2',
-                /*                 'ring-inset', */
                'ring-transparent',
                'hover:ring-dark/2',
                'dark:hover:ring-light/2',
@@ -178,6 +176,7 @@ function CodeHighlightLine(props: {
                <span
                    className={tcls(
                        'table-cell',
+                        'text-sm',
                        'w-[0.01ch]',
                        'text-right',
                        'pr-3',
@@ -186,7 +185,6 @@ function CodeHighlightLine(props: {
                        'left-0',
                        '[background:linear-gradient(to_right,_color-mix(in_srgb,_rgb(var(--light)),_rgb(var(--dark))_3%)_60%,_transparent)]',
                        'dark:[background:linear-gradient(to_right,_color-mix(in_srgb,_rgb(var(--dark)),_rgb(var(--light))_4%)_60%,_transparent)]',
-                        /*                         '[background-color:color-mix(in_oklab,_rgb(var(--light)),_rgb(var(--dark))_97%)]', */
                        withLineNumbers
                            ? [
                                  'before:text-dark/5',
@@ -208,7 +206,7 @@ function CodeHighlightLine(props: {
                ></span>
            ) : null}

-            <span className={tcls('ml-3', 'block')}>
+            <span className={tcls('ml-3', 'block', 'text-sm')}>
                <CodeHighlightTokens tokens={line.tokens} document={document} context={context} />
                {isLast ? null : !withLineNumbers && line.tokens.length === 0 && 0 ? (
                    <span className="ew">{'\u200B'}</span>
@@ -3,6 +3,7 @@ import {
    Inter,
    Fira_Sans_Extra_Condensed,
    IBM_Plex_Serif,
+    IBM_Plex_Mono,
    Lato,
    Merriweather,
    Noto_Sans,
@@ -22,6 +23,13 @@ const inter = Inter({
    preload: false,
 });

+export const ibmPlexMono = IBM_Plex_Mono({
+    weight: ['400'],
+    variable: '--font-mono',
+    style: 'normal',
+    preload: false,
+});
+
 const firaSans = Fira_Sans_Extra_Condensed({
    weight: ['400', '500', '600', '700'],
    variable: '--font-content',
@@ -132,6 +140,7 @@ const abcFavorit = localFont({
 */
 export const fonts: { [fontName in CustomizationFont]: { className: string } } = {
    [CustomizationFont.Inter]: inter,
+    [CustomizationFont.IBMPlexMono]: ibmPlexMono,
    [CustomizationFont.FiraSans]: firaSans,
    [CustomizationFont.IBMPlexSerif]: ibmPlexSerif,
    [CustomizationFont.Lato]: lato,
@@ -36,7 +36,7 @@ const config: Config = {
        extend: {
            fontFamily: {
                sans: ['var(--font-content)'],
-                /*  mono: ['var(--font-mono)'], */ // TODO: try Cartograph
+                mono: ['var(--font-mono)'],
            },

            colors: {