fix: katex formatting and logo styles

This commit is contained in:
Youwen Wu 2024-04-03 14:54:51 -07:00
parent 64fb7f9f0c
commit b800cd7077
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
8 changed files with 28 additions and 26 deletions

View file

@ -34,6 +34,8 @@
--ring: 240 10% 3.9%;
--radius: 0.5rem;
--cursor-color: theme('colors.foreground');
}
.dark {
@ -75,7 +77,22 @@
body {
@apply bg-background text-foreground;
}
.text-link {
}
@layer components {
.dots-background {
--dot-bg: theme('colors.background');
--dot-color: theme('colors.foreground');
--dot-size: 1px;
--dot-space: 22px;
background:
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
center / var(--dot-space) var(--dot-space),
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
var(--dot-space) var(--dot-space),
var(--dot-color);
}
.link {
@apply text-blue-500 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-500 hover:underline visited:text-purple-500 dark:visited:text-purple-600;
}
}

View file

@ -253,7 +253,8 @@
<style lang="postcss">
.opendot {
@apply stroke-zinc-400 dark:stroke-zinc-400 fill-none;
/* @apply stroke-zinc-400 dark:stroke-zinc-400 fill-none; */
@apply stroke-zinc-400 dark:stroke-zinc-300 fill-none stroke-2;
}
.logo {
& .text {

View file

@ -1,5 +1,4 @@
<script>
import { GithubLogo } from 'svelte-radix';
import Separator from './ui/separator/separator.svelte';
import Socials from './Socials.svelte';
</script>

View file

View file

@ -61,14 +61,14 @@
</Popover.Trigger>
<Popover.Content>
<p>
You can reach my Gmail at <a class="text-link" href="mailto:youwenw@gmail.com"
You can reach my Gmail at <a class="link" href="mailto:youwenw@gmail.com"
>youwenw@gmail.com</a
>
</p>
<br />
<p>
Or, if you prefer, you can securely email me on Protonmail at <a
class="text-link"
class="link"
href="mailto:youwenw@protonmail.com">youwenw@protonmail.com</a
>
</p>

View file

@ -1,4 +1,4 @@
<main class="background w-full h-screen">
<main class="dots-background w-full h-screen">
<div class="container max-w-3xl mx-auto p-10">
<h1 class="text-4xl md:text-5xl font-bold text-center tracking-tight mt-20">
🚧 Under Construction 🚧

File diff suppressed because one or more lines are too long

View file

@ -13,10 +13,10 @@
<meta name="author" content="Youwen Wu" />
</svelte:head>
<main class="background px-4">
<main class="dots-background px-4">
<div class="container max-w-4xl 2xl:max-w-5xl mx-auto p-10">
<Typewriter mode="scramble" scrambleDuration={750}>
<h1 class="text-5xl sm:text-6xl font-bold text-center tracking-tight mt-20">
<h1 class="text-5xl sm:text-6xl font-bold text-center tracking-tight mt-14 sm:mt-20">
👋 Hi, I'm Youwen,
</h1>
</Typewriter>
@ -66,13 +66,12 @@
I'm currently working on:
<ul class="list-disc ml-4">
<li>
<a class="text-link" href="https://github.com/couscousdude/discard" target="_blank"
<a class="link" href="https://github.com/couscousdude/discard" target="_blank"
>discard</a
>, a lightweight self-generating flashcards app.
</li>
<li>
<a class="text-link" href="https://github.com/couscousdude/aural" target="_blank"
>aural</a
<a class="link" href="https://github.com/couscousdude/aural" target="_blank">aural</a
>, a no-frills Ollama client for interfacing with local LLMs using voice-to-text,
without any internet.
</li>
@ -108,18 +107,4 @@
</main>
<style lang="postcss">
.background {
--dot-bg: theme('colors.background');
--dot-color: theme('colors.foreground');
--dot-size: 1px;
--dot-space: 22px;
background:
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
center / var(--dot-space) var(--dot-space),
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
var(--dot-space) var(--dot-space),
var(--dot-color);
--cursor-color: theme('colors.foreground');
}
</style>