add catppuccin tailwindcss

allengueco · Nov 6, 2024 · 92af34b · 92af34b
1 parent 1d51d9c
commit 92af34b
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@angular-devkit/build-angular": "^18.2.7",
     "@angular/cli": "^18.2.7",
     "@angular/compiler-cli": "^18.2.7",
+    "@catppuccin/tailwindcss": "^0.1.6",
     "@chromatic-com/storybook": "^2.0.2",
     "@compodoc/compodoc": "^1.1.23",
     "@storybook/addon-docs": "^8.3.5",

diff --git a/src/app/experience/experience.component.html b/src/app/experience/experience.component.html
@@ -1,9 +1,9 @@
 <div class="container flex flex-col">
   @for (e of experiences; track $index) {
-    <div class="max-w-lg p-6 bg-white border border-gray-200">
-      <h5 class="font-sans leading-snug mb-1 text-lg font-bold tracking-tight text-gray-900">{{e.title}} · {{e.company}}</h5>
-      <p class="text-slate-500">{{e.duration}}</p>
-      <p class="font-sans leading-none text-base font-normal text-gray-700">{{e.summary}}</p>
+    <div class="max-w-lg p-6 bg-lavender border border-gray-200 mb-4 rounded-lg">
+      <h5 class="font-sans leading-snug mb-1 text-xl font-bold tracking-tight text-gray-900">{{e.title}} · {{e.company}}</h5>
+      <p class="text-subtext0">{{e.duration}}</p>
+      <p class="font-sans leading-none text-lg font-normal text-gray-700">{{e.summary}}</p>
       <div class="flex flex-wrap">
         @for (skill of e.skills; track $index) {
           <div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full border border-gray-300">

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,6 +1,6 @@
 <section class="container flex flex-col h-full w-full items-center">
   <h1 class="antialiased tracking-tighter font-medium text-6xl font-code">
-    <a class="text-green-500">$</a> allen gueco</h1>
+    <a class="text-green">$</a> allen gueco</h1>
   <h2 class="text-3xl">i am a software engineer based in philly</h2>
   <app-experience></app-experience>
 </section>
diff --git a/src/index.html b/src/index.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 
-<body>
+<body class="bg-base">
   <app-root></app-root>
 </body>
 

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,6 +11,8 @@ export default {
       }
     },
   },
-  plugins: [],
+  plugins: [require('@catppuccin/tailwindcss')({
+    defaultFlavour: 'frappe'
+  })],
 } satisfies Config