Fully Fix Overflows

Author: githajae

_data/hobbies.yml

@@ -10,7 +10,7 @@ taste:
   title: "Taste"
   emoji: "🍽️"
   excerpt: "From fine dining tables to my own kitchen, a curated log of my epicurean journey."
-  instagram_url: "https://www.instagram.com/gastronomy_hajae/"
+  instagram_url: "https://www.instagram.com/taste_hajae/"
   sub_topics:
     - topic_title: "Gastronomy"
       topic_id: "gastronomy"
@@ -59,11 +59,11 @@ taste:
               url: "https://www.instagram.com/p/DNuXJq0Wt9F/"
               title: "The Ultimate Steak Sandwich"
               tags: [steak, sandwich, gordon ramsay]
-            # - type: blog
-            #   url: "/posts/perfect-steak-philosophy/"
-            #   title: "The Philosophy of a Perfect Steak"
-            #   excerpt: "A deep dive into searing techniques, resting times, and the science of the Maillard reaction for the ultimate steak."
-            #   tags: [steak, technique, cooking, ramsay]
+            - type: blog
+              url: "/posts/perfect-steak-philosophy/"
+              title: "The Philosophy of a Perfect Steak"
+              excerpt: "A deep dive into searing techniques, resting times, and the science of the Maillard reaction for the ultimate steak."
+              tags: [steak, technique, cooking, ramsay]
 
 # ----------------------------------------------------
 # 2. ATHLETICS
@@ -90,13 +90,13 @@ athletics:
           logs: []
 
 # ----------------------------------------------------
-# 3. NARRATIVE ARTS
+# 3. STORIES
 # ----------------------------------------------------
-narrative_arts:
-  title: "Narrative Arts"
+stories:
+  title: "Stories"
   emoji: "📚"
   excerpt: "An archive of captivating stories found in novels, manga, and manhwa."
-  instagram_url: "https://www.instagram.com/narrative_arts_hajae/"
+  instagram_url: "https://www.instagram.com/stories_hajae/"
   sub_topics:
     - topic_title: "Novels"
       topic_id: "novels"

_pages/hobbies/narrative.md

@@ -0,0 +1,5 @@
+---
+permalink: /hobbies/stories/
+layout: hobby-detail
+hobby_key: stories
+---

_pages/hobbies/stories.md

@@ -1,34 +1,26 @@
+/* ==========================================================================
+   FINAL & DEFINITIVE STYLES FOR HOBBIES PAGE
+   ========================================================================== */
 
