Merge pull request #35 from recursivezero/bugfix/RZB-250030

Bugfix/rzb 250030

src/assets/styles/blogs/blog.css

@@ -0,0 +1,135 @@
+.container__blog {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 4rem 1.5rem;
+
+  & .blog-post-header {
+    text-align: center;
+    margin-bottom: 4rem;
+    position: relative;
+  }
+
+  & .blog-post-header::after {
+    content: '';
+    position: absolute;
+    bottom: -2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: linear-gradient(90deg, var(--primary), var(--primary-light));
+    border-radius: 3px;
+  }
+
+  & .blog-post-meta {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    margin-top: 1.5rem;
+    font-size: 0.95rem;
+    color: var(--secondary);
+  }
+
+  & .blog-post-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  & .blog-post-content {
+    font-size: 1.125rem;
+    line-height: 1.8;
+    color: var(--text);
+  }
+
+  /* Markdown Content Styling */
+  & .markdown-content {
+    margin-top: 4rem;
+  }
+
+  & .markdown-content h1,
+  & .markdown-content h2,
+  & .markdown-content h3,
+  & .markdown-content h4 {
+    color: var(--text);
+    margin: 2.5rem 0 1rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  & .markdown-content h1 {
+    font-size: 2.5rem;
+    background: linear-gradient(90deg, var(--text), var(--primary-light));
+    -webkit-text-fill-color: transparent;
+  }
+
+  & .markdown-content h2 {
+    font-size: 2rem;
+  }
+
+  & .markdown-content h3 {
+    font-size: 1.5rem;
+  }
+
+  & .markdown-content p {
+    margin-bottom: 1.5rem;
+    color: var(--secondary);
+  }
+
+  & .markdown-content strong {
+    color: var(--text);
+    font-weight: 600;
+  }
+
+  & .markdown-content blockquote {
+    margin: 2rem 0;
+    padding: 1.5rem 2rem;
+    border-left: 4px solid var(--primary);
+    background: color-mix(in srgb, var(--background) 97%, var(--primary) 3%);
+    border-radius: 0.5rem;
+  }
+
+  & .markdown-content pre {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    background: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
+    overflow-x: auto;
+  }
+
+  & .markdown-content code {
+    background: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
+    padding: 0.2em 0.4em;
+    border-radius: 0.3rem;
+    font-size: 0.9em;
+  }
+
+  & .markdown-content ul,
+  & .markdown-content ol {
+    margin: 1.5rem 0;
+    padding-left: 1.5rem;
+    color: var(--secondary);
+  }
+
+  & .markdown-content li {
+    margin: 0.5rem 0;
+  }
+
+  & .markdown-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+  }
+
+  & .markdown-content hr {
+    margin: 3rem 0;
+    border: none;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        var(--border),
+        transparent);
+  }
+}

src/assets/styles/blogs/index.css

@@ -0,0 +1,172 @@
+.container__blog {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+
+  & .blog-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 2rem;
+    margin-top: 3rem;
+    perspective: 1000px;
+  }
+
+  & .blog-card {
+    height: 100%;
+    border-radius: 1rem;
+    background: linear-gradient(145deg,
+        color-mix(in srgb, var(--background) 97%, var(--text) 3%),
+        var(--background));
+    box-shadow: 0 8px 32px -10px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    transform-style: preserve-3d;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  & .blog-card:hover {
+    transform: translateY(-10px) rotateX(4deg);
+    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
+  }
+
+  & .blog-card a {
+    height: 100%;
+    text-decoration: none;
+  }
+
+  & .blog-card-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  & .blog-card-image {
+    position: relative;
+    height: 240px;
+    overflow: hidden;
+  }
+
+  & .blog-card-image::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg,
+        transparent 0%,
+        transparent 70%,
+        var(--background) 100%);
+  }
+
+  & .blog-card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  & .blog-card:hover .blog-card-image img {
+    transform: scale(1.1);
+  }
+
+  & .blog-card-details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2rem;
+    flex: 1;
+    background: linear-gradient(to bottom,
+        transparent,
+        color-mix(in srgb, var(--background) 95%, var(--primary) 5%));
+  }
+
+  & .blog-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 1rem;
+    line-height: 1.3;
+    background: linear-gradient(90deg, var(--text), var(--primary-light));
+    -webkit-text-fill-color: transparent;
+    opacity: 0.9;
+    transition: opacity 0.3s;
+  }
+
+  & .blog-card:hover .blog-card-title {
+    opacity: 1;
+  }
+
+  & .blog-card-description {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--secondary);
+    margin-bottom: 1.5rem;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  & .blog-card-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1rem;
+    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    font-size: 0.875rem;
+    color: var(--secondary);
+  }
+
+  & .blog-post {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+  }
+
+  & .blog-post-content {
+    margin-top: 3rem;
+    font-size: 1.125rem;
+    line-height: 1.8;
+    color: var(--text);
+  }
+
+  & .blog-post-content h1,
+  & .blog-post-content h2,
+  & .blog-post-content h3 {
+    margin: 2rem 0 1rem;
+    background: linear-gradient(90deg, var(--text), var(--primary-light));
+    -webkit-text-fill-color: transparent;
+  }
+
+  & .blog-post-content p {
+    margin-bottom: 1.5rem;
+  }
+
+  .blog-post-content a {
+    color: var(--primary-light);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    transition: color 0.3s;
+  }
+
+  & .blog-post-content a:hover {
+    color: var(--primary);
+  }
+
+  @media (min-width: 640px) {
+    .blog-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .blog-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .blog-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+}

src/components/BlogCard.astro

@@ -6,24 +6,24 @@ const { post, height = "auto" } = props;
 const { url, title, description, image, author, date } = post;
 ---
 
-<article class="">
+<article class="blog-card">
   <a href={url}>
-    <div class="">
-      <div class="image">
-        <figure class={`overflow-hidden ${typeof height === "number" ? `h-[${height}px]` : `h-[${height}]`}`}>
-          <img src={image} alt={title} loading="lazy" class="" />
+    <div class="blog-card-content">
+      <div class="blog-card-image">
+        <figure class={`${typeof height === "number" ? `height: ${height}px` : `height: ${height}`}`}>
+          <img src={image} alt={title} loading="lazy" />
         </figure>
       </div>
-      <div class="">
-        <h3 class="">
+      <div class="blog-card-details">
+        <h3 class="blog-card-title">
           {title}
         </h3>
 
-        {description && <p class="">{description}</p>}
+        {description && <p class="blog-card-description">{description}</p>}
 
-        <div class="">
-          <div class="">
-            {author && <p class="font-medium">By {author}</p>}
+        <div class="blog-card-meta">
+          <div>
+            {author && <p>By {author}</p>}
           </div>
           {date && <time datetime={date.toString()}>{date}</time>}
         </div>