From a863466b94fd7c894eae7cf3ff0834c530936ddf Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra Date: Wed, 12 Mar 2025 15:26:50 +0700 Subject: [PATCH] fix: header nav all style --- public/assets/css/bootstrap.min.css | 17 ++++++++--------- public/assets/css/demo-slick/demo-slick.css | 3 --- public/assets/css/style.css | 2 -- src/app/(main)/layout.tsx | 21 +++++++++++++++++---- src/app/globals.css | 1 - src/components/Header.tsx | 8 ++++---- src/components/HeaderNav.tsx | 8 ++++---- tailwind.config.ts | 4 ++++ 8 files changed, 37 insertions(+), 27 deletions(-) diff --git a/public/assets/css/bootstrap.min.css b/public/assets/css/bootstrap.min.css index 20c4785..f926694 100644 --- a/public/assets/css/bootstrap.min.css +++ b/public/assets/css/bootstrap.min.css @@ -47,8 +47,9 @@ --bs-black-rgb: 0, 0, 0; --bs-body-color-rgb: 33, 37, 41; --bs-body-bg-rgb: 255, 255, 255; - --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", - "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --bs-font-sans-serif: + system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); @@ -70,7 +71,6 @@ } body { margin: 0; - font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); @@ -172,10 +172,7 @@ address { font-style: normal; line-height: inherit; } -ol, -ul { - padding-left: 2rem; -} + dl, ol, ul { @@ -2535,7 +2532,8 @@ textarea.form-control.is-valid { .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] { padding-right: 4.125rem; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), + background-image: + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-position: right 0.75rem center, @@ -2634,7 +2632,8 @@ textarea.form-control.is-invalid { .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] { padding-right: 4.125rem; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), + background-image: + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-position: right 0.75rem center, diff --git a/public/assets/css/demo-slick/demo-slick.css b/public/assets/css/demo-slick/demo-slick.css index f013e1a..bfb0386 100644 --- a/public/assets/css/demo-slick/demo-slick.css +++ b/public/assets/css/demo-slick/demo-slick.css @@ -1,6 +1,4 @@ .theme-slick { - --font-global: "Plus Jakarta Sans", sans-serif; - --font-alt: "Plus Jakarta Sans", sans-serif; --section-padding-y: 50px; --color-teal-1: #64b3b4; --color-dark-1: #1e2432; @@ -75,7 +73,6 @@ --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1); --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15); color: var(--color-dark-1); - font-family: var(--font-global); font-size: 17px; font-weight: 400; line-height: 1.725; diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 71f815e..aff3e25 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -746,7 +746,6 @@ video { body { color: var(--color-dark-1); - font-family: var(--font-global); font-size: 18px; font-weight: 400; letter-spacing: normal; @@ -3835,7 +3834,6 @@ a.logo:hover { .inner-nav ul { margin: auto; font-size: 17px; - font-weight: 500; text-align: center; letter-spacing: 0; line-height: 1.3; diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index bba8bcd..df7f1cd 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -8,14 +8,27 @@ import { getDefaultMetadata } from "@/utils/metadata"; import "@public/assets/css/styles.css"; import "jarallax/dist/jarallax.min.css"; import { Metadata } from "next"; -import { Roboto } from "next/font/google"; +import { Roboto, Noto_Sans } from "next/font/google"; import "photoswipe/dist/photoswipe.css"; import "react-modal-video/css/modal-video.css"; import "swiper/css"; import "swiper/css/effect-fade"; import "tippy.js/dist/tippy.css"; -const roboto = Roboto({ subsets: ["latin"] }); +const roboto = Roboto({ + weight: ["400", "500", "600", "700", "800"], + style: ["normal", "italic"], + subsets: ["latin"], + display: "swap", + variable: "--font-roboto", +}); +const notoSans = Noto_Sans({ + weight: ["400", "500", "600"], + style: ["normal", "italic"], + subsets: ["latin"], + display: "swap", + variable: "--font-noto-sans", +}); export async function generateMetadata(): Promise { const metadata = await getDefaultMetadata(); @@ -28,9 +41,9 @@ export default function MainLayout({ children: React.ReactNode; }>) { return ( - + - +
diff --git a/src/app/globals.css b/src/app/globals.css index fbd2cb1..70ed84f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -33,7 +33,6 @@ body { color: var(--foreground); background: var(--background); - font-family: Arial, Helvetica, sans-serif; } @layer components { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index cd2f247..ebe6f35 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -11,8 +11,8 @@ const shareIcons: Record = { phone: { link: "tel:+15208036644", dom: ( - - Phone + + Phone (520) 803-6644 ), @@ -20,7 +20,7 @@ const shareIcons: Record = { facebook: { link: "https://www.facebook.com/p/Cochise-Oncology-61556262839823", dom: ( - + Facebook @@ -29,7 +29,7 @@ const shareIcons: Record = { linkedin: { link: "https://linkedin.com/company/cochise-oncology", dom: ( - + Linkedin diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx index ec96ccc..46ff8f5 100644 --- a/src/components/HeaderNav.tsx +++ b/src/components/HeaderNav.tsx @@ -71,7 +71,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n {link.text}
    {link.child.map((subLink: any, subLinkIdx: number) => ( @@ -84,7 +84,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n toggleMobileMenu()} - className="!text-[14px] !text-white hover:!text-extColorPrimary3 !transition-all !duration-500" + className="!text-[14px] !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 !transition-all !duration-500" > {subLink?.text} @@ -93,7 +93,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n <> setIsSubDropdownOpen(`${index}-${subLinkIdx}`)} > {subLink.text} @@ -107,7 +107,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
  • toggleMobileMenu()} > {subLink2?.text} diff --git a/tailwind.config.ts b/tailwind.config.ts index c029df4..eda04f6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -8,6 +8,10 @@ export default { ], theme: { extend: { + fontFamily: { + fontMain: ["var(--font-noto-sans)"], + fontSecondary: ["var(--font-roboto)"], + }, colors: { background: "var(--background)", foreground: "var(--foreground)",