NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Tailwind CSS configuration and update global styles

Browse Source 
- Updated Tailwind CSS configuration to include default font families for sans, serif, and mono.
- Removed unused font imports and CSS variables from globals.css.
- Improved layout component by organizing imports and ensuring proper font usage with fallback options.
- Added preload and display settings for the Instrument Serif font.
This commit is contained in:
simplr-sh 2025-01-06 12:06:46 +05:30
parent adf96e516f
commit fba1ccb0ef
3 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/globals.css
View File

@ -1,16 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:wght@400&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--font-serif: "Instrument Serif", serif;
}
body {
font-family: var(--font-sans), sans-serif;
}
.homeBtn { .homeBtn {
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset,

18
app/layout.tsx
View File

@ -1,12 +1,12 @@
import "./globals.css"; import { Analytics } from "@vercel/analytics/react";
import { GeistSans } from 'geist/font/sans';
import 'katex/dist/katex.min.css'; import 'katex/dist/katex.min.css';
import 'mapbox-gl/dist/mapbox-gl.css'; import 'mapbox-gl/dist/mapbox-gl.css';
import { Metadata, Viewport } from "next"; import { Metadata, Viewport } from "next";
import { Toaster } from "sonner";
import { Instrument_Serif } from 'next/font/google'; import { Instrument_Serif } from 'next/font/google';
import { Analytics } from "@vercel/analytics/react"; import { Toaster } from "sonner";
import { Providers } from './providers' import "./globals.css";
import { GeistSans } from 'geist/font/sans'; import { Providers } from './providers';
export const metadata: Metadata = { export const metadata: Metadata = {
metadataBase: new URL("https://mplx.run"), metadataBase: new URL("https://mplx.run"),
@ -43,7 +43,11 @@ export const viewport: Viewport = {
const instrumentSerif = Instrument_Serif({ const instrumentSerif = Instrument_Serif({
weight: "400", weight: "400",
subsets: ["latin"], subsets: ["latin"],
variable: "--font-serif" style: ['normal', 'italic'],
variable: "--font-serif",
preload: true,
display: 'swap',
fallback: ['sans-serif'],
}) })
export default function RootLayout({ export default function RootLayout({
@ -53,7 +57,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={` ${GeistSans.className} ${instrumentSerif.className}`}> <body className={`${GeistSans.variable} ${instrumentSerif.variable} font-sans antialiased`}>
<Providers> <Providers>
<Toaster position="top-center" richColors /> <Toaster position="top-center" richColors />
{children} {children}

13
tailwind.config.ts
View File

@ -1,4 +1,5 @@
import type { Config } from "tailwindcss"; import type { Config } from "tailwindcss";
import { fontFamily } from 'tailwindcss/defaultTheme';
const config = { const config = {
darkMode: ["class"], darkMode: ["class"],
@ -23,9 +24,9 @@ const config = {
'screen-small': '100svh', 'screen-small': '100svh',
}, },
fontFamily: { fontFamily: {
sans: ['var(--font-geist-sans)'], sans: ['var(--font-geist-sans)', ...fontFamily.sans],
serif: ['var(--font-serif)'], serif: ['var(--font-serif)', ...fontFamily.serif],
mono: ['var(--font-geist-mono)'], mono: ['var(--font-geist-mono)', ...fontFamily.mono],
}, },
colors: { colors: {
border: "hsl(var(--border))", border: "hsl(var(--border))",
@ -87,7 +88,11 @@ const config = {
}, },
}, },
}, },
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography"),require("tailwind-scrollbar")], plugins: [
require("tailwindcss-animate"),
require("@tailwindcss/typography"),
require("tailwind-scrollbar")
],
} satisfies Config } satisfies Config
export default config export default config