commit 6d96bef1777b3773754180d75e3fd394f4156265
parent 48ed90bf382d83574deadefd9439bd4a34843fe3
Author: Yongbin Kim <iam@yongbin.kim>
Date: Tue, 17 Jan 2023 04:25:36 +0900
feat: Add basic layout stuff
Signed-off-by: Yongbin Kim <iam@yongbin.kim>
Diffstat:
39 files changed, 1036 insertions(+), 234 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,13 @@
/node_modules
/.pnp
.pnp.js
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+!.yarn/cache
# testing
/coverage
@@ -34,3 +41,81 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
+
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn. Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
diff --git a/.idea/modules.xml b/.idea/modules.xml
@@ -2,7 +2,7 @@
<project version="4">
<component name="ProjectModuleManager">
<modules>
- <module fileurl="file://$PROJECT_DIR$/.idea/dreamhanks-project.iml" filepath="$PROJECT_DIR$/.idea/dreamhanks-project.iml" />
+ <module fileurl="file://$PROJECT_DIR$/../dreamhanks-demo-project/.idea/dreamhanks-demo-project.iml" filepath="$PROJECT_DIR$/../dreamhanks-demo-project/.idea/dreamhanks-demo-project.iml" />
</modules>
</component>
</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="VcsDirectoryMappings">
+ <mapping directory="" vcs="Git" />
+ </component>
+</project>
+\ No newline at end of file
diff --git a/.pnp.cjs b/.pnp.cjs
@@ -37,7 +37,8 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["next", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:13.1.2"],\
["react", "npm:18.2.0"],\
["react-dom", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:18.2.0"],\
- ["typescript", "patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"]\
+ ["typescript", "patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"],\
+ ["yaml", "npm:2.2.1"]\
],\
"linkType": "SOFT"\
}]\
@@ -918,7 +919,8 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["next", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:13.1.2"],\
["react", "npm:18.2.0"],\
["react-dom", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:18.2.0"],\
- ["typescript", "patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"]\
+ ["typescript", "patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"],\
+ ["yaml", "npm:2.2.1"]\
],\
"linkType": "SOFT"\
}]\
@@ -3315,6 +3317,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
+ ["yaml", [\
+ ["npm:2.2.1", {\
+ "packageLocation": "./.yarn/cache/yaml-npm-2.2.1-b7f7f5e84d-84f68cbe46.zip/node_modules/yaml/",\
+ "packageDependencies": [\
+ ["yaml", "npm:2.2.1"]\
+ ],\
+ "linkType": "HARD"\
+ }]\
+ ]],\
["yocto-queue", [\
["npm:0.1.0", {\
"packageLocation": "./.yarn/cache/yocto-queue-npm-0.1.0-c6c9a7db29-f77b3d8d00.zip/node_modules/yocto-queue/",\
diff --git a/.yarn/cache/yaml-npm-2.2.1-b7f7f5e84d-84f68cbe46.zip b/.yarn/cache/yaml-npm-2.2.1-b7f7f5e84d-84f68cbe46.zip
Binary files differ.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
Binary files differ.
diff --git a/Makefile b/Makefile
@@ -0,0 +1,12 @@
+STYLE_SRC:=$(shell find . -type f -name '*.scss' -not -name '_*.scss')
+STYLE_DST:=$(patsubst %.scss,%.css,$(STYLE_SRC))
+
+.PHONY: all
+.DEFAULT_GOAL: all
+all:
+
+.PHONY: build
+styles: $(STYLE_DST)
+
+%.css: %.scss
+ sass --style=compressed --load-path=styles $< $@
diff --git a/components/elements/Logo.module.css b/components/elements/Logo.module.css
@@ -0,0 +1 @@
+.logo{fill:#191c1b}@media(prefers-color-scheme: dark){.logo{fill:#e1e3e0}}/*# sourceMappingURL=Logo.module.css.map */
diff --git a/components/elements/Logo.module.css.map b/components/elements/Logo.module.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["Logo.module.scss","../../styles/core/_colors.scss"],"names":[],"mappings":"AAEA,MAEI,aCoHF,mCDtHF,MAEI","file":"Logo.module.css"}
+\ No newline at end of file
diff --git a/components/elements/Logo.module.scss b/components/elements/Logo.module.scss
@@ -0,0 +1,7 @@
+@use 'core/colors';
+
+.logo {
+ @include colors.apply-themes using ($theme) {
+ fill: colors.get($theme, 'on-surface');
+ }
+}
diff --git a/components/elements/Logo.tsx b/components/elements/Logo.tsx
@@ -0,0 +1,11 @@
+import styles from './Logo.module.css'
+
+export default function Logo() {
+ return (
+ <svg className={styles.logo} width="56" height="24">
+ <path d="M16.609-3.467h4.578c.906 0 1.582.038 2.027.114.445.075.844.233 1.195.472.352.24.645.559.879.957.235.399.352.846.352 1.34a2.67 2.67 0 0 1-.434 1.477 2.69 2.69 0 0 1-1.175 1.008c.698.203 1.234.549 1.609 1.039.375.489.562 1.065.562 1.726 0 .521-.121 1.028-.363 1.52a3.069 3.069 0 0 1-.992 1.18c-.419.294-.936.475-1.551.542-.385.042-1.315.068-2.789.079h-3.898V-3.467Zm2.312 1.907v2.648h1.516c.901 0 1.461-.013 1.68-.039.395-.047.707-.183.933-.41.227-.227.34-.525.34-.895 0-.354-.098-.641-.293-.863-.195-.221-.486-.355-.871-.402-.229-.026-.888-.039-1.977-.039h-1.328Zm0 4.554v3.063h2.141c.833 0 1.362-.024 1.586-.07.344-.063.623-.215.84-.457.216-.243.324-.567.324-.973 0-.344-.083-.635-.25-.875a1.418 1.418 0 0 0-.723-.524c-.315-.109-.999-.164-2.051-.164h-1.867ZM28.163 7.987V-3.467h4.868c1.224 0 2.113.103 2.668.309a2.64 2.64 0 0 1 1.332 1.098c.333.526.5 1.127.5 1.804 0 .86-.253 1.569-.758 2.129s-1.261.913-2.266 1.059c.5.292.913.612 1.238.961.326.349.765.969 1.317 1.859l1.398 2.235h-2.765l-1.672-2.493c-.594-.89-1-1.451-1.219-1.683a1.774 1.774 0 0 0-.695-.477c-.245-.086-.633-.129-1.164-.129h-.469v4.782h-2.313Zm2.313-6.61h1.711c1.109 0 1.802-.047 2.078-.14.276-.094.492-.256.648-.485.157-.229.235-.515.235-.859 0-.386-.103-.697-.309-.934-.206-.237-.496-.386-.871-.449-.187-.026-.75-.039-1.687-.039h-1.805v2.906Z" transform="translate(-16.511 9.74)"/>
+ <path d="M50.038-3.467h-2.515l-1 2.602h-4.578l-.946-2.602h-2.453l4.461 11.454h2.445l4.586-11.454Zm-4.257 4.532-1.579 4.25-1.546-4.25h3.125Z" transform="matrix(1 0 0 1 -16.511 9.74)"/>
+ <path d="M51.288 7.987V-3.467h2.25l4.688 7.649v-7.649h2.148V7.987h-2.32L53.437.518v7.469h-2.149ZM62.812-3.467h4.226c.954 0 1.68.073 2.18.219.672.198 1.247.55 1.727 1.055.479.505.843 1.124 1.093 1.855.25.732.375 1.635.375 2.707 0 .943-.117 1.756-.351 2.438-.287.833-.695 1.508-1.227 2.023-.401.391-.942.696-1.625.914-.51.162-1.192.243-2.047.243h-4.351V-3.467Zm2.312 1.938v7.586h1.727c.646 0 1.112-.037 1.398-.109.375-.094.687-.253.934-.477.247-.224.449-.592.605-1.105.157-.513.235-1.213.235-2.098 0-.886-.078-1.565-.235-2.039-.156-.474-.375-.844-.656-1.11a2.207 2.207 0 0 0-1.07-.539c-.323-.073-.956-.109-1.899-.109h-1.039Z" transform="translate(-16.511 9.74)"/>
+ </svg>
+ )
+}
diff --git a/components/layout/Container.module.css b/components/layout/Container.module.css
@@ -0,0 +1 @@
+.container{width:100%;padding:0 1rem;margin:0 auto;max-width:100%}@media(min-width: 40rem){.container{max-width:40rem}}@media(min-width: 60rem){.container{max-width:60rem}}.container.is-fluid{max-width:none}/*# sourceMappingURL=Container.module.css.map */
diff --git a/components/layout/Container.module.css.map b/components/layout/Container.module.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["Container.module.scss","../styles/core/_responsive.scss"],"names":[],"mappings":"AAMA;EACE;EACA,SAJQ;EAKR;EAGE,WCUO;;AAET;EDlBF;IAMI,WCZY;;;AA4Bd;EDtBF;IAMI,WCXY;;;ADcd;EACE","file":"Container.module.css"}
+\ No newline at end of file
diff --git a/components/layout/Container.module.scss b/components/layout/Container.module.scss
@@ -0,0 +1,19 @@
+@use 'sass:math';
+@use 'core/vars';
+@use 'core/responsive';
+
+$padding: 0 vars.$gap;
+
+.container {
+ width: 100%;
+ padding: $padding;
+ margin: 0 auto;
+
+ @include responsive.apply using ($max-width) {
+ max-width: $max-width;
+ }
+
+ &.is-fluid {
+ max-width: none;
+ }
+}
diff --git a/components/layout/Container.tsx b/components/layout/Container.tsx
@@ -0,0 +1,22 @@
+import classNames from '@/lib/classnames'
+import { HTMLAttributes, ReactNode } from 'react'
+import styles from './Container.module.css'
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+ isFluid?: boolean
+}
+
+export default function Container(props: ContainerProps) {
+ const { className, isFluid, ...restProps } = props
+
+ return (
+ <div
+ {...classNames(
+ className,
+ styles.container,
+ isFluid ? styles['is-fluid'] : null
+ )}
+ {...restProps}
+ />
+ )
+}
diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css
@@ -0,0 +1,3 @@
+.header {
+
+}
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -0,0 +1,14 @@
+import Navbar from '@/components/layout/Navbar'
+import NavbarItem from '@/components/layout/NavbarItem'
+import classNames from '@/lib/classnames'
+import styles from './Header.module.css'
+
+export default function Header () {
+ return (
+ <header {...classNames(styles.header)}>
+ <Navbar>
+ <NavbarItem href={'/'}>Home</NavbarItem>
+ </Navbar>
+ </header>
+ )
+}
diff --git a/components/layout/Navbar.module.css b/components/layout/Navbar.module.css
@@ -0,0 +1 @@
+.navbar{padding:.5rem 0;z-index:10;background-color:#fafdfa;color:#191c1b}.navbar .item:hover{background-color:rgba(25,28,27,.1)}.navbar.is-primary{background-color:#58fbda;color:#00201a}.navbar.is-primary .item:hover{background-color:rgba(0,32,26,.1)}.navbar.is-secondary{background-color:#f5d9ff;color:#30004a}.navbar.is-secondary .item:hover{background-color:rgba(48,0,74,.1)}.navbar.is-tertiary{background-color:#c7e7ff;color:#001e2e}.navbar.is-tertiary .item:hover{background-color:rgba(0,30,46,.1)}.navbar.is-error{background-color:#ffdad6;color:#410002}.navbar.is-error .item:hover{background-color:rgba(65,0,2,.1)}@media(prefers-color-scheme: dark){.navbar{background-color:#191c1b;color:#e1e3e0}.navbar .item:hover{background-color:rgba(225,227,224,.1)}.navbar.is-primary{background-color:#005143;color:#58fbda}.navbar.is-primary .item:hover{background-color:rgba(88,251,218,.1)}.navbar.is-secondary{background-color:#61317e;color:#f5d9ff}.navbar.is-secondary .item:hover{background-color:rgba(245,217,255,.1)}.navbar.is-tertiary{background-color:#2a4a5f;color:#c7e7ff}.navbar.is-tertiary .item:hover{background-color:rgba(199,231,255,.1)}.navbar.is-error{background-color:#93000a;color:#ffdad6}.navbar.is-error .item:hover{background-color:rgba(255,218,214,.1)}}.navbar>.container{display:flex;align-items:stretch;min-height:2.5rem}.navbar .brand,.navbar .menu{display:flex;align-items:stretch}.navbar .brand{flex-shrink:0;margin-left:-1rem;line-height:1.5rem;font-size:1rem;letter-spacing:.009375rem;font-weight:500}.navbar .brand .navbar-item{font-weight:bold}.navbar .menu{flex:1;justify-content:flex-end;margin-right:-1rem}.navbar .menu.is-centered{justify-content:center;margin-right:0}.navbar .item{display:flex;align-items:center;padding:0 1rem;line-height:2.5rem;border-radius:9999px}.navbar a.item{color:inherit}.navbar a.item,.navbar a.item:hover{text-decoration:none}/*# sourceMappingURL=Navbar.module.css.map */
diff --git a/components/layout/Navbar.module.css.map b/components/layout/Navbar.module.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["Navbar.module.scss","../../styles/core/_colors.scss","../../styles/core/_typography.scss"],"names":[],"mappings":"AAsBA,QACE,gBACA,WAVA,yBACA,cAEA,oBACE,mCAYE,mBAhBJ,yBACA,cAEA,+BACE,kCAYE,qBAhBJ,yBACA,cAEA,iCACE,kCAYE,oBAhBJ,yBACA,cAEA,gCACE,kCAYE,iBAhBJ,yBACA,cAEA,6BACE,iCCsGF,mCDlGF,QARE,yBACA,cAEA,oBACE,sCAYE,mBAhBJ,yBACA,cAEA,+BACE,qCAYE,qBAhBJ,yBACA,cAEA,iCACE,sCAYE,oBAhBJ,yBACA,cAEA,gCACE,sCAYE,iBAhBJ,yBACA,cAEA,6BACE,uCAkBF,mBACE,aACA,oBACA,WA/BU,OAkCZ,6BAEE,aACA,oBAGF,eACE,cACA,kBEkEA,mBACA,eACA,0BACA,gBFlEA,4BACE,iBAIJ,cACE,OACA,yBACA,mBAEA,0BACE,uBACA,eAIJ,cACE,aACA,mBACA,eACA,YAjEU,OAkEV,cAhEU,OAmEZ,eACE,cAEA,oCACE","file":"Navbar.module.css"}
+\ No newline at end of file
diff --git a/components/layout/Navbar.module.scss b/components/layout/Navbar.module.scss
@@ -0,0 +1,84 @@
+@use 'sass:math';
+@use 'core/colors';
+@use 'core/vars';
+@use 'core/typography';
+
+$height: 3.5rem;
+$shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+$item-height: 2.5rem;
+$item-padding-x: 1rem;
+$item-radius: 9999px;
+$item-hover-background-opacity: 10%;
+
+@mixin _apply-navbar-color($theme, $color, $on-color) {
+ background-color: colors.get($theme, $color);
+ color: colors.get($theme, $on-color);
+
+ .item:hover {
+ background-color: rgba(colors.get($theme, $on-color), $item-hover-background-opacity);
+ }
+}
+
+.navbar {
+ padding: math.div(($height - $item-height), 2) 0;
+ z-index: 10;
+
+ @include colors.apply-themes() using ($theme) {
+ @include _apply-navbar-color($theme, 'surface', 'on-surface');
+
+ @include colors.container-sets using ($key, $color, $on-color) {
+ &.is-#{$key} {
+ @include _apply-navbar-color($theme, $color, $on-color)
+ }
+ }
+ }
+
+ & > .container {
+ display: flex;
+ align-items: stretch;
+ min-height: $item-height;
+ }
+
+ .brand,
+ .menu {
+ display: flex;
+ align-items: stretch;
+ }
+
+ .brand {
+ flex-shrink: 0;
+ margin-left: -$item-padding-x;
+ @include typography.apply('title-medium');
+
+ .navbar-item {
+ font-weight: bold;
+ }
+ }
+
+ .menu {
+ flex: 1;
+ justify-content: flex-end;
+ margin-right: -$item-padding-x;
+
+ &.is-centered {
+ justify-content: center;
+ margin-right: 0;
+ }
+ }
+
+ .item {
+ display: flex;
+ align-items: center;
+ padding: 0 $item-padding-x;
+ line-height: $item-height;
+ border-radius: $item-radius;
+ }
+
+ a.item {
+ color: inherit;
+
+ &, &:hover {
+ text-decoration: none;
+ }
+ }
+}
diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
@@ -0,0 +1,27 @@
+import Logo from '@/components/elements/Logo'
+import Container from '@/components/layout/Container'
+import Link from 'next/link'
+import { ReactNode } from 'react'
+import styles from './Navbar.module.css'
+
+interface NavbarProps {
+ children?: ReactNode
+}
+
+export default function Navbar (props: NavbarProps) {
+ return (
+ <header className={styles.navbar}>
+ <Container className={styles.container}>
+ <nav className={styles.brand}>
+ {/* TODO: Show current wiki name here */}
+ <Link href="/" className={styles.item}>
+ <Logo />
+ </Link>
+ </nav>
+ <nav className={styles.menu}>
+ {props.children}
+ </nav>
+ </Container>
+ </header>
+ )
+}
diff --git a/components/layout/NavbarItem.tsx b/components/layout/NavbarItem.tsx
@@ -0,0 +1,14 @@
+import Link, { LinkProps } from 'next/link'
+import { AnchorHTMLAttributes, ReactNode } from 'react'
+import styles from './Navbar.module.css'
+
+export interface NavbarItemProps {
+ href: string
+ children?: ReactNode
+}
+
+export default function NavbarItem (props: NavbarItemProps) {
+ return (
+ <Link className={styles.item} href={props.href}>{props.children}</Link>
+ )
+}
diff --git a/lib/classnames.ts b/lib/classnames.ts
@@ -0,0 +1,10 @@
+export default function classNames(...args: unknown[]): { className: string } {
+ return {
+ className: args.reduce<string>((prev, curr) => {
+ if (typeof curr !== 'string' || curr.length == 0) {
+ return prev
+ }
+ return `${prev} ${curr}`
+ }, '')
+ }
+}
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
- "lint": "next lint"
+ "lint": "next lint",
+ "build:styles": "make styles"
},
"dependencies": {
"@next/font": "13.1.2",
@@ -18,6 +19,7 @@
"next": "13.1.2",
"react": "18.2.0",
"react-dom": "18.2.0",
- "typescript": "4.9.4"
+ "typescript": "4.9.4",
+ "yaml": "^2.2.1"
}
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,12 @@
import '@/styles/globals.css'
+import Header from '@/components/layout/Header'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
- return <Component {...pageProps} />
+ return (
+ <div>
+ <Header />
+ <Component {...pageProps} />
+ </div>
+ )
}
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,3 +1,4 @@
+import Header from '@/components/layout/Header'
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,123 +1,12 @@
-import Head from 'next/head'
-import Image from 'next/image'
+import Container from '@/components/layout/Container'
import { Inter } from '@next/font/google'
-import styles from '@/styles/Home.module.css'
-
-const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
- <Head>
- <title>Create Next App</title>
- <meta name="description" content="Generated by create next app" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="icon" href="/favicon.ico" />
- </Head>
- <main className={styles.main}>
- <div className={styles.description}>
- <p>
- Get started by editing
- <code className={styles.code}>pages/index.tsx</code>
- </p>
- <div>
- <a
- href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- By{' '}
- <Image
- src="/vercel.svg"
- alt="Vercel Logo"
- className={styles.vercelLogo}
- width={100}
- height={24}
- priority
- />
- </a>
- </div>
- </div>
-
- <div className={styles.center}>
- <Image
- className={styles.logo}
- src="/next.svg"
- alt="Next.js Logo"
- width={180}
- height={37}
- priority
- />
- <div className={styles.thirteen}>
- <Image
- src="/thirteen.svg"
- alt="13"
- width={40}
- height={31}
- priority
- />
- </div>
- </div>
-
- <div className={styles.grid}>
- <a
- href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Docs <span>-></span>
- </h2>
- <p className={inter.className}>
- Find in-depth information about Next.js features and API.
- </p>
- </a>
-
- <a
- href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Learn <span>-></span>
- </h2>
- <p className={inter.className}>
- Learn about Next.js in an interactive course with quizzes!
- </p>
- </a>
-
- <a
- href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Templates <span>-></span>
- </h2>
- <p className={inter.className}>
- Discover and deploy boilerplate example Next.js projects.
- </p>
- </a>
-
- <a
- href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Deploy <span>-></span>
- </h2>
- <p className={inter.className}>
- Instantly deploy your Next.js site to a shareable URL
- with Vercel.
- </p>
- </a>
- </div>
- </main>
+ <Container>
+ <p>Hello, World!</p>
+ </Container>
</>
)
}
diff --git a/public/next.svg b/public/next.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
-\ No newline at end of file
diff --git a/public/thirteen.svg b/public/thirteen.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>
-\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
-\ No newline at end of file
diff --git a/styles/core/_colors.scss b/styles/core/_colors.scss
@@ -0,0 +1,155 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+
+// https://m3.material.io/theme-builder
+
+$themes: (
+ 'primary': (
+ 'light': #006b5a,
+ 'dark': #2cdebf,
+ ),
+ 'on-primary': (
+ 'light': #ffffff,
+ 'dark': #00382e,
+ ),
+ 'primary-container': (
+ 'light': #58fbda,
+ 'dark': #005143,
+ ),
+ 'on-primary-container': (
+ 'light': #00201a,
+ 'dark': #58fbda,
+ ),
+
+ 'secondary': (
+ 'light': #7b4998,
+ 'dark': #e6b4ff,
+ ),
+ 'on-secondary': (
+ 'light': #ffffff,
+ 'dark': #491866,
+ ),
+ 'secondary-container': (
+ 'light': #f5d9ff,
+ 'dark': #61317e,
+ ),
+ 'on-secondary-container': (
+ 'light': #30004a,
+ 'dark': #f5d9ff,
+ ),
+
+ 'tertiary': (
+ 'light': #426278,
+ 'dark': #aacbe4,
+ ),
+ 'on-tertiary': (
+ 'light': #ffffff,
+ 'dark': #103447,
+ ),
+ 'tertiary-container': (
+ 'light': #c7e7ff,
+ 'dark': #2a4a5f,
+ ),
+ 'on-tertiary-container': (
+ 'light': #001e2e,
+ 'dark': #c7e7ff,
+ ),
+
+ 'error': (
+ 'light': #ff0000,
+ 'dark': #ffb4ab,
+ ),
+ 'on-error': (
+ 'light': #ffffff,
+ 'dark': #690005,
+ ),
+ 'error-container': (
+ 'light': #ffdad6,
+ 'dark': #93000a,
+ ),
+ 'on-error-container': (
+ 'light': #410002,
+ 'dark': #ffdad6,
+ ),
+
+ 'background': (
+ 'light': #fafdfa,
+ 'dark': #191c1b,
+ ),
+ 'on-background': (
+ 'light': #191c1b,
+ 'dark': #e1e3e0,
+ ),
+
+ 'surface': (
+ 'light': #fafdfa,
+ 'dark': #191c1b,
+ ),
+ 'on-surface': (
+ 'light': #191c1b,
+ 'dark': #e1e3e0,
+ ),
+
+ 'surface-variant': (
+ 'light': #dbe5e0,
+ 'dark': #3f4946,
+ ),
+ 'on-surface-variant': (
+ 'light': #3f4946,
+ 'dark': #bfc9c4,
+ ),
+
+ 'outline': (
+ 'light': #6f7975,
+ 'dark': #89938f,
+ ),
+);
+
+@function get($theme, $key) {
+ @if not map.has-key($themes, $key) {
+ @error 'invalid color key: #{$key}'
+ }
+
+ $colors: map.get($themes, $key);
+ @return map.get($colors, $theme);
+}
+
+@mixin apply-themes() {
+ @content('light');
+
+ @media (prefers-color-scheme: dark) {
+ @content('dark');
+ }
+}
+
+@mixin _sets($theme, $suffix) {
+ @each $key in (primary, secondary, tertiary, error) {
+ $color-key: '#{$key}#{$suffix}';
+ $on-color-key: 'on-#{$key}#{$suffix}';
+
+ @if $theme == null {
+ @content($key, $color-key, $on-color-key)
+ } @else {
+ $colors: map.get($themes, $color-key);
+ $on-colors: map.get($themes, $on-color-key);
+
+ $color: map.get($colors, $theme);
+ $on-color: map.get($on-colors, $theme);
+
+ @content($key, $color, $on-color);
+ }
+ }
+}
+
+@mixin sets($theme: null) {
+ @include _sets($theme, '') using ($key, $color, $color-on) {
+ @content($key, $color, $color-on);
+ }
+}
+
+@mixin container-sets($theme: null) {
+ @include _sets($theme, '-container') using ($key, $color, $color-on) {
+ @content($key, $color, $color-on);
+ }
+}
diff --git a/styles/core/_responsive.scss b/styles/core/_responsive.scss
@@ -0,0 +1,32 @@
+$screen-mobile: 40rem;
+$screen-tablet: 60rem;
+
+@mixin tablet($with-desktop: false) {
+ @if $with-desktop == true {
+ @media (min-width: $screen-mobile) {
+ @content($screen-mobile);
+ }
+ } @else {
+ @media (min-width: $screen-mobile) and (max-width: calc($screen-tablet - 1px)) {
+ @content($screen-mobile);
+ }
+ }
+}
+
+@mixin desktop {
+ @media (min-width: $screen-tablet) {
+ @content($screen-tablet);
+ }
+}
+
+@mixin apply {
+ @content(100%);
+
+ @media (min-width: $screen-mobile) {
+ @content($screen-mobile);
+ }
+
+ @media (min-width: $screen-tablet) {
+ @content($screen-tablet);
+ }
+}
diff --git a/styles/core/_typography.scss b/styles/core/_typography.scss
@@ -0,0 +1,124 @@
+@use 'sass:map';
+@use 'sass:math';
+
+// https://m3.material.io/styles/typography/type-scale-tokens
+
+$_font-info: (
+ 'display-large': (
+ 'line-height': 64,
+ 'font-size': 57,
+ 'tracking': 0,
+ 'font-weight': 400
+ ),
+ 'display-medium': (
+ 'line-height': 52,
+ 'font-size': 45,
+ 'tracking': 0,
+ 'font-weight': 400
+ ),
+ 'display-small': (
+ 'line-height': 44,
+ 'font-size': 36,
+ 'tracking': 0,
+ 'font-weight': 400
+ ),
+ 'headline-large': (
+ 'line-height': 40,
+ 'font-size': 32,
+ 'tracking': 0,
+ 'font-weight': 400
+ ),
+ 'headline-medium': (
+ 'line-height': 36,
+ 'font-size': 28,
+ 'tracking': 0,
+ 'font-weight': 400
+ ),
+ 'headline-small': (
+ 'line-height': 32,
+ 'font-size': 24,
+ 'tracking': 0,
+ 'font-weight': 400
+ ),
+ 'title-large': (
+ 'line-height': 28,
+ 'font-size': 22,
+ 'tracking': 0,
+ 'font-weight': 400
+ ),
+ 'title-medium': (
+ 'line-height': 24,
+ 'font-size': 16,
+ 'tracking': 0.15,
+ 'font-weight': 500
+ ),
+ 'title-small': (
+ 'line-height': 20,
+ 'font-size': 14,
+ 'tracking': 0.1,
+ 'font-weight': 500
+ ),
+ 'label-large': (
+ 'line-height': 20,
+ 'font-size': 14,
+ 'tracking': 0.1,
+ 'font-weight': 500
+ ),
+ 'label-medium': (
+ 'line-height': 16,
+ 'font-size': 12,
+ 'tracking': 0.5,
+ 'font-weight': 500
+ ),
+ 'label-small': (
+ 'line-height': 16,
+ 'font-size': 11,
+ 'tracking': 0.5,
+ 'font-weight': 500
+ ),
+ 'body-large': (
+ 'line-height': 24,
+ 'font-size': 16,
+ 'tracking': 0.5,
+ 'font-weight': 400
+ ),
+ 'body-medium': (
+ 'line-height': 20,
+ 'font-size': 14,
+ 'tracking': 0.25,
+ 'font-weight': 400
+ ),
+ 'body-small': (
+ 'line-height': 16,
+ 'font-size': 12,
+ 'tracking': 0.4,
+ 'font-weight': 400
+ ),
+);
+
+@mixin emit() {
+ @each $key, $font-info in $_font-info {
+ @content($key, $font-info);
+ }
+}
+
+@mixin apply($key, $important: false) {
+ $font: map.get($_font-info, $key);
+
+ $line-height: map.get($font, 'line-height');
+ $font-size: map.get($font, 'font-size');
+ $tracking: map.get($font, 'tracking');
+ $font-weight: map.get($font, 'font-weight');
+
+ @if $important {
+ line-height: ($line-height * 0.0625rem) !important;
+ font-size: ($font-size * 0.0625rem) !important;
+ letter-spacing: (math.div($tracking, $font-size) * 1rem) !important;
+ font-weight: ($font-weight) !important;
+ } @else {
+ line-height: ($line-height * 0.0625rem);
+ font-size: ($font-size * 0.0625rem);
+ letter-spacing: (math.div($tracking, $font-size) * 1rem);
+ font-weight: ($font-weight);
+ }
+}
diff --git a/styles/core/_vars.scss b/styles/core/_vars.scss
@@ -0,0 +1 @@
+$gap: 1rem;
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,107 +1 @@
-: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;
-}
-
-@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)
- );
-
- --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;
- }
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-html,
-body {
- max-width: 100vw;
- 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;
- }
-}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:-apple-system,sans-serif;background-color:#fafdfa;color:#191c1b}@media(prefers-color-scheme: dark){body{background-color:#191c1b;color:#e1e3e0}}/*# sourceMappingURL=globals.css.map */
diff --git a/styles/globals.css.map b/styles/globals.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vendors/_normalize.scss","globals.scss","core/_colors.scss"],"names":[],"mappings":"AAAA,4EAUA,KACI,iBACA,8BAUJ,KACI,SAOJ,KACI,cAQJ,GACI,cACA,eAWJ,GACI,uBACA,SACA,iBAQJ,IACI,gCACA,cAUJ,EACI,+BAQJ,YACI,mBACA,0BACA,iCAOJ,SAEI,mBAQJ,cAGI,gCACA,cAOJ,MACI,cAQJ,QAEI,cACA,cACA,kBACA,wBAGJ,IACI,eAGJ,IACI,WAUJ,IACI,kBAWJ,sCAKI,oBACA,eACA,iBACA,SAQJ,aAEI,iBAQJ,cAEI,oBAOJ,gDAII,0BAOJ,wHAII,kBACA,UAOJ,4GAII,8BAOJ,SACI,2BAUJ,OACI,sBACA,cACA,cACA,eACA,UACA,mBAOJ,SACI,wBAOJ,SACI,cAQJ,6BAEI,sBACA,UAOJ,kFAEI,YAQJ,cACI,6BACA,oBAOJ,yCACI,wBAQJ,6BACI,0BACA,aAUJ,QACI,cAOJ,QACI,kBAUJ,SACI,aAOJ,SACI,aCxVJ,KACE,qCAEE,yBACA,cCiHF,mCDrHF,KAGI,yBACA","file":"globals.css"}
+\ No newline at end of file
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -0,0 +1,10 @@
+@use 'core/colors';
+@import 'vendors/normalize';
+
+body {
+ font-family: -apple-system, sans-serif;
+ @include colors.apply-themes using ($theme) {
+ background-color: colors.get($theme, 'background');
+ color: colors.get($theme, 'on-background');
+ }
+}
diff --git a/styles/vendors/_normalize.scss b/styles/vendors/_normalize.scss
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -712,6 +712,7 @@ __metadata:
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.4
+ yaml: ^2.2.1
languageName: unknown
linkType: soft
@@ -2770,6 +2771,13 @@ __metadata:
languageName: node
linkType: hard
+"yaml@npm:^2.2.1":
+ version: 2.2.1
+ resolution: "yaml@npm:2.2.1"
+ checksum: 84f68cbe462d5da4e7ded4a8bded949ffa912bc264472e5a684c3d45b22d8f73a3019963a32164023bdf3d83cfb6f5b58ff7b2b10ef5b717c630f40bd6369a23
+ languageName: node
+ linkType: hard
+
"yocto-queue@npm:^0.1.0":
version: 0.1.0
resolution: "yocto-queue@npm:0.1.0"
