fix: self-host Google Fonts (Inter, JetBrains Mono) via localFont; fix tailwind border-border color
This commit is contained in:
DevOps
parent
adda6ae880
commit
be6e37b11f
@ -1,23 +1,24 @@
|
||||
import localFont from "next/font/local";
|
||||
import { Inter, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { getDefaultLocale } from "./lib/functions/utils";
|
||||
import { ThemeProvider } from "./lib/providers/theme-provider";
|
||||
import localFont from 'next/font/local';
|
||||
import './globals.css';
|
||||
import { getDefaultLocale } from './lib/functions/utils';
|
||||
import { ThemeProvider } from './lib/providers/theme-provider';
|
||||
|
||||
const mikhak = localFont({
|
||||
src: "lib/fonts/mikhak-v32/variable/Mikhak[DSTY,KSHD,wght].woff2",
|
||||
variable: "--font-mikhak",
|
||||
weight: "100 900",
|
||||
src: 'lib/fonts/mikhak-v32/variable/Mikhak[DSTY,KSHD,wght].woff2',
|
||||
variable: '--font-mikhak',
|
||||
weight: '100 900',
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
const inter = localFont({
|
||||
src: 'lib/fonts/inter/variable/Inter-Variable.woff2',
|
||||
variable: '--font-inter',
|
||||
weight: '100 900',
|
||||
});
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-jetbrains-mono",
|
||||
const jetbrainsMono = localFont({
|
||||
src: 'lib/fonts/jetbrains-mono/variable/JetBrainsMono-Variable.woff2',
|
||||
variable: '--font-jetbrains-mono',
|
||||
weight: '100 800',
|
||||
});
|
||||
|
||||
export default async function RootLayout({
|
||||
@ -28,18 +29,18 @@ export default async function RootLayout({
|
||||
const defaultLocale = await getDefaultLocale();
|
||||
|
||||
return (
|
||||
<html lang={defaultLocale} dir={defaultLocale === "fa" ? "rtl" : "ltr"} suppressHydrationWarning>
|
||||
<html lang={defaultLocale} dir={defaultLocale === 'fa' ? 'rtl' : 'ltr'} suppressHydrationWarning>
|
||||
<body
|
||||
suppressHydrationWarning={true}
|
||||
className={`${mikhak.variable} ${inter.variable} ${jetbrainsMono.variable} relative flex h-full w-full flex-col items-center justify-between antialiased`}
|
||||
className={${mikhak.variable} relative flex h-full w-full flex-col items-center justify-between antialiased}
|
||||
>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
attribute='class'
|
||||
defaultTheme='dark'
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<div className="main flex h-full w-full flex-wrap justify-center">
|
||||
<div className='main flex h-full w-full flex-wrap justify-center'>
|
||||
{children}
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
BIN
src/app/lib/fonts/inter/variable/Inter-Variable.woff2
Normal file
BIN
src/app/lib/fonts/inter/variable/Inter-Variable.woff2
Normal file
Binary file not shown.
Binary file not shown.
@ -1,35 +1,66 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
import type { Config } from 'tailwindcss';
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["var(--font-inter)", "var(--font-mikhak)", "ui-sans-serif", "system-ui"],
|
||||
mono: ["var(--font-jetbrains-mono)", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
|
||||
mikhak: ["var(--font-mikhak)", "ui-sans-serif", "system-ui"],
|
||||
sans: ['var(--font-inter)', 'var(--font-mikhak)', 'ui-sans-serif', 'system-ui'],
|
||||
mono: ['var(--font-jetbrains-mono)', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
|
||||
mikhak: ['var(--font-mikhak)', 'ui-sans-serif', 'system-ui'],
|
||||
},
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
blog: {
|
||||
red: "#FF5480",
|
||||
purple: "#9283E0",
|
||||
orange: "#FFA599",
|
||||
yellow: "#FFD581",
|
||||
violet: "#FE90EC",
|
||||
blue: "#27AEFF",
|
||||
green: "#00DC90",
|
||||
background: "#F9F9Fb",
|
||||
red: '#FF5480',
|
||||
purple: '#9283E0',
|
||||
orange: '#FFA599',
|
||||
yellow: '#FFD581',
|
||||
violet: '#FE90EC',
|
||||
blue: '#27AEFF',
|
||||
green: '#00DC90',
|
||||
background: '#F9F9Fb',
|
||||
text: {
|
||||
default: "#000000",
|
||||
passive: "#9B9B9B",
|
||||
quote: "#9283E0",
|
||||
hover: "#FF5480",
|
||||
default: '#000000',
|
||||
passive: '#9B9B9B',
|
||||
quote: '#9283E0',
|
||||
hover: '#FF5480',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user