-/* --- Page Layout --- */
-.hobby-detail-page {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 4rem 2rem;
-}
-.hobby-hero {
-  text-align: center;
-  margin-bottom: 4rem;
-}
-.hobby-title {
-  font-size: 3em;
-  font-weight: 800;
-  margin-bottom: 1rem;
-}
-.hobby-excerpt {
-  font-size: 1.2em;
-  color: #555;
-  margin-bottom: 2rem;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
+/* --- Page Layout & Hero --- */
+.hobby-detail-page { max-width: 1280px; margin: 0 auto; padding: 4rem 1rem; }
+.hobby-hero { text-align: center; margin-bottom: 4rem; }
+.hobby-title { font-size: 3em; font-weight: 800; margin-bottom: 1rem; }
+.hobby-excerpt { font-size: 1.2em; color: #555; max-width: 800px; margin: 0 auto 2rem; }
 
-/* --- Tabs & Search --- */
+/* --- Tabs & Search (DEFINITIVE FIX) --- */
 .hobby-tabs {
   display: flex;
-  gap: 0.5rem;
   border-bottom: 1px solid #ddd;
   margin-bottom: 2rem;
+  /* Make the container scrollable on the x-axis */
+  overflow-x: auto;
+  /* Hide the scrollbar for a cleaner look */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.hobby-tabs::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, and Opera */
 }
 .tab-link {
   border: none;
@@ -40,123 +32,95 @@
   cursor: pointer;
   border-bottom: 3px solid transparent;
   transition: all 0.2s ease;
+  /* Prevent tabs from shrinking or wrapping */
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 .tab-link:hover { color: #111; }
 .tab-link.active { color: #0071e3; border-bottom-color: #0071e3; }
 
 .tab-content { display: none; }
 .tab-content.active { display: block; }
-
 .hobby-search-wrapper { position: relative; margin-bottom: 2rem; }
 .hobby-search-wrapper .fa-search { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: #aaa; }
 .hobby-search-input { width: 100%; padding: 0.8rem 1rem 0.8rem 3rem; font-size: 1em; border-radius: 12px; border: 1px solid #ddd; background-color: #f8f8fa; }
 
-/* --- Content Structure --- */
+/* --- Content Structure (DEFINITIVE FIX) --- */
 .hobby-sub-group { margin-top: 4rem; }
 .sub-group-title { font-size: 1.8em; font-weight: 700; margin-bottom: 2rem; border-bottom: 1px solid #eef0f2; padding-bottom: 1rem; }
 
+/* Default style for desktop and tablets */
 .content-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-  gap: 2rem;
-  align-items: stretch; /* Ensures items in a row stretch to the same height */
+  gap: 1.5rem;
+  align-items: stretch;
+}
+/* Rule for mobile screens (e.g., less than 420px wide) */
+@media (max-width: 420px) {
+  .content-grid {
+    /* On mobile, force a single-column layout */
+    grid-template-columns: 1fr;
+  }
 }
 
-/* --- Base Card Style (for all cards) --- */
+/* --- UNIFIED CARD STYLES --- */
 .hobby-card {
-  display: flex; /* Enables flex properties for children */
-  flex-direction: column; /* Stacks content vertically */
-  height: 100%; /* Important for stretching */
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   border-radius: 20px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
+  overflow: hidden;
 }
-.hobby-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
-}
+.hobby-card:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
 .hobby-card a {
   display: flex;
   flex-direction: column;
-  flex-grow: 1; /* Makes the link fill the entire card height */
+  flex-grow: 1;
   text-decoration: none;
   color: #1d1d1f;
+  padding: 2rem;
 }
+.hobby-card .card-title { font-size: 1.5em; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; }
+.hobby-card .card-link {
+  display: inline-block;
+  background-color: #f0f0f5;
+  color: #0071e3;
+  border-radius: 99px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1em;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+  margin-top: 1rem;
+  align-self: flex-start;
+}
+.hobby-card .card-link:hover { background-color: #e0e0e5; }
 
-/* --- Specific Card Styles --- */
-
-/* Blog Post Card */
+/* --- Specific Card Overrides --- */
 .blog-card { background-color: #fff; }
-.blog-card a { padding: 2rem; }
-.blog-card .card-title { font-size: 1.5em; font-weight: 700; margin: 0 0 0.5rem;   }
-.blog-card .card-excerpt { color: #555; line-height: 1.6; flex-grow: 1; /* Fills empty space */ }
-.blog-card .card-link { font-weight: 600; color: #0071e3; margin-top: 1rem; display: inline-block; }
-
-/* Redesigned Instagram Card (No Image) - Final Version */
-.insta-card-no-image {
-  display: flex; /* Use flexbox for vertical alignment */
-  background: linear-gradient(145deg, #f9f9fb, #f0f0f5);
-  border: 1px solid #e5e5e5;
-  border-radius: 20px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
+.blog-card .card-excerpt { color: #555; line-height: 1.6; flex-grow: 1; margin-bottom: 0.5rem; margin-top:0.5rem; }
 
+.insta-card-no-image { background: linear-gradient(145deg, #f9f9fb, #f0f0f5); border: 1px solid #e5e5e5; }
 .insta-card-no-image a {
   display: flex;
   flex-direction: column;
-  justify-content: center; /* Vertically center the content */
+  justify-content: center;
   text-align: center;
   flex-grow: 1;
-  padding: 2rem;
+  padding: 2.5rem;
   text-decoration: none;
   color: #1d1d1f;
 }
-
-.insta-card-no-image .insta-icon {
-  font-size: 1.8rem;
-  color: transparent;
-  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  margin-bottom: 1.5rem;
-}
-
-.insta-card-no-image .card-title {
-  font-size: 1.5em;
-  font-weight: 700;
-  margin-top: 0.8rem;
-  margin-bottom: 0.5rem;
-}
-
-.insta-card-no-image .card-description {
-  font-size: 1.1em;
-  color: #555;
-  line-height: 1.6;
-  flex-grow: 1; /* Pushes the button to the bottom */
-}
-
 .insta-card-no-image .card-link {
-  display: inline-block;
-  background-color: #f0f0f5;
-  color: #0071e3; /* Apple Blue for emphasis */
-  border-radius: 99px;
-  padding: 0.75rem 1.5rem;
-  font-size: 1em;
-  font-weight: 600;
-  text-decoration: none;
-  transition: background-color 0.2s ease;
-  margin-top: 0.5rem;
-  align-self: center; /* Center the button */
+  background-color: #fff; /* White background for contrast */
+  border: 1px solid #e0e0e5;
+  align-self: center; /* Center-align */
 }
+.insta-card-no-image .insta-icon { font-size: 1.8rem; margin-bottom: 1.5rem; color: #c13584; }
+.insta-card-no-image .card-description { font-size: 1.1em; color: #555; line-height: 1.6; flex-grow: 1; margin-bottom: 0.5rem; }
+.insta-card-no-image.featured { border-color: #0071e3; }
 
-.insta-card-no-image .card-link:hover {
-  background-color: #e0e0e5;
-}
-
-.insta-card-no-image.featured {
-  border-color: #0071e3;
-  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.1);
-}
-/* General log-card wrapper for search */
 .log-card { display: block; }

_sass/custom/_hobby-details.scss

@@ -0,0 +1,83 @@
+/* ==========================================================================
+   FINAL & DEFINITIVE STYLES FOR CUSTOM POST LAYOUT V6
+   ========================================================================== */
+.post--custom {
+  /* --- Global Word Wrapping --- */
+  overflow-wrap: break-word;
+  word-break: break-word;
+
+  /* --- Main Layout Structure --- */
+  .post__inner-wrap {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 3rem 1rem;
+  }
+  
+  .content-wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+  
+  @media (min-width: 1024px) {
+    .content-wrapper {
+      grid-template-columns: minmax(0, 1fr) 300px;
+    }
+  }
+
+  /*
+   * ===============================================================
+   * ## THE DEFINITIVE FIX ##
+   * This allows the main content area to shrink below its
+   * natural minimum width, solving the overflow issue on mobile.
+   * ===============================================================
+   */
+  .post__content-main {
+    min-width: 0;
+  }
+
+  /* --- Header --- */
+  .post__header {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #eef0f2;
+    padding-bottom: 2rem;
+  }
+  .post__category-link { text-decoration: none; }
+  .post__category { font-size: 0.9rem; font-weight: 700; color: #0071e3; text-transform: uppercase; }
+  .post__title { font-size: 3em; font-weight: 800; margin: 0.5rem 0 0; line-height: 1.2; }
+
+  /* --- Main Content & Responsive Fixes --- */
+  .page__content {
+    font-size: 1.1rem;
+    line-height: 1.8;
+
+    img, video, iframe { max-width: 100%; height: auto; border-radius: 12px; }
+    pre { overflow-x: auto; padding: 1.5rem; border-radius: 12px; background: #f5f5f7; }
+    table { display: block; max-width: 100%; overflow-x: auto; }
+  }
+  
+  /* --- TOC Sidebar --- */
+  .post__toc-sidebar.sticky {
+    position: sticky;
+    top: 2rem;
+    align-self: start;
+    .toc { background: #f5f5f7; border: none; border-radius: 12px; padding: 1.5rem; }
+    .toc .nav__title { border-bottom: none; font-weight: 700; margin-top: 0; }
+  }
+
+  /* --- Footer Taxonomy Card --- */
+  .page__meta {
+    margin-top: 3rem;
+    .taxonomy-block { background-color: #f8f8fa; border-radius: 12px; padding: 1rem 1.5rem; margin-top: 2rem; border: 1px solid #e5e5e5; }
+    .taxonomy-row { display: flex; align-items: center; padding: 0.75rem 0; }
+    .taxonomy-row + .taxonomy-row { border-top: 1px solid #e5e5e5; }
+    .taxonomy-label { font-size: 0.8rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.05em; width: 120px; flex-shrink: 0; }
+    .taxonomy-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; }
+    .taxonomy-pill { display: inline-block; background-color: #e0e0e5; color: #333 !important; border-radius: 99px; padding: 0.5rem 1.25rem; font-size: 0.9em; font-weight: 600; text-decoration: none !important; transition: background-color 0.2s ease; }
+    .taxonomy-pill:hover { background-color: #c8c8d0; }
+  }
+  @media (max-width: 480px) {
+    .post--custom .taxonomy-row { flex-direction: column; align-items: flex-start; }
+    .post--custom .taxonomy-label { width: auto; margin-bottom: 0.75rem; }
+  }
+}

_sass/custom/_kb-post.scss

@@ -62,6 +62,14 @@
   margin-top: 2rem;
 }
 
+@media (max-width: 480px) {
+  .kb-post-grid {
+    /* On mobile, force a single-column layout */
+    grid-template-columns: 1fr;
+    gap: 1rem; /* Optionally reduce the gap on mobile */
+  }
+}
+
 .kb-post-card {
   background-color: #fff;
   border-radius: 20px;