asas

Author: imswarnil

_includes/header.html

@@ -1,4 +1,4 @@
-<header class="header container">
+<header class="header">
   <div class="header__column">
 
     <!-- =========== BRANDING BLOCK (Logo + Title) =========== -->

_layouts/home.html

@@ -2,151 +2,6 @@
 layout: default
 ---
 
-<style>
-    /* Custom styles for this specific homepage layout */
-    .section {
-        padding-block: clamp(4rem, 8vw, 6rem);
-    }
-    .section-title {
-        text-align: center;
-        max-width: 55ch;
-        margin-inline: auto;
-        margin-block-end: 3rem;
-    }
-
-    /* Hero Section Styles */
-    .hero-grid {
-        display: grid;
-        align-items: center;
-        gap: 3rem;
-        grid-template-columns: 1fr; /* Mobile first */
-    }
-    @media (min-width: 64em) {
-        .hero-grid {
-            grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); /* Give text slightly more space */
-            text-align: left;
-        }
-        .hero-grid .post-heading__actions {
-            justify-content: flex-start;
-        }
-    }
-    .hero-image-wrapper {
-       
-    }
-    @media (min-width: 64em) {
-        .hero-image-wrapper {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        .hero-image-wrapper img {
-            max-width: 100%;
-            height: auto;
-        }
-    }
-
-    /* Category Cards Section */
-    .category-grid {
-        display: grid;
-        gap: 1.5rem;
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    }
-    .category-card {
-        background-color: var(--spruce-card-color-background);
-        border: 1px solid var(--spruce-base-color-border);
-        border-radius: var(--spruce-border-radius-lg);
-        padding: 2rem;
-        text-decoration: none;
-        display: block;
-        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-    }
-    .category-card:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--spruce-box-shadow);
-    }
-    .category-card__name {
-        font-family: var(--spruce-font-family-heading);
-        font-weight: 700;
-        color: var(--spruce-base-color-primary);
-        font-size: 1.25rem;
-        margin-bottom: 0.5rem;
-    }
-    .category-card__count {
-        font-size: var(--spruce-font-size-sm);
-        color: var(--spruce-base-color-text);
-    }
-    
-    /* Timeline Section */
-    .timeline {
-        position: relative;
-        max-width: 750px;
-        margin: 0 auto;
-        padding: 2rem 0;
-    }
-    .timeline::after {
-        content: '';
-        position: absolute;
-        width: 3px;
-        background-color: var(--spruce-base-color-border);
-        top: 0;
-        bottom: 0;
-        left: 50%;
-        margin-left: -1.5px;
-    }
-    .timeline-container {
-        padding: 10px 40px;
-        position: relative;
-        background-color: inherit;
-        width: 50%;
-    }
-    .timeline-container.left {
-        left: 0;
-    }
-    .timeline-container.right {
-        left: 50%;
-    }
-    .timeline-container::after {
-        content: '';
-        position: absolute;
-        width: 25px;
-        height: 25px;
-        right: -12.5px;
-        background-color: var(--spruce-base-color-background);
-        border: 4px solid var(--spruce-base-color-primary);
-        top: 15px;
-        border-radius: 50%;
-        z-index: 1;
-    }
-    .timeline-container.right::after {
-        left: -12.5px;
-    }
-    .timeline-content {
-        padding: 20px 30px;
-        background-color: var(--spruce-footer-color-background);
-        position: relative;
-        border-radius: var(--spruce-border-radius);
-        border: 1px solid var(--spruce-base-color-border);
-    }
-    @media screen and (max-width: 600px) {
-      .timeline::after {
-        left: 31px;
-      }
-      .timeline-container {
-        width: 100%;
-        padding-left: 70px;
-        padding-right: 25px;
-      }
-      .timeline-container.right {
-        left: 0%;
-      }
-      .timeline-container.left::after, 
-      .timeline-container.right::after {
-        left: 18px;
-      }
-    }
-
-</style>
-
 <main id="content">
     <!-- HERO SECTION -->
     <section class="hero-section">