From bea74f11db6ad63e7e63b20ba00e43a65031aad0 Mon Sep 17 00:00:00 2001
From: kubgus <ja.gustafik@outlook.sk>
Date: Tue, 27 Aug 2024 01:19:42 +0200
Subject: [PATCH] Fix style not applied to "Projects" (astro islands issue)

---
 src/components/content/about-me.astro | 2 +-
 src/components/content/blog.astro     | 2 +-
 src/components/content/projects.vue   | 2 +-
 src/pages/index.astro                 | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/content/about-me.astro b/src/components/content/about-me.astro
index 201cb4c..d49e4e8 100644
--- a/src/components/content/about-me.astro
+++ b/src/components/content/about-me.astro
@@ -3,7 +3,7 @@ import TechMarquee from "../tech-marquee.astro";
 import PictureFrame from "../picture-frame.astro";
 ---
 
-<div>
+<div class="content-inner">
     <h1>Call me Kubo!</h1>
     <p>
         I'm a passionate (mostly) self-taught programmer with a devotion to life-long learning and improvement.
diff --git a/src/components/content/blog.astro b/src/components/content/blog.astro
index 67e9c56..9d6a2d9 100644
--- a/src/components/content/blog.astro
+++ b/src/components/content/blog.astro
@@ -6,7 +6,7 @@ const posts = await Astro.glob("../../pages/blog/*.md");
 posts.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf());
 ---
 
-<div>
+<div class="content-inner">
     <h1>Blog Posts</h1>
     {
         posts.map((post) => (
diff --git a/src/components/content/projects.vue b/src/components/content/projects.vue
index 8aaa03c..7c2529b 100644
--- a/src/components/content/projects.vue
+++ b/src/components/content/projects.vue
@@ -8,7 +8,7 @@
 </script>
 
 <template>
-    <div>
+    <div class="content-inner">
         <div id="random-project">
             <h1>Random Project</h1>
             <p>This project was picked just for you to check out!</p>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f9e4aa8..ceb08ec 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -72,14 +72,14 @@ const title = "Jakub Gustafik";
 </style>
 
 <style is:global>
-    .content > div {
+    .content-inner {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         font-size: 1.2rem;
     }
 
-    .content > div > * {
+    .content-inner > * {
         opacity: 0;
         scale: 0.9;
         animation: fade-in ease-out 0.2s forwards;