feat(main): replace emotion CSS with tailwind
This commit is contained in:
parent
e138285b7b
commit
e43193d464
9 changed files with 96 additions and 155 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
export default {
|
||||
plugins: {
|
||||
"postcss-import": {},
|
||||
"tailwindcss/nesting": {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body class="dark">
|
||||
<noscript>JavaScript is not enabled!</noscript>
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
<div id="root">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,31 @@
|
|||
<script>
|
||||
import { css } from "@emotion/css"
|
||||
|
||||
import { page } from "$app/stores"
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li aria-current={$page.url.pathname === "/" ? "page" : undefined}>
|
||||
<a target="_blank" href="https://blog.developomp.com">Blog</a>
|
||||
</li>
|
||||
<li aria-current={$page.url.pathname === "/about" ? "page" : undefined}>
|
||||
<a target="_blank" href="https://portfolio.developomp.com">Portfolio</a>
|
||||
</li>
|
||||
<li
|
||||
class={css`
|
||||
color: gray;
|
||||
`}
|
||||
>
|
||||
Resume (WIP)
|
||||
<a target="_blank" href="https://portfolio.developomp.com">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-dark-footer-text">Resume (WIP)</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,10 @@
|
|||
<script>
|
||||
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"
|
||||
</script>
|
||||
|
||||
<!-- prevent flickering while theme is loading -->
|
||||
{#if browser}
|
||||
<div
|
||||
class={css`
|
||||
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>
|
||||
<Navbar />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<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 GitHub from "@inqling/svelte-icons/simple-icons/github.svelte"
|
||||
import Mastodon from "@inqling/svelte-icons/simple-icons/mastodon.svelte"
|
||||
|
|
@ -9,7 +7,6 @@
|
|||
|
||||
import HandWave from "../components/HandWave.svelte"
|
||||
import { discordInviteLink } from "../constants"
|
||||
import { SocialProfile } from "../theme"
|
||||
|
||||
function myAge() {
|
||||
const now = new Date()
|
||||
|
|
@ -20,7 +17,10 @@
|
|||
let month = now.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
|
||||
}
|
||||
|
||||
|
|
@ -28,35 +28,20 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<img
|
||||
class={"logo " +
|
||||
css`
|
||||
box-shadow: 0 0 40px 20px ${darkTheme.color.text.gray};
|
||||
`}
|
||||
src="/favicon.svg"
|
||||
alt="logo"
|
||||
width="200"
|
||||
height="200"
|
||||
/>
|
||||
<img class="logo" src="/favicon.svg" alt="logo" width="200" height="200" />
|
||||
|
||||
<h1><HandWave />Hello! I am <b>developomp</b></h1>
|
||||
|
||||
<h2>Who am I?</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Contact</h2>
|
||||
|
||||
<table
|
||||
class={css`
|
||||
th,
|
||||
td {
|
||||
border: 1px solid ${darkTheme.component.table.color.border};
|
||||
}
|
||||
`}
|
||||
>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Platform</th>
|
||||
<th>ID</th>
|
||||
|
|
@ -80,24 +65,29 @@
|
|||
</table>
|
||||
|
||||
<i class="note">
|
||||
*Note that I may not be able to read your messages if you reach out to me using methods not
|
||||
listed above.
|
||||
*Note that I may not be able to read your messages if you reach out to me
|
||||
using methods not listed above.
|
||||
</i>
|
||||
|
||||
<div class="socials-and-profiles">
|
||||
<a
|
||||
class={SocialProfile}
|
||||
class="social-profile"
|
||||
target="_blank"
|
||||
href="https://github.com/developomp"
|
||||
aria-label="GitHub link"
|
||||
>
|
||||
<GitHub />
|
||||
</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 />
|
||||
</a>
|
||||
<a
|
||||
class={SocialProfile}
|
||||
class="social-profile"
|
||||
target="_blank"
|
||||
href="https://twitter.com/developomp"
|
||||
aria-label="Twitter link"
|
||||
|
|
@ -105,7 +95,7 @@
|
|||
<Twitter />
|
||||
</a>
|
||||
<a
|
||||
class={SocialProfile}
|
||||
class="social-profile"
|
||||
target="_blank"
|
||||
href="https://mastodon.social/@developomp"
|
||||
aria-label="Mastodon link"
|
||||
|
|
@ -113,7 +103,7 @@
|
|||
<Mastodon />
|
||||
</a>
|
||||
<a
|
||||
class={SocialProfile}
|
||||
class="social-profile"
|
||||
target="_blank"
|
||||
href="https://youtube.com/@developomp"
|
||||
aria-label="YouTube link"
|
||||
|
|
@ -122,18 +112,14 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.logo {
|
||||
aspect-ratio: auto 1 / 1;
|
||||
border-radius: 50%;
|
||||
margin: 5rem auto;
|
||||
@apply mx-auto my-20 aspect-square rounded-full shadow-dark-text-gray;
|
||||
box-shadow: 0 0 40px 20px;
|
||||
}
|
||||
|
||||
.socials-and-profiles {
|
||||
margin-top: 3rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
@apply mt-12 flex flex-wrap gap-6;
|
||||
}
|
||||
|
||||
.note {
|
||||
|
|
|
|||
|
|
@ -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
13
pnpm-lock.yaml
generated
|
|
@ -186,9 +186,6 @@ importers:
|
|||
'@developomp-site/theme':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/theme
|
||||
'@emotion/css':
|
||||
specifier: ^11.11.2
|
||||
version: 11.11.2
|
||||
'@fontsource/noto-sans-kr':
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3
|
||||
|
|
@ -2232,16 +2229,6 @@ packages:
|
|||
'@emotion/weak-memoize': 0.3.1
|
||||
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:
|
||||
resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue