feat: create content layout with emotion

inertia/styles/document.ts

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+import { theme } from './theme';
+
+const documentStyle = css({
+  'html, body, #app': {
+    height: '100svh',
+    width: '100svw',
+    fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+    fontSize: '17px',
+    color: theme.colors.font,
+    backgroundColor: theme.colors.background,
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
+});
+
+export default documentStyle;

inertia/styles/keyframes.ts

@@ -0,0 +1,10 @@
+import { keyframes } from '@emotion/react';
+
+export const fadeIn = keyframes({
+  '0%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});

inertia/styles/reset.ts

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+
+export const cssReset = css({
+  '*': {
+    boxSizing: 'border-box',
+    outline: 0,
+    margin: 0,
+    padding: 0,
+    scrollBehavior: 'smooth',
+  },
+
+  '.reset': {
+    backgroundColor: 'inherit',
+    color: 'inherit',
+    padding: 0,
+    margin: 0,
+    border: 0,
+  },
+
+  'a': {
+    width: 'fit-content',
+    color: '#3f88c5',
+    textDecoration: 'none',
+    borderBottom: '1px solid transparent',
+  },
+
+  'b': {
+    fontWeight: 600,
+    letterSpacing: '0.5px',
+  },
+
+  'h1, h2, h3, h4, h5, h6': {
+    fontWeight: '400',
+    margin: '1em 0',
+  },
+});

inertia/styles/theme.ts

@@ -0,0 +1,44 @@
+import { Theme } from '@emotion/react';
+
+const lightBlack = '#555';
+const black = '#333';
+const darkBlack = '#111';
+
+const white = '#fff';
+const gray = '#7c7c7c';
+
+const blue = '#3f88c5';
+
+export const theme: Theme = {
+  colors: {
+    font: black,
+    background: white,
+    primary: blue,
+
+    lightBlack,
+    black,
+    darkBlack,
+
+    white,
+    gray,
+
+    blue,
+  },
+
+  border: {
+    radius: '5px',
+  },
+
+  media: {
+    mobile: '768px',
+    tablet: '1024px',
+    small_desktop: '1280px',
+    medium_desktop: '1440px',
+    large_desktop: '1920px',
+    xlarge_desktop: '2560px',
+  },
+
+  transition: {
+    delay: '0.15s',
+  },
+};