Merge pull request #368 from uyupun/feat/308_layout

背景をグラデーションにする
uyupun · Feb 6, 2024 · 60151ab · 60151ab
2 parents 953071b + 957a30d
commit 60151ab
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 1080px, #001E43 100%)',
+    },
+  },
+});