fix: update styles and improve layout components

Author: paripsky

src/components/DesktopDestroyer.astro

@@ -58,13 +58,13 @@ const tools = [
 
   const start = () => {
     window.addEventListener("click", onWindowClick, { capture: true });
-    container.style.transform = "none";
+    container.style.translate = "none";
     isOn = true;
   };
 
   const stop = () => {
     window.removeEventListener("click", onWindowClick, { capture: true });
-    container.style.transform = "";
+    container.style.translate = "";
     activeTool = null;
     document.body.style.cursor = "";
     isOn = false;

src/components/GIthubContributions.astro

@@ -2,7 +2,7 @@
   <h1 class="p-2">Github Activity</h1>
   <div
     id="github-contributions"
-    class="flex flex-col flex-wrap gap-0.5 h-[7.75rem] overflow-auto [scrollbar-width:thin] [scrollbar-gutter:stable]"
+    class="flex flex-col flex-wrap gap-0.5 h-31 overflow-auto [scrollbar-width:thin] [scrollbar-gutter:stable]"
   >
   </div>
 </div>

src/components/Section.astro

@@ -9,9 +9,9 @@ const { id, title, colors } = Astro.props;
 ---
 
 <section id={id} class="sm:px-4">
-  <div class="mt-36 md:mt-0 sm:min-h-[100dvh] mx-auto flex flex-col">
+  <div class="mt-36 md:mt-0 sm:min-h-dvh mx-auto flex flex-col">
     <h1
-      class={`gap-2 flex items-end text-3xl py-8 font-extrabold text-transparent bg-clip-text bg-gradient-to-r ${colors}`}
+      class={`gap-2 flex items-end text-3xl py-8 font-extrabold text-transparent bg-clip-text bg-linear-to-r ${colors}`}
     >
       {title}
       <slot name="after-title" />

src/components/Timeline.astro

@@ -2,8 +2,8 @@
 const entries = [
   {
     date: "2022 - Now",
-    title: "Full Stack Engineer",
-    name: "FinOut",
+    title: "Senior Full Stack Engineer",
+    name: "Finout",
     url: "https://www.finout.io/",
     description:
       "Building a cloud cost optimization app for multiple cloud providers using JavaScript, Node.js, React, Vite, Tailwind, and Headless UI.",

src/layouts/BlogLayout.astro

@@ -4,6 +4,8 @@ import { ClientRouter } from "astro:transitions";
 import { Icon } from "astro-icon/components";
 import { formatDate } from "../utils/date";
 
+import "../styles/global.css";
+
 type Props = MarkdownLayoutProps<{
   title: string;
   description: string;

src/layouts/Layout.astro

@@ -1,6 +1,8 @@
 ---
 import { ClientRouter } from "astro:transitions";
 
+import "../styles/global.css";
+
 interface Props {
   title: string;
 }

src/pages/index.astro

@@ -56,7 +56,7 @@ const posts = Object.values(postsGlob).map(
       <h1
         class="text-[clamp(2rem,7vw,3rem)] leading-tight font-medium tracking-tight motion-preset-slide-up motion-preset-fade-lg"
       >
-        Hi, I'm Yonatan. <br /> A Full Stack Engineer.
+        Hi, I'm Yonatan.
       </h1>
       <h2
         class="text-xl font-light text-pretty leading-relaxed text-neutral-300 max-sm:text-sm motion-preset-slide-up motion-preset-fade-lg motion-delay-300"

src/styles/global.css

@@ -1 +1,2 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";

tailwind.config.cjs

@@ -4,5 +4,5 @@ module.exports = {
 	theme: {
 		extend: {},
 	},
-	plugins: [require("@tailwindcss/typography"), require('tailwindcss-motion')],
+	plugins: [require('tailwindcss-motion')],
 }