From 597e69db2136249f3096b85ef62810cf6d84be45 Mon Sep 17 00:00:00 2001 From: miteruzo Date: Sun, 28 Sep 2025 15:06:45 +0900 Subject: [PATCH 1/2] #136 --- frontend/src/index.css | 1 + frontend/tailwind.config.js | 62 ++++++++++++++++++++----------------- 2 files changed, 35 insertions(+), 28 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 052faac..96489cd 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -7,6 +7,7 @@ body { @apply overflow-x-clip; + @apply font-jpSans; } a diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index a56efa4..dd99906 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -2,35 +2,41 @@ import type { Config } from 'tailwindcss' import { DARK_COLOUR_SHADE, - LIGHT_COLOUR_SHADE, - TAG_COLOUR } from './src/consts' + LIGHT_COLOUR_SHADE, + TAG_COLOUR } from './src/consts' const colours = Object.values (TAG_COLOUR) export default { - content: ['./src/**/*.{html,js,ts,jsx,tsx}'], - safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`), - ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`), - ...colours.map (c => `dark:text-${ c }-${ DARK_COLOUR_SHADE }`), - ...colours.map (c => `dark:hover:text-${ c }-${ DARK_COLOUR_SHADE - 200 }`)], - theme: { - extend: { - animation: { - 'rainbow-scroll': 'rainbow-scroll .25s linear infinite', - }, - colors: { - red: { - 925: '#5f1414', - 975: '#230505', - } - }, - keyframes: { - 'rainbow-scroll': { - '0%': { backgroundPosition: '0% 50%' }, - '100%': { backgroundPosition: '200% 50%' }, - }, - }, - } - }, - plugins: [], -} satisfies Config + content: ['./src/**/*.{html,js,ts,jsx,tsx}'], + safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`), + ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`), + ...colours.map (c => `dark:text-${ c }-${ DARK_COLOUR_SHADE }`), + ...colours.map (c => `dark:hover:text-${ c }-${ DARK_COLOUR_SHADE - 200 }`)], + theme: { + extend: { + animation: { + 'rainbow-scroll': 'rainbow-scroll .25s linear infinite' }, + colors: { + red: { 925: '#5f1414', + 975: '#230505' } }, + keyframes: { + 'rainbow-scroll': { + '0%': { backgroundPosition: '0% 50%' }, + '100%': { backgroundPosition: '200% 50%' } } }, + fontFamily: { + jpSans: ['Noto Sans JP', + 'Hiragino Kaku Gothic ProN', + 'ヒラギノ角ゴ ProN W3', + 'Yu Gothic', + '游ゴシック体', + 'Meiryo', + 'sans-serif'], + jpSerif: ['Noto Serif JP', + 'Hiragino Mincho ProN', + 'ヒラギノ明朝 ProN W3', + 'Yu Mincho', + '游明朝', + 'MS PMincho', + 'serif'] } } }, + plugins: [] } satisfies Config From 6010ad729b0ca94763751ebfbe35351ed48c2333 Mon Sep 17 00:00:00 2001 From: miteruzo Date: Sun, 28 Sep 2025 16:10:19 +0900 Subject: [PATCH 2/2] #136 --- frontend/package-lock.json | 10 ++++++++++ frontend/package.json | 1 + frontend/src/index.css | 5 +++-- frontend/tailwind.config.js | 17 +---------------- 4 files changed, 15 insertions(+), 18 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8096cde..b241081 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "license": "ISC", "dependencies": { + "@fontsource-variable/noto-sans-jp": "^5.2.9", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-switch": "^1.2.5", "@radix-ui/react-toast": "^1.2.14", @@ -947,6 +948,15 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource-variable/noto-sans-jp": { + "version": "5.2.9", + "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-jp/-/noto-sans-jp-5.2.9.tgz", + "integrity": "sha512-osPL5f7dvGDjuMuFwDTGPLG37030D8X5zk+3BWea6txAVDFeE/ZIrKW0DY0uSDfRn9+NiKbiFn/2QvZveKXTog==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 9077da9..747f7ed 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,7 @@ "preview": "vite preview" }, "dependencies": { + "@fontsource-variable/noto-sans-jp": "^5.2.9", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-switch": "^1.2.5", "@radix-ui/react-toast": "^1.2.14", diff --git a/frontend/src/index.css b/frontend/src/index.css index 96489cd..6cfa0bc 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,3 +1,5 @@ +@import "@fontsource-variable/noto-sans-jp"; + @tailwind base; @tailwind components; @tailwind utilities; @@ -7,7 +9,6 @@ body { @apply overflow-x-clip; - @apply font-jpSans; } a @@ -22,7 +23,7 @@ :root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: "Noto Sans JP Variable", system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index dd99906..fddc378 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -23,20 +23,5 @@ export default { keyframes: { 'rainbow-scroll': { '0%': { backgroundPosition: '0% 50%' }, - '100%': { backgroundPosition: '200% 50%' } } }, - fontFamily: { - jpSans: ['Noto Sans JP', - 'Hiragino Kaku Gothic ProN', - 'ヒラギノ角ゴ ProN W3', - 'Yu Gothic', - '游ゴシック体', - 'Meiryo', - 'sans-serif'], - jpSerif: ['Noto Serif JP', - 'Hiragino Mincho ProN', - 'ヒラギノ明朝 ProN W3', - 'Yu Mincho', - '游明朝', - 'MS PMincho', - 'serif'] } } }, + '100%': { backgroundPosition: '200% 50%' } } } } }, plugins: [] } satisfies Config