Fix style not applied to "Projects"

(astro islands issue)
kubgus · Aug 26, 2024 · bea74f1 · bea74f1
1 parent a118236
commit bea74f1
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;