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 components;
@tailwind utilities;
:root {
--font-serif: "Instrument Serif", serif;
}
body {
font-family: var(--font-sans), sans-serif;
}
.homeBtn {
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,

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

13
tailwind.config.ts
View File

@ -1,4 +1,5 @@
import type { Config } from "tailwindcss";
import { fontFamily } from 'tailwindcss/defaultTheme';
const config = {
darkMode: ["class"],
@ -23,9 +24,9 @@ const config = {
'screen-small': '100svh',
},
fontFamily: {
sans: ['var(--font-geist-sans)'],
serif: ['var(--font-serif)'],
mono: ['var(--font-geist-mono)'],
sans: ['var(--font-geist-sans)', ...fontFamily.sans],
serif: ['var(--font-serif)', ...fontFamily.serif],
mono: ['var(--font-geist-mono)', ...fontFamily.mono],
},
colors: {
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
export default config