Browse Source
feat: フォントを指定（#136） (#137)
#136 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: https://git.miteruzo.com/miteruzo/btrc-hub/pulls/137feature/139
2 changed files with 35 additions and 28 deletions
Unified View
Diff Options
-
+1 -0frontend/src/index.css
-
+34 -28frontend/tailwind.config.js
+ 1
- 0
frontend/src/index.css
View File
| @@ -7,6 +7,7 @@ | |||||
| body | body | ||||
| { | { | ||||
| @apply overflow-x-clip; | @apply overflow-x-clip; | ||||
| @apply font-jpSans; | |||||
| } | } | ||||
| a | a | ||||
+ 34
- 28
frontend/tailwind.config.js
View File
| @@ -2,35 +2,41 @@ | |||||
| import type { Config } from 'tailwindcss' | import type { Config } from 'tailwindcss' | ||||
| import { DARK_COLOUR_SHADE, | 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) | const colours = Object.values (TAG_COLOUR) | ||||
| export default { | 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 | |||||