🎨 getting rid of fira, using simple icons

package.json

@@ -11,6 +11,7 @@
     "astro-critters": "^2.0.11",
     "astro-robots-txt": "^1.0.0",
     "preact": "^10.19.3",
+    "simple-icons": "^11.1.0",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3"
   },
@@ -24,6 +25,8 @@
   },
   "type": "module",
   "devDependencies": {
+    "@fontsource/handlee": "^5.0.18",
+    "@fontsource/redressed": "^5.0.18",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
     "eslint": "^8.56.0",
@@ -35,7 +38,7 @@
     "prettier": "^3.1.1",
     "prettier-config-standard": "^7.0.0",
     "prettier-plugin-astro": "^0.12.3",
-    "sass": "^1.69.6",
+    "sass": "^1.69.7",
     "tailwindcss-debug-screens": "^2.2.1"
   }
 }

src/components/blog/blog-about.astro

@@ -0,0 +1,39 @@
+---
+const ABOUT_STYLES = [
+  'col-span-4',
+  'row-span-1',
+  'bg-slate-300',
+  'dark:bg-slate-900',
+  'dark:text-slate-300',
+  'rounded-sm',
+  'shadow-[0_0_0.15rem_rgb(69_26_3)]', // rgb(69, 26, 3)
+  'dark:shadow-[0_0_0.15rem_rgb(253_230_138)]', // rgb(253, 230, 138)
+  'flex',
+  'items-center',
+  'justify-center',
+  'font-bold',
+  'text-black',
+  'font-rubik-doodle',
+  'w-full',
+  'h-full',
+  'transition-all',
+  'border-2',
+  'dark:border-amber-300',
+  'border-amber-950',
+  'responsive-text-xs',
+  'flex-row',
+  'gap-2',
+  'text-slate-900',
+  'dark:text-slate-300'
+].join(' ')
+
+import { siGitbook } from 'simple-icons'
+---
+
+<a class={ABOUT_STYLES} transition:name='blog' href='/'>
+  <span>Blog</span>
+  <svg
+    class='w-8 h-8 inline-flex dark:fill-amber-300 fill-amber-950'
+    set:html={siGitbook.svg}
+  />
+</a>

src/components/blog/blog-bento.astro

@@ -0,0 +1,10 @@
+---
+import Bento from '../main/bento.astro'
+import Buttons from '@components/main/buttons.astro'
+import BlogAbout from '@components/blog/blog-about.astro'
+---
+
+<Bento>
+  <Buttons />
+  <BlogAbout />
+</Bento>

src/components/featured-and-projects/about.astro

@@ -6,8 +6,8 @@ const ABOUT_STYLES = [
   'dark:bg-slate-900',
   'dark:text-slate-300',
   'rounded-sm',
-  'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3)
-  'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]', // rgb(253, 230, 138)
+  'shadow-[0_0_0.15rem_rgb(69_26_3)]', // rgb(69, 26, 3)
+  'dark:shadow-[0_0_0.15rem_rgb(253_230_138)]', // rgb(253, 230, 138)
   'flex',
   'items-center',
   'justify-center',