feat: the catppuccin update
This commit is contained in:
zackartz
parent
25ca02da0a
commit
141de7c95f
13 changed files with 1326 additions and 3116 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.direnv/
|
||||
|
|
@ -7,5 +7,10 @@ import tailwind from "@astrojs/tailwind";
|
|||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://zackmyers.io",
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
theme: "catppuccin-frappe",
|
||||
},
|
||||
},
|
||||
integrations: [mdx(), sitemap(), tailwind()],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@
|
|||
pkgs.nodePackages.pnpm
|
||||
# pkgs.yarn
|
||||
|
||||
pkgs.prettierd
|
||||
pkgs.nodePackages.typescript
|
||||
pkgs.nodePackages.typescript-language-server
|
||||
pkgs.nodePackages."@tailwindcss/language-server"
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"typescript": "^5.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "^0.1.6",
|
||||
"@tailwindcss/typography": "^0.5.12"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4299
pnpm-lock.yaml
generated
4299
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -6,7 +6,7 @@ interface Props {
|
|||
const { date } = Astro.props;
|
||||
---
|
||||
|
||||
<time datetime={date.toISOString()}>
|
||||
<time class="text-ctp-sky" datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString('en-us', {
|
||||
year: 'numeric',
|
||||
|
|
|
|||
|
|
@ -61,6 +61,17 @@ Now, lets add the package spec:
|
|||
|
||||
```nix
|
||||
{
|
||||
outputs = {
|
||||
systems,
|
||||
nixpkgs,
|
||||
self,
|
||||
...
|
||||
} @ inputs: let
|
||||
eachSystem = f:
|
||||
nixpkgs.lib.genAttrs (import systems) (
|
||||
system:
|
||||
f nixpkgs.legacyPackages.${system}
|
||||
);
|
||||
in {
|
||||
# add packages :)
|
||||
packages = eachSystem (pkgs: {
|
||||
|
|
|
|||
|
|
@ -9,15 +9,10 @@ type Props = any;
|
|||
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<html lang="en" class="ctp-mocha bg-ctp-base">
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
<style>
|
||||
main {
|
||||
width: calc(100% - 2em);
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -53,9 +48,9 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
|||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="bg-base">
|
||||
<Header />
|
||||
<main>
|
||||
<main class="px-8">
|
||||
<article>
|
||||
<div class="hero-image">
|
||||
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
|
||||
|
|
@ -72,8 +67,8 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
|||
)
|
||||
}
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<hr />
|
||||
<h1 class="text-ctp-text">{title}</h1>
|
||||
<hr class="border-ctp-surface0" />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Layout from '../layouts/BlogPost.astro';
|
|||
pubDate={new Date('April 13 2024')}
|
||||
>
|
||||
<article>
|
||||
<h3>Hey there!</h3>
|
||||
<p>My name is Zachary Myers, I am a software engineer from Honolulu, now living in Saint Joseph, MI. I am most interested in backend programming, and primarily use languages like Rust and Go, though also have plenty of experience with JavaScript and TypeScript as well. I am looking for work! Feel free to <a href="/cv.pdf" target="_blank">check out my cv</a> and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!</p>
|
||||
<h3 class="">Hey there!</h3>
|
||||
<p class="">My name is Zachary Myers, I am a software engineer from Honolulu, now living in Saint Joseph, MI. I am most interested in backend programming, and primarily use languages like Rust and Go, though also have plenty of experience with JavaScript and TypeScript as well. I am looking for work! Feel free to <a href="/cv.pdf" target="_blank">check out my cv</a> and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!</p>
|
||||
</article>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const posts: any[] = (await getCollection('blog')).sort(
|
|||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="ctp-mocha bg-ctp-base">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
|
|
@ -24,11 +24,11 @@ const posts: any[] = (await getCollection('blog')).sort(
|
|||
<ul class="space-y-4">
|
||||
{
|
||||
posts.sort((a, b) => b.data.pubDate - a.data.pubDate).map((post) => (
|
||||
<li class="p-4 rounded-xl shadow-lg border border-gray-300">
|
||||
<li class="p-4 rounded-xl shadow-lg border border-ctp-surface2">
|
||||
<a href={`/blog/${post.slug}/`}>
|
||||
<img class="rounded-lg" width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
<h4 class="text-2xl p-3 font-bold text-center">{post.data.title}</h4>
|
||||
<p class="text-gray-700 text-center">
|
||||
<h4 class="text-2xl p-3 font-bold text-center text-ctp-mauve">{post.data.title}</h4>
|
||||
<p class="text-center">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
|||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="ctp-mocha bg-ctp-base">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body class="h-screen relative">
|
||||
<body class="h-screen bg-base relative">
|
||||
<Header />
|
||||
<main class="p-16 flex flex-col w-full h-[84%]
|
||||
justify-center items-center">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<h1 class="font-bold text-5xl">Zachary Myers</h1>
|
||||
<p class="py-4">Software Engineer, Hardware Hacker, Photographer</p>
|
||||
<h1 class="font-bold text-ctp-text text-5xl">Zachary Myers</h1>
|
||||
<p class="py-4 text-ctp-blue">Software Engineer, Hardware Hacker, Photographer</p>
|
||||
</div>
|
||||
<a href="/about">
|
||||
<button class="rounded-full bg-black text-white w-32 mt-4 flex px-4 py-3 justify-center">About me <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<button class="rounded-full bg-ctp-blue text-black w-32 mt-4 flex px-4 py-3 justify-center">About me <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
@tailwind base;
|
||||
@tailwind utilities;
|
||||
@tailwind components;
|
||||
|
||||
:root {
|
||||
--gray-dark: var(--ctp-text);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply text-ctp-text;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,10 +2,36 @@
|
|||
export default {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
color: "rgba(var(--ctp-text), 1)",
|
||||
"--tw-prose-body": "rgba(var(--ctp-text), 1)",
|
||||
"--tw-prose-headings": "rgba(var(--ctp-mauve), 1)",
|
||||
"--tw-prose-hr": "rgba(var(--ctp-surface0), 1)",
|
||||
"--tw-prose-code": "rgba(var(--ctp-pink), 1)",
|
||||
a: {
|
||||
color: "rgba(var(--ctp-blue), 1)",
|
||||
"text-decoration-thickness": ".1em",
|
||||
"text-underline-offset": "4px",
|
||||
"&:hover": {
|
||||
color: "rgba(var(--ctp-sky), 1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Iosevka Web", "ui-monospace", "monospace"],
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
plugins: [
|
||||
require("@catppuccin/tailwindcss")({
|
||||
prefix: "ctp",
|
||||
defaultFlavor: "mocha",
|
||||
}),
|
||||
require("@tailwindcss/typography"),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue