nueroplastic til post

themes/gokarna/assets/css/main.css

@@ -307,6 +307,27 @@ a:hover .feather-sun {
   text-decoration: none;
 }
 
+/* Small tag bubbles for post listings */
+.post-title-tags {
+  margin-top: 4px;
+}
+.post-title-tag {
+  display: inline-block;
+  font-size: 0.7rem;
+  padding: 1px 7px;
+  border: 1px solid var(--light-secondary-color);
+  border-radius: 3px;
+  text-decoration: none;
+  color: var(--light-muted-color);
+  margin-right: 4px;
+  margin-bottom: 2px;
+}
+.post-title-tag:hover {
+  background-color: var(--light-text-color);
+  color: rgb(var(--light-primary-color));
+  border-color: var(--light-text-color);
+}
+
 /* CODE BLOCKS */
 code,
 pre {
@@ -463,6 +484,72 @@ table td {
   width: 80%;
 }
 
+/* HOME GRID (posts + projects side by side) */
+.home-grid {
+  display: flex;
+  gap: 2rem;
+  width: 80%;
+  margin: 0 auto;
+  align-items: center;
+}
+.home-grid .home-posts {
+  width: auto;
+}
+.home-posts-column {
+  flex: 3;
+  min-width: 0;
+}
+.home-projects-card {
+  flex: 1;
+  min-width: 200px;
+  border: 1px solid var(--light-secondary-color);
+  border-radius: 8px;
+  padding: 1rem 1.2rem;
+  background-color: rgba(var(--light-primary-color), 0.5);
+}
+.home-projects-card h2 {
+  margin-top: 0;
+  font-size: 1.1rem;
+}
+.home-project-entry {
+  margin-bottom: 0.9rem;
+}
+.home-project-entry:last-of-type {
+  margin-bottom: 0.5rem;
+}
+.home-project-entry a {
+  text-decoration: none;
+  font-weight: 500;
+}
+.home-project-entry a:hover {
+  text-decoration: underline;
+}
+.home-project-meta {
+  font-size: 0.8rem;
+  color: var(--light-muted-color);
+  margin-top: 0.15rem;
+}
+.home-project-status {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  vertical-align: middle;
+}
+.home-projects-card .view-all {
+  display: block;
+  margin-top: 0.8rem;
+  font-size: 0.85rem;
+  text-decoration: none;
+  color: var(--accent-color);
+  border-top: 1px solid var(--light-secondary-color);
+  padding-top: 0.6rem;
+}
+.home-projects-card .view-all:hover {
+  text-decoration: underline;
+}
+
 /* SINGLE */
 .post [role="doc-subtitle"] {
   font-size: 1.1em;
@@ -605,6 +692,21 @@ table td {
     margin: 0;
   }
 
+  .home-grid {
+    flex-direction: column;
+    width: auto;
+    margin: 0;
+  }
+
+  .home-posts-column {
+    width: 100%;
+  }
+
+  .home-projects-card {
+    width: 100%;
+    min-width: unset;
+  }
+
   main#content .container {
     width: 100%;
   }