Fonts (#100)

* Change primary colour * Change fonts * font options * font selection confirmed --------- Co-authored-by: Timothy Armes <tim@timothyarmes.com>
2026-07-22 20:16:57 +00:00 · 2023-07-17 20:10:06 +02:00
parent d8b9a0ced4
commit 1f0077b1a8
14 changed files with 81 additions and 31 deletions
@@ -8,7 +8,7 @@ export default function Footer() {

  return (
    <footer
-      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-teal-600 px-5 py-2 text-white dark:bg-gray-700"
+      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
      data-test="footer"
    >
      <div>
@@ -53,7 +53,7 @@ const HamburgerMenu = ({
      ref={menuRef}
      className={`fixed right-0 top-0 ${
        menuVisible ? "" : "translate-x-full"
-      } z-[9999] flex bg-teal-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
+      } z-[9999] flex bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
      onMouseEnter={handleMouseEnterMenu}
      onMouseLeave={handleMouseLeaveMenu}
    >
@@ -23,7 +23,9 @@ export default function Navbar() {
            className="text-gray-900 no-underline hover:no-underline dark:text-white"
            href="/"
          >
-            <span className="text-2xl">{t("title")}</span>
+            <span className="font-title text-2xl text-gray-800 dark:text-white">
+              {t("title")}
+            </span>
          </Link>
        </div>
        <div className="pb-2 md:hidden" data-test="mobile-menu">
@@ -38,7 +40,7 @@ export default function Navbar() {
            {links.map(({ title, route }) => (
              <li key={route} className="mr-10 h-full">
                <Link
-                  className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
+                  className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-primary-600"
                  href={route}
                >
                  {title}
@@ -77,7 +77,7 @@ const ContactForm = () => {
            onChange={handleChange}
            type="email"
            id="email"
-            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
            placeholder={t("emailPlaceholder")}
            required
            data-test="email-input"
@@ -95,7 +95,7 @@ const ContactForm = () => {
            onChange={handleChange}
            type="text"
            id="subject"
-            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
            placeholder={t("subjectPlaceholder")}
            required
            data-test="subject-input"
@@ -113,7 +113,7 @@ const ContactForm = () => {
            onChange={handleChange}
            id="message"
            rows={6}
-            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
            placeholder={t("messagePlaceholder")}
            data-test="message-input"
            required
@@ -122,7 +122,7 @@ const ContactForm = () => {
        <button
          disabled={isSending}
          type="submit"
-          className="hover:bg-primary-800 focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 rounded-lg bg-teal-600 px-5 py-3 text-center text-sm font-medium text-white focus:outline-none focus:ring-4 disabled:opacity-25 dark:text-white sm:w-fit"
+          className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
          data-test="submit-button"
        >
          {isSending ? t("sending") : t("sendButton")}
@@ -1,5 +1,5 @@
 import { Analytics } from "@vercel/analytics/react";
-import { Inter } from "next/font/google";
+import { Inter, Julius_Sans_One } from "next/font/google";
 import { useLocale } from "next-intl";
 import { getTranslator } from "next-intl/server";
 import { notFound } from "next/navigation";
@@ -10,7 +10,12 @@ import "@/css/globals.css";
 import Providers from "./providers";
 import TestableLayout from "./components/TestableLayout";

-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const title = Julius_Sans_One({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-title",
+});

 export async function generateMetadata({
  params: { locale },
@@ -50,8 +55,8 @@ export default async function RootLayout({
  }

  return (
-    <html lang={locale}>
-      <body className={inter.className}>
+    <html lang={locale} className={`${inter.variable} ${title.variable}`}>
+      <body>
        <Providers>
          <TestableLayout locale={locale} messages={messages}>
            {children}
@@ -18,7 +18,7 @@ export default function Home() {
        />
      </div>
      <div className="z-10 text-center text-white">
-        <h1 className="p-5 text-5xl" data-test="header1">
+        <h1 className="p-5 font-title text-5xl" data-test="header1">
          {t("title")}
        </h1>
        <h2 className="p-5 text-3xl">{t("purpose")}</h2>
@@ -33,7 +33,7 @@ export default function Home() {
        </h3>
        <Link
          href="/tournois"
-          className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800"
+          className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
        >
          {t("mapLink")}
        </Link>
@@ -19,7 +19,7 @@ export default function About() {
        <p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
          {t.rich("p2", {
            homeLink: (chunks) => (
-              <Link href="/" className="text-teal-600">
+              <Link href="/" className="text-primary-600">
                {chunks}
              </Link>
            ),
@@ -34,7 +34,7 @@ export default function About() {
        >
          {t("thanksTitle")}
        </h3>
-        <ul className="mb-4 text-center text-teal-600">
+        <ul className="mb-4 text-center text-primary-600">
          <li>
            <Link href="https://github.com/timothyarmes" target="_blank">
              timothyarmes
@@ -60,13 +60,13 @@ export default function About() {
        <p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
          {t.rich("techInfo", {
            homeLink: (chunks) => (
-              <Link href="/" className="text-teal-600">
+              <Link href="/" className="text-primary-600">
                {chunks}
              </Link>
            ),
          })}
        </p>
-        <ul className="mb-4 flex justify-around text-teal-600">
+        <ul className="mb-4 flex justify-around text-primary-600">
          <li>
            <Link href="https://nextjs.org/" target="_blank">
              NextJS
@@ -91,7 +91,7 @@ export default function About() {
        <p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
          {t("techWith")}
        </p>
-        <ul className="mb-4 flex justify-around text-teal-600">
+        <ul className="mb-4 flex justify-around text-primary-600">
          <li>
            <Link href="https://leafletjs.com/" target="_blank">
              Leaflet
@@ -109,7 +109,7 @@ export default function About() {
              <Link
                href="https://github.com/TheRealOwenRees/echecsfrance"
                target="_blank"
-                className="text-teal-600"
+                className="text-primary-600"
              >
                {chunks}
              </Link>
@@ -25,7 +25,7 @@ const ScrollToTopButton = () => {

  return (
    <button
-      className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
+      className={`${scrollToTopButtonClass} z-10 text-2xl text-primary-900 dark:text-white`}
      data-test="scroll-to-top-button"
    >
      <FaArrowUp
@@ -33,7 +33,7 @@ const TimeControlFilters = () => {
          <label>
            <input
              type="checkbox"
-              className="mr-2"
+              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
              checked={atom[0]}
              onChange={() => atom[1](!atom[0])}
            />
@@ -317,7 +317,7 @@ export default function TournamentMap() {

      <div className="flex items-center justify-center lg:hidden">
        <button
-          className="p-3 text-teal-900 dark:text-white"
+          className="p-3 text-primary-900 dark:text-white"
          onClick={onScrollToTable}
        >
          <FaAngleDoubleDown />
@@ -61,7 +61,7 @@ export default function TournamentTable() {
          <label>
            <input
              type="checkbox"
-              className="mr-2"
+              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
              checked={syncVisible}
              onChange={() => setSyncVisible(!syncVisible)}
            />
@@ -71,7 +71,7 @@ export default function TournamentTable() {
          <label>
            <input
              type="checkbox"
-              className="mr-2"
+              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
              checked={normsOnly}
              onChange={() => setNormsOnly(!normsOnly)}
            />
@@ -92,19 +92,19 @@ export default function TournamentTable() {
      >
        <thead>
          <tr>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
              {t("date")}
            </th>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
              {t("town")}
            </th>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
              {t("tournament")}
            </th>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
              {t("timeControl")}
            </th>
-            <th className="sticky top-0 w-[50px] bg-teal-600 p-3 text-white dark:bg-gray-600"></th>
+            <th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600"></th>
          </tr>
        </thead>

@@ -38,6 +38,7 @@
      },
      "devDependencies": {
        "@swc-jotai/react-refresh": "^0.0.8",
+        "@tailwindcss/forms": "^0.5.4",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^14.0.0",
        "@types/leaflet": "^1.9.3",
@@ -804,6 +805,18 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.4.tgz",
+      "integrity": "sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz",
@@ -5070,6 +5083,15 @@
        "node": ">=4"
      }
    },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -43,6 +43,7 @@
  },
  "devDependencies": {
    "@swc-jotai/react-refresh": "^0.0.8",
+    "@tailwindcss/forms": "^0.5.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/leaflet": "^1.9.3",
@@ -8,6 +8,26 @@ module.exports = {
  ],
  theme: {
    extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+        title: ['var(--font-title)'],
+      },
+      colors: {
+        'primary': {
+          DEFAULT: '#0086C7',
+          50: '#A8E3FF',
+          100: '#94DCFF',
+          200: '#6BCFFF',
+          300: '#42C1FF',
+          400: '#1AB4FF',
+          500: '#00A1F0',
+          600: '#0086C7',
+          700: '#00608F',
+          800: '#003A57',
+          900: '#00151F',
+          950: '#000203'
+        },
+      },
      minHeight: {
        // We use 100svh, falling back to vh for old browsers
        // The 144px is for the header and footer
@@ -18,5 +38,5 @@ module.exports = {
      },
    },
  },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')],
 };