From 0c1b4f6d8378bb0ec8dc33d534269058aeeaa479 Mon Sep 17 00:00:00 2001 From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com> Date: Sun, 22 Dec 2024 16:35:25 +0800 Subject: [PATCH 1/3] style: add font family --- .eslintrc.js | 4 ++ shared/styles/Global.jsx | 1 - shared/styles/global.css | 2 + shared/styles/theme.js | 1 - shared/styles/themeFactory.js | 3 -- tailwind.config.js | 83 ++++++++++++++++++++++------------- 6 files changed, 58 insertions(+), 36 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index b404be12..fceaddd3 100644 --- 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 index 2f1ccb23..8c6e9ad8 100644 --- 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 index 9e3615b6..55381b48 100644 --- 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:wght@100..900&display=swap'); + :root { scroll-behavior: smooth; } diff --git a/shared/styles/theme.js b/shared/styles/theme.js index 461c91fa..c36e851a 100644 --- 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 index b1aa334e..15631ed5 100644 --- 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 index 3c63e815..64284aca 100644 --- 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)" }, }, }, }); From 8d885ddf10fc5adaea86926a2295c3820587c9e8 Mon Sep 17 00:00:00 2001 From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com> Date: Sun, 22 Dec 2024 16:36:29 +0800 Subject: [PATCH 2/3] style(marathon): adjust margin and nav text nowrap --- pages/learning-marathon/index.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/pages/learning-marathon/index.jsx b/pages/learning-marathon/index.jsx index b823d3d2..0963bf37 100644 --- a/pages/learning-marathon/index.jsx +++ b/pages/learning-marathon/index.jsx @@ -98,8 +98,10 @@ const useScrollPaddingTop = () => { }; handleScrollPaddingTop(); + window.addEventListener('resize', handleScrollPaddingTop); window.addEventListener('storage', handleStorage); return () => { + window.removeEventListener('resize', handleScrollPaddingTop); window.removeEventListener('storage', handleStorage); }; }, []); @@ -224,9 +226,9 @@ const Nav = () => {