pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

feat(main): replace emotion CSS with tailwind

Browse source
This commit is contained in:
Kim, Jimin 2023-07-02 14:57:56 +09:00
parent e138285b7b
commit e43193d464
9 changed files with 96 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

1
apps/main/package.json
View file

@ -17,7 +17,6 @@
"@developomp-site/eslint-config": "workspace:*", "@developomp-site/eslint-config": "workspace:*",
"@developomp-site/tailwind-config": "workspace:*", "@developomp-site/tailwind-config": "workspace:*",
"@developomp-site/theme": "workspace:*", "@developomp-site/theme": "workspace:*",
"@emotion/css": "^11.11.2",
"@fontsource/noto-sans-kr": "^5.0.3", "@fontsource/noto-sans-kr": "^5.0.3",
"@inqling/svelte-icons": "^3.3.2", "@inqling/svelte-icons": "^3.3.2",
"@sveltejs/adapter-static": "^2.0.2", "@sveltejs/adapter-static": "^2.0.2",

2
apps/main/postcss.config.js
View file

@ -1,5 +1,7 @@
export default { export default {
plugins: { plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },

62
apps/main/src/app.css
View file

@ -10,9 +10,17 @@ body {
margin: 0; margin: 0;
} }
#root {
/* color */
@apply font-noto-sans dark:bg-dark-ui-bg dark:text-dark-text-default;
}
main { main {
display: flex; /* style */
width: calc(100% - 2rem); @apply flex;
width: 100%;
padding: 0 2rem;
max-width: 64rem; max-width: 64rem;
flex-direction: column; flex-direction: column;
padding-bottom: 5rem; padding-bottom: 5rem;
@ -29,15 +37,26 @@ main {
} }
h1 { h1 {
font-size: 2rem; @apply my-5 text-center text-4xl;
text-align: center;
} }
h2 { h2 {
margin-top: 5rem; /* color */
@apply dark:bg-dark-text-default dark:text-dark-ui-bg;
font-weight: 700; /* text */
font-size: 1.6rem; @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 { p {
@ -51,30 +70,39 @@ b {
/* table */ /* table */
table { table {
@apply table-fixed;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 1rem 0; border-spacing: 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
th {
background-color: #ffffff22;
font-weight: 700;
}
th,
td { td {
padding: 8px; padding: 8px;
text-align: center;
width: 10rem; width: 10rem;
} }
th:nth-child(1), /* 1st column */
td:nth-child(1) { td:nth-child(1) {
text-align: right; text-align: right;
} }
th:nth-child(3), /* 2nd column */
td:nth-child(3) { td:nth-child(2) {
text-align: left; text-align: left;
} }
.social-profile {
* {
color: #888888;
transition: color 0.15s ease-out;
}
svg {
width: 2.5rem;
}
:hover {
color: #ffffff;
}
}

4
apps/main/src/app.html
View file

@ -18,8 +18,8 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body class="dark">
<noscript>JavaScript is not enabled!</noscript> <noscript>JavaScript is not enabled!</noscript>
<div style="display: contents">%sveltekit.body%</div> <div id="root">%sveltekit.body%</div>
</body> </body>
</html> </html>

48
apps/main/src/components/Navbar.svelte
View file

@ -1,41 +1,31 @@
<script> <script>
import { css } from "@emotion/css"
import { page } from "$app/stores" import { page } from "$app/stores"
</script> </script>
<nav <nav>
class={css`
display: flex;
width: 100%;
justify-content: right;
ul {
display: flex;
gap: 1rem;
list-style-type: none;
margin-right: 1rem;
padding: 0;
}
li {
display: inline;
}
`}
>
<ul> <ul>
<li aria-current={$page.url.pathname === "/" ? "page" : undefined}> <li aria-current={$page.url.pathname === "/" ? "page" : undefined}>
<a target="_blank" href="https://blog.developomp.com">Blog</a> <a target="_blank" href="https://blog.developomp.com">Blog</a>
</li> </li>
<li aria-current={$page.url.pathname === "/about" ? "page" : undefined}> <li aria-current={$page.url.pathname === "/about" ? "page" : undefined}>
<a target="_blank" href="https://portfolio.developomp.com">Portfolio</a> <a target="_blank" href="https://portfolio.developomp.com">
</li> Portfolio
<li </a>
class={css`
color: gray;
`}
>
Resume (WIP)
</li> </li>
<li class="text-dark-footer-text">Resume (WIP)</li>
</ul> </ul>
</nav> </nav>
<style lang="postcss">
nav {
@apply flex h-14 w-full items-center justify-end;
}
ul {
@apply mr-4 flex list-none gap-4 p-0 no-underline;
}
li {
@apply inline;
}
</style>

41
apps/main/src/routes/+layout.svelte
View file

@ -1,43 +1,10 @@
<script> <script>
import "../app.css" import "../app.css"
import darkTheme from "@developomp-site/theme/dist/dark.json"
import { css } from "@emotion/css"
import { browser } from "$app/environment"
import Navbar from "../components/Navbar.svelte" import Navbar from "../components/Navbar.svelte"
</script> </script>
<!-- prevent flickering while theme is loading --> <Navbar />
{#if browser} <main>
<div <slot />
class={css` </main>
font-family: ${darkTheme.font.sansSerif};
color: ${darkTheme.color.text.default};
background-color: ${darkTheme.color.background};
a {
color: ${darkTheme.component.anchor.color.default};
text-decoration: none;
}
a:hover {
color: ${darkTheme.component.anchor.color.hover};
text-decoration: underline;
}
h2 {
color: ${darkTheme.color.background};
background-color: ${darkTheme.color.text.default};
padding: 0 1rem;
}
`}
>
<Navbar />
<main>
<slot />
</main>
</div>
{/if}

62
apps/main/src/routes/+page.svelte
View file

@ -1,6 +1,4 @@
<script> <script>
import darkTheme from "@developomp-site/theme/dist/dark.json"
import { css } from "@emotion/css"
import Discord from "@inqling/svelte-icons/simple-icons/discord.svelte" import Discord from "@inqling/svelte-icons/simple-icons/discord.svelte"
import GitHub from "@inqling/svelte-icons/simple-icons/github.svelte" import GitHub from "@inqling/svelte-icons/simple-icons/github.svelte"
import Mastodon from "@inqling/svelte-icons/simple-icons/mastodon.svelte" import Mastodon from "@inqling/svelte-icons/simple-icons/mastodon.svelte"
@ -9,7 +7,6 @@
import HandWave from "../components/HandWave.svelte" import HandWave from "../components/HandWave.svelte"
import { discordInviteLink } from "../constants" import { discordInviteLink } from "../constants"
import { SocialProfile } from "../theme"
function myAge() { function myAge() {
const now = new Date() const now = new Date()
@ -20,7 +17,10 @@
let month = now.getMonth() let month = now.getMonth()
let birthMonth = birth.getMonth() let birthMonth = birth.getMonth()
if (birthMonth > month || (birthMonth === month && birth.getDate() >= now.getDate())) { if (
birthMonth > month ||
(birthMonth === month && birth.getDate() >= now.getDate())
) {
return age - 1 return age - 1
} }
@ -28,35 +28,20 @@
} }
</script> </script>
<img <img class="logo" src="/favicon.svg" alt="logo" width="200" height="200" />
class={"logo " +
css`
box-shadow: 0 0 40px 20px ${darkTheme.color.text.gray};
`}
src="/favicon.svg"
alt="logo"
width="200"
height="200"
/>
<h1><HandWave />Hello! I am <b>developomp</b></h1> <h1><HandWave />Hello! I am <b>developomp</b></h1>
<h2>Who am I?</h2> <h2>Who am I?</h2>
<span> <span>
I am a <b>{myAge()} years old</b> college student studying computer science in Seoul, South Korea. I am a <b>{myAge()} years old</b> college student studying computer science in
Seoul, South Korea.
</span> </span>
<h2>Contact</h2> <h2>Contact</h2>
<table <table>
class={css`
th,
td {
border: 1px solid ${darkTheme.component.table.color.border};
}
`}
>
<tr> <tr>
<th>Platform</th> <th>Platform</th>
<th>ID</th> <th>ID</th>
@ -80,24 +65,29 @@
</table> </table>
<i class="note"> <i class="note">
*Note that I may not be able to read your messages if you reach out to me using methods not *Note that I may not be able to read your messages if you reach out to me
listed above. using methods not listed above.
</i> </i>
<div class="socials-and-profiles"> <div class="socials-and-profiles">
<a <a
class={SocialProfile} class="social-profile"
target="_blank" target="_blank"
href="https://github.com/developomp" href="https://github.com/developomp"
aria-label="GitHub link" aria-label="GitHub link"
> >
<GitHub /> <GitHub />
</a> </a>
<a class={SocialProfile} target="_blank" href={discordInviteLink} aria-label="GitHub link"> <a
class="social-profile"
target="_blank"
href={discordInviteLink}
aria-label="GitHub link"
>
<Discord /> <Discord />
</a> </a>
<a <a
class={SocialProfile} class="social-profile"
target="_blank" target="_blank"
href="https://twitter.com/developomp" href="https://twitter.com/developomp"
aria-label="Twitter link" aria-label="Twitter link"
@ -105,7 +95,7 @@
<Twitter /> <Twitter />
</a> </a>
<a <a
class={SocialProfile} class="social-profile"
target="_blank" target="_blank"
href="https://mastodon.social/@developomp" href="https://mastodon.social/@developomp"
aria-label="Mastodon link" aria-label="Mastodon link"
@ -113,7 +103,7 @@
<Mastodon /> <Mastodon />
</a> </a>
<a <a
class={SocialProfile} class="social-profile"
target="_blank" target="_blank"
href="https://youtube.com/@developomp" href="https://youtube.com/@developomp"
aria-label="YouTube link" aria-label="YouTube link"
@ -122,18 +112,14 @@
</a> </a>
</div> </div>
<style> <style lang="scss">
.logo { .logo {
aspect-ratio: auto 1 / 1; @apply mx-auto my-20 aspect-square rounded-full shadow-dark-text-gray;
border-radius: 50%; box-shadow: 0 0 40px 20px;
margin: 5rem auto;
} }
.socials-and-profiles { .socials-and-profiles {
margin-top: 3rem; @apply mt-12 flex flex-wrap gap-6;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
} }
.note { .note {

18
apps/main/src/theme.ts
View file

@ -1,18 +0,0 @@
import { css } from "@emotion/css"
export const SocialProfile = css`
* {
color: #888888;
transition: color 0.15s ease-out;
}
svg {
width: 2.5rem;
}
&:hover {
* {
color: #ffffff;
}
}
`

13
pnpm-lock.yaml generated
View file

@ -186,9 +186,6 @@ importers:
'@developomp-site/theme': '@developomp-site/theme':
specifier: workspace:* specifier: workspace:*
version: link:../../packages/theme version: link:../../packages/theme
'@emotion/css':
specifier: ^11.11.2
version: 11.11.2
'@fontsource/noto-sans-kr': '@fontsource/noto-sans-kr':
specifier: ^5.0.3 specifier: ^5.0.3
version: 5.0.3 version: 5.0.3
@ -2232,16 +2229,6 @@ packages:
'@emotion/weak-memoize': 0.3.1 '@emotion/weak-memoize': 0.3.1
stylis: 4.2.0 stylis: 4.2.0
/@emotion/css@11.11.2:
resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==}
dependencies:
'@emotion/babel-plugin': 11.11.0
'@emotion/cache': 11.11.0
'@emotion/serialize': 1.1.2
'@emotion/sheet': 1.2.2
'@emotion/utils': 1.2.1
dev: true
/@emotion/hash@0.9.1: /@emotion/hash@0.9.1:
resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}