From e43193d4647071e21da3f859ce506e0d538da191 Mon Sep 17 00:00:00 2001 From: developomp Date: Sun, 2 Jul 2023 14:57:56 +0900 Subject: [PATCH] feat(main): replace emotion CSS with tailwind --- apps/main/package.json | 1 - apps/main/postcss.config.js | 2 + apps/main/src/app.css | 62 +++++++++++++++++++------- apps/main/src/app.html | 4 +- apps/main/src/components/Navbar.svelte | 48 ++++++++------------ apps/main/src/routes/+layout.svelte | 41 ++--------------- apps/main/src/routes/+page.svelte | 62 ++++++++++---------------- apps/main/src/theme.ts | 18 -------- pnpm-lock.yaml | 13 ------ 9 files changed, 96 insertions(+), 155 deletions(-) delete mode 100644 apps/main/src/theme.ts diff --git a/apps/main/package.json b/apps/main/package.json index 2890403..3448ae6 100644 --- a/apps/main/package.json +++ b/apps/main/package.json @@ -17,7 +17,6 @@ "@developomp-site/eslint-config": "workspace:*", "@developomp-site/tailwind-config": "workspace:*", "@developomp-site/theme": "workspace:*", - "@emotion/css": "^11.11.2", "@fontsource/noto-sans-kr": "^5.0.3", "@inqling/svelte-icons": "^3.3.2", "@sveltejs/adapter-static": "^2.0.2", diff --git a/apps/main/postcss.config.js b/apps/main/postcss.config.js index d41ad63..ee7f537 100644 --- a/apps/main/postcss.config.js +++ b/apps/main/postcss.config.js @@ -1,5 +1,7 @@ export default { plugins: { + "postcss-import": {}, + "tailwindcss/nesting": {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/apps/main/src/app.css b/apps/main/src/app.css index 5aeda78..42ea2fd 100644 --- a/apps/main/src/app.css +++ b/apps/main/src/app.css @@ -10,9 +10,17 @@ body { margin: 0; } +#root { + /* color */ + @apply font-noto-sans dark:bg-dark-ui-bg dark:text-dark-text-default; +} + main { - display: flex; - width: calc(100% - 2rem); + /* style */ + @apply flex; + + width: 100%; + padding: 0 2rem; max-width: 64rem; flex-direction: column; padding-bottom: 5rem; @@ -29,15 +37,26 @@ main { } h1 { - font-size: 2rem; - text-align: center; + @apply my-5 text-center text-4xl; } h2 { - margin-top: 5rem; + /* color */ + @apply dark:bg-dark-text-default dark:text-dark-ui-bg; - font-weight: 700; - font-size: 1.6rem; + /* text */ + @apply text-3xl font-bold; + + /* spacing */ + @apply mb-5 mt-20 px-4 py-1; +} + +a { + /* style */ + @apply no-underline hover:underline; + + /* color */ + @apply text-anchor hover:text-anchor-accent; } p { @@ -51,30 +70,39 @@ b { /* table */ table { + @apply table-fixed; border-collapse: collapse; border-spacing: 1rem 0; margin-bottom: 1rem; } -th { - background-color: #ffffff22; - font-weight: 700; -} - -th, td { padding: 8px; - text-align: center; width: 10rem; } -th:nth-child(1), +/* 1st column */ td:nth-child(1) { text-align: right; } -th:nth-child(3), -td:nth-child(3) { +/* 2nd column */ +td:nth-child(2) { text-align: left; } + +.social-profile { + * { + color: #888888; + transition: color 0.15s ease-out; + } + + svg { + width: 2.5rem; + } + + :hover { + color: #ffffff; + } +} diff --git a/apps/main/src/app.html b/apps/main/src/app.html index 7ae043b..e7449e1 100644 --- a/apps/main/src/app.html +++ b/apps/main/src/app.html @@ -18,8 +18,8 @@ %sveltekit.head% - + -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/apps/main/src/components/Navbar.svelte b/apps/main/src/components/Navbar.svelte index b4f9798..59e1bdb 100644 --- a/apps/main/src/components/Navbar.svelte +++ b/apps/main/src/components/Navbar.svelte @@ -1,41 +1,31 @@ -