feat: update logo font

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-04-17 14:40:16 +07:00
parent 7f6e55e862
commit 931e60f733
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
7 changed files with 32 additions and 17 deletions

View File

@ -2,8 +2,8 @@
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true,
"source.sortMembers": true
"source.fixAll": "explicit",
"source.organizeImports": "explicit",
"source.sortMembers": "explicit"
}
}

View File

@ -1,7 +1,8 @@
import Banner from 'components/banner';
import Navbar from 'components/layout/navbar';
import { GeistSans } from 'geist/font';
import { GeistSans } from 'geist/font/sans';
import { ensureStartsWith } from 'lib/utils';
import { League_Spartan } from 'next/font/google';
import { ReactNode, Suspense } from 'react';
import './globals.css';
@ -12,6 +13,12 @@ const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
const league_spartan = League_Spartan({
subsets: ['latin'],
variable: '--font-league-spartan',
display: 'swap'
});
export const metadata = {
metadataBase: new URL(baseUrl),
title: {
@ -34,7 +41,7 @@ export const metadata = {
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={GeistSans.variable}>
<html lang="en" className={`${GeistSans.variable} ${league_spartan.variable}`}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<header>
<Banner />

View File

@ -20,8 +20,10 @@ export default async function Footer() {
<div className="mx-auto flex w-full max-w-7xl flex-row flex-wrap items-start gap-6 px-6 py-12 text-sm md:gap-12 md:px-4 min-[1320px]:px-0">
<div className="flex flex-col gap-1">
<Link className="flex items-center text-white md:pt-1" href="/">
<LogoSquare />
<span className="uppercase">{SITE_NAME}</span>
<LogoSquare sm />
<span className="font-league-spartan text-xl leading-tight tracking-tight">
{SITE_NAME}
</span>
</Link>
<a href={`tel:${8882422605}`} className="ml-4 text-white">
(888) 242-2605

View File

@ -15,21 +15,21 @@ export default async function Navbar() {
const menu = await getMenu('main-menu');
return (
<nav className="relative flex items-center justify-between p-4 lg:px-6">
<div className="block flex-none md:hidden">
<nav className="relative mb-4 flex items-center justify-between bg-white pb-3 pt-4 md:pb-0 dark:bg-neutral-900">
<div className="block flex-none pl-4 md:hidden">
<Suspense fallback={null}>
<MobileMenu menu={menu} />
</Suspense>
</div>
<div className="flex w-full flex-col">
<div className="flex w-full items-center">
<div className="flex w-full items-center pr-4 md:px-4">
<div className="flex w-full md:w-1/3">
<Link
href="/"
className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
>
<LogoSquare />
<div className="flex-none text-sm font-medium uppercase md:hidden lg:block lg:text-lg">
<div className="flex-none font-league-spartan text-xl font-semibold tracking-tight text-dark md:hidden md:text-2xl lg:block lg:text-3xl lg:leading-tight dark:text-white">
{SITE_NAME}
</div>
</Link>
@ -50,8 +50,8 @@ export default async function Navbar() {
</div>
{menu.length ? (
<div className="hidden w-full items-center justify-center border-b py-3 md:flex">
<ul className="hidden gap-10 text-sm font-medium md:flex md:items-center lg:gap-16">
<div className="hidden w-full items-center justify-center border-b px-4 pb-3 pt-4 md:flex">
<ul className="hidden gap-8 text-sm font-medium md:flex md:items-center lg:gap-16">
{menu.map((item: Menu) => (
<li key={item.title}>
<Link

View File

@ -1,10 +1,15 @@
import clsx from 'clsx';
import LogoIcon from './icons/logo';
export default function LogoSquare() {
export default function LogoSquare({ sm }: { sm?: boolean }) {
return (
<div className={clsx('flex h-[40px] w-[40px] flex-none items-center justify-center')}>
<LogoIcon className="h-[20px] w-[20px] lg:h-[24px] lg:w-[24px]" />
<LogoIcon
className={clsx('h-[20px] w-[20px]', {
'lg:h-[26px] lg:w-[26px]': !sm,
'lg:h-[20px]lg:w-[20px]': sm
})}
/>
</div>
);
}

View File

@ -26,7 +26,7 @@ const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute -right-10 z-10 mt-2 w-72 max-w-lg px-4 sm:px-0 lg:right-0">
<div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 text-black shadow-lg ring-1 ring-black/5">
<div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 text-black shadow-xl ring-1 ring-black/5">
<span className="text-sm font-medium">My Account</span>
<a
href="#"

View File

@ -11,7 +11,8 @@ module.exports = {
secondary: '#12baa9'
},
fontFamily: {
sans: ['var(--font-geist-sans)']
sans: ['var(--font-geist-sans)'],
'league-spartan': ['var(--font-league-spartan)']
},
keyframes: {
fadeIn: {