arsxy-theme 1.0.0.pre.rc

data/_sass/components/_post.scss

@@ -0,0 +1,1039 @@
+/* Post styles */
+.post {
+  margin-bottom: $spacing-xl;
+  
+  /* Post header */
+  .post-header {
+    margin-bottom: $spacing-lg;
+    
+    .post-title {
+      font-size: 2.8rem;
+      line-height: 1.2;
+      margin-bottom: $spacing-sm;
+      word-wrap: break-word;
+      position: relative;
+      background: linear-gradient(to right, $primary-color, $secondary-color);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      color: transparent;
+      
+      @media (max-width: $on-palm) {
+        font-size: 2.2rem;
+      }
+    }
+    
+    .post-description {
+      font-size: 1.3rem;
+      color: $dark-gray;
+      line-height: 1.5;
+      margin-bottom: $spacing-md;
+      font-weight: 300;
+      padding-left: $spacing-md;
+      border-left: 3px solid rgba($accent-color, 0.5);
+    }
+    
+    /* Post header meta section */
+    .post-meta {
+      font-size: $small-font-size;
+      color: $dark-gray;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: $spacing-sm;
+      margin-bottom: $spacing-md;
+      
+      .post-date-author {
+        background-color: rgba($primary-color, 0.15);
+        border-radius: $border-radius;
+        padding: 4px 10px;
+        display: inline-flex;
+        align-items: center;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba($primary-color, 0.2);
+        height: 28px; /* Same height as other elements */
+        font-size: $smaller-font-size; /* Same font size as other elements */
+        
+        &:hover {
+          background-color: rgba($primary-color, 0.25);
+          transform: translateY(-1px);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .post-date {
+          color: $primary-color;
+          font-weight: 500;
+          background-color: transparent;
+          padding: 0;
+        }
+        
+        .separator {
+          color: rgba($primary-color, 0.6);
+          margin: 0 6px;
+          font-weight: 300;
+        }
+        
+        .post-author {
+          color: darken($secondary-color, 15%); /* Darkened for better contrast */
+          font-weight: 600; /* Increased from 500 to 600 */
+          background-color: transparent;
+          padding: 0;
+        }
+      }
+      
+      .post-categories {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        
+        a {
+          display: inline-flex;
+          align-items: center;
+          height: 28px; /* Smaller height compared to date-author */
+          background: rgba($secondary-color, 0.15);
+          padding: 0 10px;
+          border-radius: $border-radius;
+          font-size: $smaller-font-size;
+          color: darken($secondary-color, 15%); /* Darkened for better contrast */
+          font-weight: 600; /* Increased from default to 600 */
+          border: 1px solid rgba($secondary-color, 0.3);
+          transition: $transition-base;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          
+          &:hover {
+            background: rgba($secondary-color, 0.25);
+            color: darken($secondary-color, 20%); /* Even darker on hover for better contrast */
+            text-decoration: none;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+          }
+        }
+      }
+      
+      .reading-time {
+        background-color: rgba($light-gray, 0.7);
+        padding: 4px 8px;
+        border-radius: $border-radius;
+        display: inline-flex;
+        align-items: center;
+        height: 28px; /* Smaller height compared to date-author */
+        transition: $transition-base;
+        border: 1px solid rgba($light-gray, 0.8);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        font-size: $smaller-font-size;
+        
+        &:hover {
+          background-color: rgba($light-gray, 0.9);
+          transform: translateY(-1px);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        
+        &::before {
+          content: '⏱️';
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+  
+  /* Post featured image */
+  .post-featured-image {
+    margin-bottom: $spacing-lg;
+    border-radius: $border-radius-lg;
+    overflow: hidden;
+    box-shadow: $shadow-md;
+    transition: $transition-base;
+    max-height: 450px; /* Set maximum height for consistent image sizing */
+    display: flex; /* Use flexbox to center the image vertically */
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: $shadow-lg;
+    }
+    
+    img {
+      width: 100%;
+      height: 100%;
+      max-height: 450px; /* Ensure image doesn't exceed container */
+      object-fit: cover; /* Ensure image covers area without distortion */
+      display: block;
+      border-radius: $border-radius;
+      transition: $transition-base;
+      
+      &:hover {
+        transform: scale(1.02);
+      }
+    }
+  }
+  
+  /* CSS-only featured images */
+  .css-featured-image {
+    height: 350px;
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    /* Pattern 0 - Diagonal stripes */
+    &[data-pattern="0"] {
+      background: linear-gradient(135deg, $primary-color, $secondary-color);
+      background-size: 100% 100%;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 20px,
+          rgba(255, 255, 255, 0.1) 20px,
+          rgba(255, 255, 255, 0.1) 40px
+        );
+      }
+    }
+    
+    /* Pattern 1 - Radial gradient */
+    &[data-pattern="1"] {
+      background: radial-gradient(circle at 30% 40%, $secondary-color, $accent-color);
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(
+          circle at 70% 60%,
+          rgba(255, 255, 255, 0.2) 0%,
+          transparent 30%
+        );
+      }
+    }
+    
+    /* Pattern 2 - Geometric shapes */
+    &[data-pattern="2"] {
+      background: linear-gradient(to right, $primary-color, $accent-color);
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: 
+          linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.1) 49%, rgba(255, 255, 255, 0.1) 51%, transparent 52%),
+          linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.1) 49%, rgba(255, 255, 255, 0.1) 51%, transparent 52%);
+        background-size: 60px 60px;
+      }
+    }
+    
+    /* Pattern 3 - Waves */
+    &[data-pattern="3"] {
+      background: linear-gradient(to bottom, $secondary-color, $accent-color);
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: 
+          radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, transparent 35%, transparent),
+          radial-gradient(circle at 0% 50%, transparent 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, transparent 35%, transparent);
+        background-size: 60px 120px;
+      }
+    }
+    
+    /* Pattern 4 - Grid */
+    &[data-pattern="4"] {
+      background: linear-gradient(135deg, $accent-color, $primary-color);
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image:
+          linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+        background-size: 20px 20px;
+      }
+    }
+    
+    /* Pattern 5 - Dots */
+    &[data-pattern="5"] {
+      background: linear-gradient(45deg, $primary-color, $secondary-color);
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px);
+        background-size: 20px 20px;
+      }
+    }
+    
+    .css-image-title {
+      font-size: 10rem;
+      font-weight: 900;
+      color: rgba(255, 255, 255, 0.2);
+      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+      line-height: 1;
+      user-select: none;
+      z-index: 1;
+      position: relative;
+      transition: $transition-base;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -20px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 80px;
+        height: 4px;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 2px;
+      }
+    }
+    
+    &:hover {
+      .css-image-title {
+        color: rgba(255, 255, 255, 0.3);
+        transform: scale(1.05) translateY(-5px);
+      }
+    }
+  }
+  
+  /* Post content */
+  .post-content {
+    margin-bottom: $spacing-lg;
+    
+    /* Larger top margins for headings within content */
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: $spacing-xl;
+      margin-bottom: $spacing-md;
+      font-weight: 700;
+      position: relative;
+      
+      /* Add anchor links to headings */
+      .heading-anchor {
+        position: absolute;
+        margin-left: -1em;
+        opacity: 0;
+        font-weight: 400;
+        font-size: 0.8em;
+        transition: $transition-base;
+        color: $dark-gray;
+        text-decoration: none;
+        
+        &:hover {
+          color: $primary-color;
+        }
+      }
+      
+      &:hover {
+        .heading-anchor {
+          opacity: 1;
+        }
+      }
+    }
+    
+    h2 {
+      &::after {
+        content: '';
+        display: block;
+        width: 3rem;
+        height: 0.2rem;
+        background: linear-gradient(to right, $secondary-color, $accent-color);
+        margin-top: 0.5rem;
+        border-radius: 1rem;
+      }
+    }
+    
+    /* First heading doesn't need large top margin */
+    > h1:first-child, > h2:first-child, > h3:first-child,
+    > h4:first-child, > h5:first-child, > h6:first-child {
+      margin-top: 0;
+    }
+    
+    /* Responsive images with shadow and hover effect */
+    img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      margin: 0 auto $spacing-md auto;
+      border-radius: $border-radius;
+      box-shadow: $shadow-sm;
+      transition: $transition-base;
+      
+      &:hover {
+        box-shadow: $shadow-md;
+        transform: scale(1.01);
+      }
+    }
+    
+    /* Image captions */
+    .image-caption {
+      text-align: center;
+      font-size: $small-font-size;
+      color: $dark-gray;
+      margin-top: $spacing-xs;
+      margin-bottom: $spacing-md;
+      font-style: italic;
+    }
+    
+    /* Make lists more readable */
+    ul, ol {
+      padding-left: $spacing-sm;
+      
+      li {
+        margin-bottom: $spacing-sm;
+        padding-left: $spacing-xs;
+        
+        &::marker {
+          color: $secondary-color;
+        }
+      }
+    }
+    
+    /* Modern blockquote style */
+    blockquote {
+      margin: $spacing-lg 0;
+      position: relative;
+      
+      &::before {
+        content: '"';
+        position: absolute;
+        top: -20px;
+        left: -10px;
+        font-size: 5rem;
+        color: rgba($secondary-color, 0.2);
+        font-family: Georgia, serif;
+        line-height: 1;
+      }
+    }
+    
+    /* Table styles for better readability */
+    table {
+      width: 100%;
+      margin-bottom: $spacing-lg;
+      border-collapse: separate;
+      border-spacing: 0;
+      border-radius: $border-radius;
+      overflow: hidden;
+      box-shadow: $shadow-sm;
+      
+      th, td {
+        padding: $spacing-sm;
+        border: none;
+        border-bottom: 1px solid $border-color;
+      }
+      
+      th {
+        background: linear-gradient(to right, rgba($primary-color, 0.1), rgba($secondary-color, 0.1));
+        color: $secondary-color;
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: $smaller-font-size;
+        letter-spacing: 0.5px;
+      }
+      
+      tr:last-child td {
+        border-bottom: none;
+      }
+      
+      tr {
+        transition: $transition-base;
+        
+        &:nth-child(even) {
+          background-color: rgba($light-gray, 0.5);
+        }
+        
+        &:hover {
+          background-color: rgba($secondary-color, 0.05);
+        }
+      }
+    }
+    
+    /* Code blocks */
+    pre {
+      border-radius: $border-radius;
+      margin: $spacing-md 0 $spacing-lg;
+      position: relative;
+      box-shadow: $shadow-md;
+      
+      &::before {
+        content: attr(data-language);
+        position: absolute;
+        top: 0;
+        right: $spacing-sm;
+        font-size: $smaller-font-size;
+        color: rgba(white, 0.7);
+        background-color: rgba(black, 0.3);
+        padding: 0 $spacing-xs;
+        border-radius: 0 0 $border-radius-sm $border-radius-sm;
+      }
+    }
+    
+    /* Links with subtle animation */
+    a:not(.heading-anchor) {
+      color: $primary-color;
+      position: relative;
+      text-decoration: none;
+      font-weight: 500;
+      transition: $transition-base;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        transform: scaleX(0);
+        height: 2px;
+        bottom: -2px;
+        left: 0;
+        background-color: $accent-color;
+        transform-origin: bottom right;
+        transition: transform 0.3s ease-out;
+      }
+      
+      &:hover {
+        color: $accent-color;
+        
+        &::after {
+          transform: scaleX(1);
+          transform-origin: bottom left;
+        }
+      }
+    }
+  }
+  
+  /* Table of contents */
+  .table-of-contents {
+    background: linear-gradient(to bottom right, rgba($light-gray, 0.8), rgba($background-color, 0.8));
+    padding: $spacing-md;
+    margin-bottom: $spacing-lg;
+    border-radius: $border-radius;
+    border-left: 4px solid $secondary-color;
+    box-shadow: $shadow-sm;
+    position: relative;
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    
+    h2 {
+      margin-top: 0;
+      margin-bottom: $spacing-sm;
+      font-size: 1.2rem;
+      color: $secondary-color;
+      
+      &::after {
+        width: 2rem;
+      }
+    }
+    
+    .toc {
+      margin-bottom: 0;
+      list-style-type: none;
+      padding-left: 0;
+      
+      .toc-h2 {
+        margin-top: $spacing-xs;
+      }
+      
+      .toc-h3 {
+        padding-left: $spacing-md;
+        font-size: 0.9em;
+      }
+      
+      .toc-h4 {
+        padding-left: $spacing-lg;
+        font-size: 0.8em;
+      }
+      
+      .toc-entry {
+        margin-bottom: $spacing-xs;
+        transition: $transition-base;
+        
+        &:hover {
+          transform: translateX(3px);
+        }
+        
+        a {
+          display: inline-block;
+          color: $text-color;
+          text-decoration: none;
+          transition: $transition-base;
+          position: relative;
+          padding-left: $spacing-sm;
+          
+          &::before {
+            content: '•';
+            position: absolute;
+            left: 0;
+            color: $accent-color;
+          }
+          
+          &:hover {
+            color: $primary-color;
+          }
+        }
+      }
+    }
+  }
+  
+  /* Tags */
+  .post-tags {
+    margin-top: $spacing-lg;
+    padding: $spacing-md;
+    border-radius: $border-radius;
+    border: 1px solid darken($border-color, 10%);
+    box-shadow: $shadow-sm;
+    
+    h3 {
+      font-size: 1.1rem;
+      margin-top: 0;
+      margin-bottom: $spacing-sm;
+      color: $secondary-color;
+    }
+    
+    .tag-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: $spacing-xs;
+      
+      li {
+        margin: 0;
+      }
+      
+      .tag {
+        display: inline-block;
+        background-color: rgba($accent-color, 0.15); /* Slightly increased opacity */
+        color: darken($accent-color, 10%); /* Darker text color for better contrast */
+        padding: 5px 12px;
+        border-radius: $border-radius;
+        font-size: $smaller-font-size;
+        text-decoration: none;
+        transition: $transition-base;
+        border: 1px solid rgba($accent-color, 0.3); /* Slightly darker border */
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        
+        &:hover {
+          background-color: $accent-color;
+          color: white;
+          text-decoration: none;
+          transform: translateY(-2px);
+          box-shadow: $shadow-sm;
+        }
+      }
+    }
+  }
+  
+  /* Post navigation (previous/next) */
+  .post-navigation {
+    display: flex;
+    justify-content: space-between;
+    margin-top: $spacing-xl;
+    padding-top: $spacing-md;
+    gap: $spacing-sm;
+    
+    a {
+      flex: 0 0 48%;
+      padding: $spacing-md;
+      background: rgba($gray, 0.7); /* Darker solid background instead of gradient */
+      border-radius: $border-radius;
+      text-decoration: none;
+      color: $text-color;
+      transition: $transition-base;
+      border: 1px solid $border-color;
+      position: relative;
+      overflow: hidden;
+      box-shadow: $shadow-sm;
+      
+      .nav-label {
+        display: block;
+        font-size: $smaller-font-size;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: $secondary-color;
+        margin-bottom: $spacing-xs;
+        font-weight: 600;
+      }
+      
+      .post-title {
+        font-weight: 600;
+      }
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 3px;
+        background: linear-gradient(to right, $secondary-color, $accent-color);
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.3s ease;
+      }
+      
+      &:hover {
+        background: rgba($gray, 0.9); /* Even darker on hover */
+        transform: translateY(-3px);
+        box-shadow: $shadow-md;
+        
+        &::after {
+          transform: scaleX(1);
+          transform-origin: left;
+        }
+      }
+      
+      &.prev {
+        text-align: left;
+        
+        &::before {
+          content: '←';
+          display: inline-block;
+          margin-right: $spacing-xs;
+          transition: $transition-base;
+        }
+        
+        &:hover::before {
+          transform: translateX(-3px);
+        }
+      }
+      
+      &.next {
+        text-align: right;
+        
+        &::after {
+          transform-origin: left;
+        }
+        
+        &:hover::after {
+          transform: scaleX(1);
+          transform-origin: right;
+        }
+        
+        &::before {
+          content: '→';
+          display: inline-block;
+          margin-left: $spacing-xs;
+          transition: $transition-base;
+        }
+        
+        &:hover::before {
+          transform: translateX(3px);
+        }
+      }
+      
+      @media (max-width: $on-palm) {
+        font-size: $small-font-size;
+      }
+    }
+    
+    @media (max-width: $on-palm) {
+      flex-direction: column;
+      
+      a {
+        flex: 0 0 100%;
+      }
+    }
+  }
+  
+  /* Related posts */
+  .related-posts {
+    margin-top: $spacing-xl;
+    padding-top: $spacing-md;
+    border-top: 1px solid $border-color;
+    
+    h3 {
+      font-size: 1.5rem;
+      margin-bottom: $spacing-md;
+      color: $secondary-color;
+      
+      &::after {
+        content: '';
+        display: block;
+        width: 3rem;
+        height: 0.2rem;
+        background: linear-gradient(to right, $secondary-color, $accent-color);
+        margin-top: 0.5rem;
+        border-radius: 1rem;
+      }
+    }
+    
+    .related-posts-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: $spacing-md;
+      
+      .related-post {
+        background-color: rgba($light-gray, 0.3);
+        border-radius: $border-radius;
+        overflow: hidden;
+        transition: $transition-base;
+        border: 1px solid $border-color;
+        box-shadow: $shadow-sm;
+        
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: $shadow-md;
+          
+          .related-post-image img {
+            transform: scale(1.05);
+          }
+        }
+        
+        .related-post-image {
+          overflow: hidden;
+          
+          img {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+            transition: $transition-base;
+          }
+        }
+        
+        .related-post-content {
+          padding: $spacing-sm;
+          
+          .related-post-title {
+            font-size: 1.1rem;
+            margin-bottom: $spacing-xs;
+            font-weight: 600;
+            
+            a {
+              color: $text-color;
+              text-decoration: none;
+              
+              &:hover {
+                color: $primary-color;
+              }
+            }
+          }
+          
+          .related-post-meta {
+            font-size: $smaller-font-size;
+            color: $dark-gray;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Post layout with sidebar */
+.post-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: $spacing-lg;
+  position: relative;
+  
+  @media (min-width: 1024px) {
+    /* Right sidebar (default) */
+    &.sidebar-right {
+      grid-template-columns: minmax(0, 1fr) 250px;
+      
+      .post-sidebar {
+        order: 2;
+        border-left: 2px solid $border-color;
+        padding-left: $spacing-md;
+      }
+      
+      .post-content-wrapper {
+        order: 1;
+        padding-right: $spacing-md;
+      }
+    }
+    
+    /* Left sidebar */
+    &.sidebar-left {
+      grid-template-columns: 250px minmax(0, 1fr);
+      
+      .post-sidebar {
+        order: 1;
+        border-right: 2px solid $border-color;
+        padding-right: $spacing-md;
+      }
+      
+      .post-content-wrapper {
+        order: 2;
+        padding-left: $spacing-md;
+      }
+    }
+  }
+  
+  @media (min-width: 1200px) {
+    &.sidebar-right {
+      grid-template-columns: minmax(0, 1fr) 300px;
+    }
+    
+    &.sidebar-left {
+      grid-template-columns: 300px minmax(0, 1fr);
+    }
+  }
+  
+  /* Floating sidebar with TOC */
+  .post-sidebar {
+    display: none;
+    
+    @media (min-width: 1024px) {
+      display: block;
+      position: relative;
+    }
+    
+    .floating-toc {
+      position: sticky;
+      top: 100px;
+      background-color: transparent;
+      padding: $spacing-md 0;
+      max-height: calc(100vh - 150px);
+      overflow-y: auto;
+      
+      /* Clean scrollbar styling */
+      &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: rgba($primary-color, 0.2);
+        border-radius: 4px;
+        transition: background 0.3s ease;
+        
+        &:hover {
+          background: rgba($primary-color, 0.4);
+        }
+      }
+      
+      /* Firefox scrollbar styling */
+      scrollbar-width: thin;
+      scrollbar-color: rgba($primary-color, 0.2) transparent;
+      
+      /* Elegant heading style */
+      h2 {
+        margin-top: 0;
+        margin-bottom: $spacing-md;
+        font-size: 0.9rem;
+        color: $dark-gray;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-weight: 500;
+        
+        &::after {
+          display: none;
+        }
+      }
+      
+      .toc {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        
+        a {
+          display: block;
+          padding: 6px 0;
+          color: $text-color;
+          text-decoration: none;
+          font-size: 0.9rem;
+          position: relative;
+          transition: all 0.2s ease;
+          margin-bottom: 2px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          
+          &:hover {
+            color: $primary-color;
+          }
+          
+          &.active {
+            color: $primary-color;
+            font-weight: 500;
+          }
+        }
+        
+        .toc-h2 {
+          margin-bottom: 10px;
+          
+          a {
+            font-weight: 500;
+            position: relative;
+            
+            &::before {
+              content: "";
+              position: absolute;
+              left: -15px;
+              top: 50%;
+              width: 8px;
+              height: 1px;
+              background-color: $dark-gray;
+              transition: all 0.2s ease;
+            }
+            
+            &:hover::before, &.active::before {
+              background-color: $primary-color;
+              width: 12px;
+            }
+          }
+        }
+        
+        .toc-h3 {
+          margin-left: 8px;
+          margin-bottom: 6px;
+          
+          a {
+            font-size: 0.85rem;
+            color: $dark-gray;
+            padding: 4px 0;
+          }
+        }
+        
+        .toc-h4 {
+          margin-left: 16px;
+          
+          a {
+            font-size: 0.8rem;
+            color: lighten($dark-gray, 15%);
+            padding: 3px 0;
+          }
+        }
+      }
+    }
+  }
+  
+  /* Mobile TOC (visible only on small screens) */
+  .table-of-contents {
+    @media (min-width: 1024px) {
+      display: none;
+    }
+  }
+  
+  /* Main content area */
+  .post-content-wrapper {
+    min-width: 0; /* Ensure grid item can shrink below min-content width */
+  }
+}