✨ feat: 背景をグラデーションにする

uyupun · Jan 29, 2024 · 8e5dff0 · 8e5dff0
1 parent b56f0d4
commit 8e5dff0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -6,6 +6,8 @@ import { cica } from '@/styles/font';
 import type { AppProps } from 'next/app';
 import type { FC } from 'react';
 
+import '@/styles/layout.css';
+
 const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
   return (
     <>

diff --git a/src/styles/layout.css.ts b/src/styles/layout.css.ts
@@ -0,0 +1,11 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  minHeight: '100dvh',
+  background: 'linear-gradient(to bottom, #0078B7 0, #001E43 667px, #001E43 100%)',
+  '@media': {
+    'screen and (min-width: 768px)': {
+      background: 'linear-gradient(to bottom, #0078B7 0, #001E43 1024px, #001E43 100%)',
+    },
+  },
+});