style: add font family

daodaoedu · Dec 22, 2024 · 0c1b4f6 · 0c1b4f6
1 parent 9e2067e
commit 0c1b4f6
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 36 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,6 +31,10 @@ module.exports = {
       'error',
       { devDependencies: ['./*.js'] },
     ],
+    '@typescript-eslint/no-var-requires': [
+      'error',
+      { devDependencies: ['./*.js'] },
+    ],
     'import/extensions': [
       'error',
       'ignorePackages',

diff --git a/shared/styles/Global.jsx b/shared/styles/Global.jsx
@@ -127,7 +127,6 @@ const ResetCSS = css`
     padding: 0;
     border: 0;
     font-size: 100%;
-    font: inherit;
     vertical-align: baseline;
     line-height: 1.5;
   }

diff --git a/shared/styles/global.css b/shared/styles/global.css
@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:[email protected]&display=swap');
+
 :root {
   scroll-behavior: smooth;
 }

diff --git a/shared/styles/theme.js b/shared/styles/theme.js
@@ -4,7 +4,6 @@ import { createTheme } from '@mui/material/styles';
 // Create a theme instance.
 const theme = createTheme({
   typography: {
-    fontFamily: ["'-apple-system', 'PingFang TC', 'NotoSans TC', 'sans-serif'"],
     h1: {
       fontSize: '40px',
       fontWeight: '500',

diff --git a/shared/styles/themeFactory.js b/shared/styles/themeFactory.js
@@ -5,9 +5,6 @@ import { createTheme } from '@mui/material/styles';
 const themeFactory = (mode) =>
   createTheme({
     typography: {
-      fontFamily: [
-        "'-apple-system', 'PingFang TC', 'NotoSans TC', 'sans-serif'",
-      ],
       h1: {
         fontSize: '40px',
         fontWeight: '500',

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
 const plugin = require("tailwindcss/plugin");
-const typography = require('@tailwindcss/typography');
+const typography = require("@tailwindcss/typography");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -14,6 +15,9 @@ module.exports = {
     "./shared/**/*.{jsx,tsx}",
   ],
   theme: {
+    fontFamily: {
+      sans: ["Noto Sans TC", ...defaultTheme.fontFamily.sans],
+    },
     extend: {
       colors: {
         primary: {
@@ -75,77 +79,94 @@ module.exports = {
       });
 
       /** Animation */
-      const times = ['200', '300', '500', '700', '1100', '1300', '1700', '1900'];
+      const times = [
+        "200",
+        "300",
+        "500",
+        "700",
+        "1100",
+        "1300",
+        "1700",
+        "1900",
+      ];
       times.forEach((time) => {
         addUtilities({
           [`.animate-delay-${time}`]: {
-            '--animation-delay': `${time}ms`,
+            "--animation-delay": `${time}ms`,
           },
         });
       });
       times.forEach((time) => {
         addUtilities({
           [`.animate-duration-${time}`]: {
-            '--animation-duration': `${time}ms`,
+            "--animation-duration": `${time}ms`,
           },
         });
       });
       addUtilities({
         [`.animate-distance-from-right`]: {
-          '--animation-distance': `100%`,
+          "--animation-distance": `100%`,
         },
         [`.animate-distance-from-left`]: {
-          '--animation-distance': `-100%`,
+          "--animation-distance": `-100%`,
         },
       });
       addUtilities({
         [`.animate-fade-in`]: {
-          animation: 'fade-in var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out',
-          '@keyframes fade-in': {
-            '0%': { opacity: 0 },
-            '100%': { opacity: 1 },
+          animation:
+            "fade-in var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out",
+          "@keyframes fade-in": {
+            "0%": { opacity: 0 },
+            "100%": { opacity: 1 },
           },
         },
         [`.animate-fade-out`]: {
-          animation: 'fade-out var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out',
-          '@keyframes fade-out': {
-            '0%': { opacity: 1 },
-            '100%': { opacity: 0 },
+          animation:
+            "fade-out var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out",
+          "@keyframes fade-out": {
+            "0%": { opacity: 1 },
+            "100%": { opacity: 0 },
           },
         },
       });
       addUtilities({
         [`.animate-slide-y-in`]: {
-          animation: 'slide-y-in var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out',
-          '@keyframes slide-y-in': {
-            '0%': { transform: 'translateY(var(--animation-distance, 100%))' },
-            '100%': { transform: 'translateY(0)' },
+          animation:
+            "slide-y-in var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out",
+          "@keyframes slide-y-in": {
+            "0%": { transform: "translateY(var(--animation-distance, 100%))" },
+            "100%": { transform: "translateY(0)" },
           },
         },
         [`.animate-slide-y-out`]: {
-          animation: 'slide-y-out var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out',
-          '@keyframes slide-y-out': {
-            '0%': { transform: 'translateY(0)' },
-            '100%': { transform: 'translateY(var(--animation-distance, 100%))' },
+          animation:
+            "slide-y-out var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out",
+          "@keyframes slide-y-out": {
+            "0%": { transform: "translateY(0)" },
+            "100%": {
+              transform: "translateY(var(--animation-distance, 100%))",
+            },
           },
         },
       });
       addUtilities({
         [`.animate-slide-x-in`]: {
-          animation: 'slide-x-in var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out',
-          '@keyframes slide-x-in': {
-            '0%': { transform: 'translateX(var(--animation-distance, 100%))' },
-            '100%': { transform: 'translateX(0)' },
+          animation:
+            "slide-x-in var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out",
+          "@keyframes slide-x-in": {
+            "0%": { transform: "translateX(var(--animation-distance, 100%))" },
+            "100%": { transform: "translateX(0)" },
           },
         },
       });
       addUtilities({
         [`.animate-oscillate`]: {
-          animation: 'oscillate 3000ms var(--animation-delay, 0ms) ease-in-out infinite',
-          '@keyframes oscillate': {
-            '0%': { transform: 'translateY(0)' },
-            '50%': { transform: 'translateY(-10px)' },
-            '100%': { transform: 'translateY(0)' },
+          animation:
+            "oscillate 3000ms var(--animation-delay, 0ms) ease-in-out infinite",
+          "@keyframes oscillate": {
+            "0%": { transform: "translateY(0)" },
+            "50%": { transform: "translateY(-10px)" },
+            "100%": { transform: "translateY(0)" },
           },
         },
       });