diff --git a/public/epigram-icon.png b/public/epigram-icon.png new file mode 100644 index 00000000..51d8845c Binary files /dev/null and b/public/epigram-icon.png differ diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 6879410d..aed6af16 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( - +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1bf0b942..6a3a652a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,4 @@ import Head from 'next/head'; -import Image from 'next/image'; -import styles from '@/styles/Home.module.css'; import { useEffect, useState } from 'react'; export default function Home() { @@ -24,62 +22,16 @@ export default function Home() { return ( <> - Create Next App + Epigram - + -
-
-

- Get started by editing  - src/pages/index.tsx -

-
- - By Vercel Logo - -
-
+
+
Epigram Main
-
- Next.js Logo -
- -
- -

- Docs -> -

-

Find in-depth information about Next.js features and API.

- - - -

- Learn -> -

-

Learn about Next.js in an interactive course with quizzes!

- - - -

- Templates -> -

-

Discover and deploy boilerplate example Next.js projects.

- - - -

- Deploy -> -

-

Instantly deploy your Next.js site to a shareable URL with Vercel.

- -
+

Pretendard

+

Iropke Batang

); diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css deleted file mode 100644 index ff88d347..00000000 --- a/src/styles/Home.module.css +++ /dev/null @@ -1,223 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: 100%; - width: var(--max-width); -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: - background 200ms, - border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient(to bottom, rgba(var(--background-start-rgb), 1), rgba(var(--callout-rgb), 0.5)); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/src/styles/globals.css b/src/styles/globals.css index 2db040fa..2ff60784 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -2,81 +2,125 @@ @tailwind components; @tailwind utilities; -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", - "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", - "Fira Mono", "Droid Sans Mono", "Courier New", monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; +@font-face { + font-family: 'Pretendard'; + font-weight: 100; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 200; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 300; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 400; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 500; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 600; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 700; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 800; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.ttf') format("truetype"); + font-display: swap; +} +@font-face { + font-family: 'Pretendard'; + font-weight: 900; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.ttf') format("truetype"); + font-display: swap; } -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); +@font-face { + font-family: 'IropkeBatang'; + font-weight: normal; + font-style: normal; + src: url('https://cdn.jsdelivr.net/gh/webfontworld/iropke/IropkeBatang.eot'); + src: url('https://cdn.jsdelivr.net/gh/webfontworld/iropke/IropkeBatang.eot?#iefix') format('embedded-opentype'), + url('https://cdn.jsdelivr.net/gh/webfontworld/iropke/IropkeBatang.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/webfontworld/iropke/IropkeBatang.woff') format('woff'), + url('https://cdn.jsdelivr.net/gh/webfontworld/iropke/IropkeBatang.ttf') format("truetype"); + font-display: swap; +} - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } +:root { + --max-width: 1100px; + --border-radius: 12px; } + * { box-sizing: border-box; padding: 0; @@ -89,23 +133,8 @@ body { overflow-x: hidden; } -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - a { color: inherit; text-decoration: none; } -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} diff --git a/tailwind.config.js b/tailwind.config.js index c959b203..1c497d8c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,56 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./pages/**/*.{js,ts,jsx,tsx,mdx}", - "./src/**/*.{js,ts,jsx,tsx,mdx}", - ], + content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { - extend: {}, + extend: { + fontFamily: { + pretendard: ['Pretendard'], + iropkeBatang: ['IropkeBatang'], + }, + colors: { + 'black-100': '#787878', + 'black-200': '#6B6B6B', + 'black-300': '#5E5E5E', + 'black-400': '#525252', + 'black-500': '#454545', + 'black-600': '#373737', + 'black-700': '#2B2B2B', + 'black-800': '#1F1F1F', + 'black-900': '#121212', + 'black-950': '#050505', + 'blue-100': '#FFFFFF', + 'blue-200': '#ECEFF4', + 'blue-300': '#CBD3E1', + 'blue-400': '#ABB8CE', + 'blue-500': '#8B9DBC', + 'blue-600': '#6A82A9', + 'blue-700': '#52698E', + 'blue-800': '#40516E', + 'blue-900': '#2D394E', + 'blue-950': '#1A212D', + 'gray-100': '#DEDEDE', + 'gray-200': '#C4C4C4', + 'gray-300': '#ABABAB', + 'gray-400': '#919191', + 'background-100': '#F5F7FA', + 'state-error': '#FF6577', + 'line-100': '#F2F2F2', + 'line-200': '#CFDBEA', + 'illust-yellow': '#FBC85B', + 'illust-green': '#48BB98', + 'illust-purple': '#8E80E3', + 'illust-blue': '#5195EE', + 'illust-red': '#E46E80', + 'illust-brown': '#9A695E', + 'sub-yellow': '#E8AA26', + 'sub-blue_1': '#3E3E3E', + 'sub-blue_2': '#3E414D', + 'sub-blue_3': '#494D59', + 'sub-gray_1': '#C7D1E0', + 'sub-gray_2': '#E3E9F1', + 'sub-gray_3': '#EFF3F8', + }, + }, }, plugins: [], -} \ No newline at end of file +};