Merge pull request #190 from JohnsonMao/style/marathon

style: marathon style and add FAQ text
daodaoedu · Dec 22, 2024 · f589763 · f589763
2 parents 9e2067e + b6951f4
commit f589763
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 40 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/components/Marathon/Faq/index.jsx b/components/Marathon/Faq/index.jsx
@@ -144,6 +144,16 @@ export default function Faq() {
       >
         在申請期間每人只能提交一件學習計畫，待公告入選者後，使用者可新增至多三個學習計劃。
       </Accordion>
+      <Accordion
+        title="怎麼樣才算是有申請呢？"
+      >
+        按下最後的提交按鈕即算申請。早鳥票只需要於12/31 23:59 前點擊「提交」，就可以享有早鳥優惠。即使提交後，在申請截止前都可以繼續修改計畫，計畫將會自動儲存。
+      </Accordion>
+      <Accordion
+        title="如果申請時一起團報的朋友沒有入圍，還可以享有團報費用嗎？"
+      >
+        可以唷！我們會以申請時選擇的資格為主。
+      </Accordion>
     </StyledGroup>
   );
 }
diff --git 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 = () => {
     <nav className="sticky z-10 bg-basic-100 text-nowrap overflow-x-auto" style={{ top: `${scrollPaddingTop}px` }}>
       <ul className="max-w-[750px] mx-auto flex justify-between gap-4">
         {navItems.map((item) => (
-          <li key={item.label}>
+          <li key={item.label} className="shrink-0">
             {item.disabled ? (
-              <span className="block text-basic-300 cursor-not-allowed body-sm font-medium p-4">
+              <span className="block p-4 text-nowrap text-basic-300 cursor-not-allowed body-sm font-medium">
                 {item.label}
               </span>
             ) : (
@@ -235,7 +237,7 @@ const Nav = () => {
                 target={item.external ? '_blank' : '_self'}
                 rel={item.external ? 'noopener noreferrer' : ''}
                 className={cn(
-                  'relative block text-primary-base body-sm font-medium p-4 flex items-center gap-1',
+                  'relative p-4 flex items-center gap-1 text-primary-base body-sm font-medium text-nowrap',
                   item.active && 'before:content-[""] before:absolute before:bottom-2.5 before:left-4 before:right-4 before:h-[2px] before:bg-primary-base',
                 )}
               >
@@ -252,7 +254,7 @@ const Nav = () => {
 
 const Section = ({ title, id, className, children, withContainer = true }) => (
   <section className={cn("py-8 px-6 md:py-[100px] body-md text-basic-400", className)}>
-    <div className={cn(withContainer && "max-w-[750px] mx-auto lg:mr-12 min-[1100px]:mr-24 min-[1180px]:mr-auto")}>
+    <div className={cn(withContainer && "max-w-[750px] mx-auto lg:ml-56 lg:mr-12 xl:mx-auto")}>
       {title && <h2 className="heading-md text-basic-500" id={id}>{title}</h2>}
       {children}
     </div>

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)" },
           },
         },
       });