youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: update dark mode and adjust accent colors

Browse source
This commit is contained in:
Youwen Wu 2024-04-04 15:11:35 -07:00
parent e39cce1da6
commit c26de6ecfe
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
5 changed files with 36 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/lib/app.css
View file

@ -7,7 +7,7 @@
--background: 0 0% 93%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted: 240 4.8% 90%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 96%;
@ -22,11 +22,11 @@
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--secondary: 240 4.8% 90%;
--secondary-foreground: 240 5.9% 12%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--accent: 240 4.8% 90%;
--accent-foreground: 240 5.9% 12%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;
@ -39,16 +39,16 @@
}
.dark {
--background: 240 10% 3.9%;
--background: 240 10% 7%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover: 240 10% 6%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card: 240 10% 6%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
@ -88,8 +88,7 @@
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif,
'Noto Color Emoji';
sans-serif;
}
}

2
src/lib/components/Blog/Article.svelte
View file

@ -23,7 +23,7 @@
{/if}
</div>
<div class="markdown-body mt-8">
<div class="markdown-body mt-8 font-serif">
{@html content}
</div>
</article>

43
src/lib/components/ui/button/index.ts
View file

@ -1,35 +1,34 @@
import type { Button as ButtonPrimitive } from "bits-ui";
import { type VariantProps, tv } from "tailwind-variants";
import Root from "./button.svelte";
import type { Button as ButtonPrimitive } from 'bits-ui';
import { type VariantProps, tv } from 'tailwind-variants';
import Root from './button.svelte';
const buttonVariants = tv({
base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9'
}
},
defaultVariants: {
variant: "default",
size: "default",
},
variant: 'default',
size: 'default'
}
});
type Variant = VariantProps<typeof buttonVariants>["variant"];
type Size = VariantProps<typeof buttonVariants>["size"];
type Variant = VariantProps<typeof buttonVariants>['variant'];
type Size = VariantProps<typeof buttonVariants>['size'];
type Props = ButtonPrimitive.Props & {
variant?: Variant;
@ -46,5 +45,5 @@ export {
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants,
buttonVariants
};

8
src/lib/styles/markdown.css
View file

@ -29,7 +29,7 @@
}
dl {
font-family: monospace, monospace;
font-family: monospace;
}
dl dt {
font-weight: bold;
@ -87,7 +87,7 @@
padding: 1em;
overflow: auto;
font-size: 0.85rem;
font-family: monospace, monospace;
font-family: monospace;
border: 1px dashed rgba(250, 100, 50, 0.5);
}
@ -95,7 +95,7 @@
margin: 1em 0;
}
figure figcaption {
font-family: monospace, monospace;
font-family: monospace;
font-size: 0.75em;
text-align: center;
color: grey;
@ -114,7 +114,7 @@
@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
}
.markdown-alert-title {
@apply flex items-center font-medium text-xl;
@apply flex items-center font-medium text-xl font-sans;
}
.markdown-alert-caution > .markdown-alert-title {
@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;

4
src/routes/+page.svelte
View file

@ -88,9 +88,7 @@
</p>
</Card.Content>
<Card.Footer>
<Button variant="outline" href="/blog"
>Go to the Coredump<ArrowRight class="ml-2" /></Button
>
<Button variant="outline" href="/blog">Go to my blog<ArrowRight class="ml-2" /></Button>
</Card.Footer>
</Card.Root>
<Card.Root class="col-span-2">