@okjavis/nodebb-theme-javis 1.4.0 → 1.5.1

package/scss/_cards.scss

@@ -7,15 +7,22 @@
 .topic-card {
   display: flex;
   background: $jv-surface;
-  border-radius: $jv-radius-lg;
+  border-radius: $jv-radius-sm; // 8px - shadcn standard
   border: 1px solid $jv-border-subtle;
-  margin-bottom: $jv-space-4;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  margin-bottom: $jv-space-2; // 8dp grid
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern smooth transitions
   overflow: hidden;
 
   &:hover {
-    border-color: $jv-border-strong;
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-md; // shadcn hover shadow
+    border-color: $jv-border-strong; // Subtle border darkening
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 
   // Deleted/scheduled states
@@ -36,10 +43,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: $jv-space-6 $jv-space-4;
+  padding: $jv-space-6 $jv-space-4; // 24dp vertical, 16dp horizontal - Material grid
   background: rgba(0, 0, 0, 0.02);
   min-width: 44px;
-  gap: 2px;
+  gap: $jv-space-1; // 4dp - Material grid
 }
 
 .vote-btn {
@@ -93,10 +100,10 @@
 // ===========================================================
 .topic-content {
   flex: 1;
-  padding: $jv-space-6;
+  padding: $jv-space-3; // 12dp - Material grid
   display: flex;
   flex-direction: column;
-  gap: $jv-space-4;
+  gap: $jv-space-3; // 12dp - Material grid
   min-width: 0; // Allow text truncation
 }
 
@@ -105,27 +112,27 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: $jv-space-2;
-  font-size: $jv-font-size-xs;
-  color: $jv-text-muted;
+  gap: $jv-space-3; // 12dp - Material grid
+  font-size: 14px; // Slightly larger for readability
+  color: $jv-text-soft; // More subtle
 
   .meta-separator {
     color: $jv-text-soft;
   }
 
   .author-link {
-    color: $jv-text-muted;
+    color: $jv-text-soft; // More subtle - not competing with title
     text-decoration: none;
-    font-weight: 500;
+    font-weight: 400; // Normal weight
 
     &:hover {
       color: $jv-primary;
-      text-decoration: underline;
     }
   }
 
   .meta-time {
     color: $jv-text-soft;
+    font-size: 13px;
   }
 
   // Category badge override
@@ -140,10 +147,10 @@
 // Topic Title
 .topic-card .topic-title {
   margin: 0;
-  font-size: $jv-font-size-lg;
-  font-weight: 600;
-  line-height: $jv-line-height-tight;
-  letter-spacing: -0.01em;
+  font-size: 20px; // Larger for prominence - consistent with feed
+  font-weight: 700; // Bolder for better hierarchy
+  line-height: 1.4; // Better readability
+  letter-spacing: -0.02em; // Tighter for modern feel
 
   a {
     color: $jv-text-main;
@@ -159,7 +166,7 @@
 .topic-labels {
   display: flex;
   flex-wrap: wrap;
-  gap: $jv-space-2;
+  gap: $jv-space-2; // 8dp - Material grid
 
   .topic-badge {
     display: inline-flex;
@@ -197,7 +204,7 @@
 .topic-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: $jv-space-2;
+  gap: $jv-space-2; // 8dp - Material grid
 
   .topic-tag {
     font-size: 11px;
@@ -222,7 +229,7 @@
   position: relative;
   width: fit-content;
   max-width: 100%;
-  border-radius: $jv-radius-md;
+  border-radius: $jv-radius-sm; // 8px - Material Design standard
   overflow: hidden;
 
   img {
@@ -231,7 +238,7 @@
     max-width: 100%;
     width: auto;
     object-fit: cover;
-    border-radius: $jv-radius-md;
+    border-radius: $jv-radius-sm; // 8px - Material Design standard
   }
 
   .thumb-count {
@@ -269,40 +276,51 @@
 .topic-actions {
   display: flex;
   align-items: center;
-  gap: $jv-space-4;
-  padding-top: $jv-space-2;
+  gap: $jv-space-3; // 12dp - Material grid
+  padding-top: $jv-space-3; // 12dp - Material grid
   margin-top: auto;
 }
 
 .action-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  font-size: $jv-font-size-xs;
-  font-weight: 500;
+  gap: $jv-space-2; // 8dp grid
+  padding: $jv-space-2 $jv-space-3; // 8dp vertical, 12dp horizontal
+  font-size: 14px;
+  font-weight: 600;
   color: $jv-text-muted;
   background: transparent;
   border: none;
-  border-radius: $jv-radius-xs;
+  border-radius: $jv-radius-sm; // 8px shadcn standard
   cursor: pointer;
   text-decoration: none;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
   &:hover {
-    background: rgba(0, 0, 0, 0.05);
+    background: $jv-hover-bg; // Consistent hover state
     color: $jv-text-main;
   }
 
+  // Focus state for accessibility
+  &:focus-visible {
+    outline: none;
+    box-shadow: $jv-focus-ring;
+  }
+
   i {
-    font-size: 14px;
+    font-size: 18px; // Larger icons
+  }
+
+  // Make numbers bold
+  span {
+    font-weight: 700;
   }
 }
 
 .action-stat {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: $jv-space-1; // 4dp - Material grid
   font-size: $jv-font-size-xs;
   color: $jv-text-soft;
   margin-left: auto;
@@ -334,7 +352,7 @@
 
   .topic-actions {
     flex-wrap: wrap;
-    gap: $jv-space-2;
+    gap: $jv-space-2; // 8dp - Material grid
   }
 
   .action-btn span {
@@ -351,23 +369,32 @@
 // ===========================================================
 li[component="post"].posts-list-item {
   background: $jv-surface;
-  border-radius: $jv-radius-lg;
+  border-radius: $jv-radius-sm; // 8px - shadcn standard
   border: 1px solid $jv-border-subtle;
-  padding: $jv-space-8;
-  margin-bottom: $jv-space-4;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  padding: $jv-space-4 $jv-space-3; // 16dp vertical, 12dp horizontal
+  margin-bottom: $jv-space-2; // 8dp grid
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern transitions
 
   &:hover {
+    box-shadow: $jv-shadow-md; // shadcn hover shadow
     border-color: $jv-border-strong;
-    box-shadow: $jv-shadow-soft;
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 }
 
 li[component="post"] {
   .topic-title {
-    font-size: $jv-font-size-lg;
-    font-weight: 600;
-    margin-bottom: $jv-space-4;
+    font-size: 20px; // Larger for prominence
+    font-weight: 700; // Bolder for better hierarchy
+    line-height: 1.4; // Better readability
+    margin-bottom: $jv-space-3; // 12dp - Material grid
+    letter-spacing: -0.02em; // Tighter for modern feel
 
     a {
       color: $jv-text-main;
@@ -382,18 +409,27 @@ li[component="post"] {
   .post-body {
     display: flex;
     flex-direction: column;
-    gap: $jv-space-4;
+    gap: $jv-space-2; // 8dp - Material grid
   }
 
   .post-info {
-    font-size: $jv-font-size-xs;
-    color: $jv-text-muted;
+    font-size: 14px; // Slightly larger for readability
+    color: $jv-text-soft; // More subtle
+
+    a {
+      color: $jv-text-soft; // More subtle
+      font-weight: 400; // Normal weight
+
+      &:hover {
+        color: $jv-primary;
+      }
+    }
   }
 
   .content {
-    font-size: $jv-font-size-sm;
-    line-height: $jv-line-height-base;
-    color: $jv-text-main;
+    font-size: 15px; // Slightly larger for better readability
+    line-height: 1.6;
+    color: $jv-text-muted;
 
     p {
       margin-bottom: $jv-space-4;
@@ -402,6 +438,7 @@ li[component="post"] {
 
   .timeago {
     color: $jv-text-soft;
+    font-size: 13px;
   }
 }
 
@@ -416,15 +453,22 @@ li[component="post"] {
 // Category/Topic List Item (fallback for other templates)
 .category-item {
   background: $jv-surface;
-  border-radius: $jv-radius-lg;
+  border-radius: $jv-radius-sm; // 8px - shadcn standard
   border: 1px solid $jv-border-subtle;
-  padding: $jv-space-6;
-  margin-bottom: $jv-space-4;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  padding: $jv-space-3; // 12dp grid
+  margin-bottom: $jv-space-2; // 8dp grid
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern transitions
 
   &:hover {
+    box-shadow: $jv-shadow-md; // shadcn hover shadow
     border-color: $jv-border-strong;
-    box-shadow: $jv-shadow-soft;
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 
   // Override default border-bottom

package/scss/_categories.scss

@@ -6,7 +6,7 @@
 .feed h2 {
   font-size: 16px;
   font-weight: 600;
-  margin: 0 0 $jv-space-6 0;
+  margin: 0 0 $jv-space-6 0; // 24dp - Material grid
   padding: 0;
   color: $jv-text-main;
   letter-spacing: -0.2px;
@@ -26,16 +26,22 @@ ul.categories-list.list-unstyled {
 // ===========================================================
 
 li[component="categories/category"] {
-  padding: 16px 0;
+  padding: $jv-space-4 0; // 16dp grid
   border-bottom: 1px solid #f1f1f1;
-  transition: background 120ms ease;
+  transition: background $jv-transition-fast; // Modern transition
 
   &:last-child {
     border-bottom: none;
   }
 
   &:hover {
-    background: rgba(0, 0, 0, 0.02);
+    background: $jv-hover-bg; // Consistent hover state
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    background: $jv-hover-bg;
   }
 
   // Parent title
@@ -43,10 +49,10 @@ li[component="categories/category"] {
     font-size: $jv-font-size-base;
     font-weight: 600;
     color: $jv-text-main;
-    margin-bottom: 4px;
+    margin-bottom: $jv-space-1; // 4dp - Material grid
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: $jv-space-2; // 8dp - Material grid
 
     a {
       text-decoration: none;
@@ -68,7 +74,7 @@ li[component="categories/category"] {
     font-size: $jv-font-size-sm;
     color: $jv-text-muted;
     line-height: 1.45;
-    margin-bottom: 10px;
+    margin-bottom: $jv-space-2; // 8dp - Material grid
     max-width: 92%;
   }
 }
@@ -80,15 +86,15 @@ li[component="categories/category"] {
 li[component="categories/category"] .category-children {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  margin-top: 4px;
+  gap: $jv-space-2; // 8dp - Material grid
+  margin-top: $jv-space-1; // 4dp - Material grid
 }
 
 .category-children-item {
   small > .d-flex {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: $jv-space-2; // 8dp - Material grid
     font-size: 14px;
     color: #333;
   }
@@ -105,7 +111,16 @@ li[component="categories/category"] .category-children {
     text-decoration: none;
     font-size: 14px;
     color: #333;
-    transition: color 120ms ease, transform 80ms ease;
+    transition: color $jv-transition-fast; // Modern transition
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      color: $jv-primary;
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 2px;
+    }
   }
 
   // Hover state: blue dot + blue text

package/scss/_feed.scss

@@ -70,20 +70,26 @@
 }
 
 // ===========================================================
-// POST CARD – Main Styling
+// POST CARD – Main Styling (shadcn + Modern Polish)
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   background: $jv-surface !important;
   border: 1px solid $jv-border-subtle !important;
-  border-radius: $jv-radius-md !important; // 12px - more compact than 16px
-  margin-bottom: $jv-space-4 !important; // 8px - compact like Reddit
-  box-shadow: none !important;
+  border-radius: $jv-radius-sm !important; // 8px - shadcn standard
+  margin-bottom: $jv-space-2 !important; // 8dp grid
+  box-shadow: $jv-shadow-sm !important; // shadcn subtle shadow
   overflow: hidden;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern smooth transitions
 
   &:hover {
-    border-color: $jv-border-strong !important;
-    box-shadow: $jv-shadow-soft !important;
+    box-shadow: $jv-shadow-md !important; // shadcn hover shadow
+    border-color: $jv-border-strong !important; // Subtle border darkening
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring !important;
   }
 
   // Deleted state
@@ -106,10 +112,11 @@
 
     .overflow-hidden {
       border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
-      max-height: 350px !important;
+      max-height: 280px !important; // Reduced from 350px - more balanced ratio
 
       img {
         width: 100%;
+        height: 280px; // Fixed height for consistency
         object-fit: cover;
       }
     }
@@ -131,11 +138,11 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   > .d-flex.gap-2.p-3 {
-    padding: $jv-space-6 !important; // 12px - compact but comfortable
-    gap: $jv-space-4 !important;
+    padding: $jv-space-4 $jv-space-3 !important; // 16dp vertical, 12dp horizontal - Material grid
+    gap: $jv-space-3 !important; // 12dp spacing
 
     @media (max-width: 768px) {
-      padding: $jv-space-4 !important; // 8px on mobile
+      padding: $jv-space-3 $jv-space-2 !important; // 12dp vertical, 8dp horizontal on mobile
     }
   }
 
@@ -143,8 +150,8 @@
   .d-none.d-lg-block {
     .avatar,
     img[class*="avatar"] {
-      width: 40px !important; // Smaller, cleaner
-      height: 40px !important;
+      width: 48px !important; // 48dp - Material standard avatar size
+      height: 48px !important;
       border-radius: 50% !important;
       object-fit: cover;
       border: 2px solid rgba(0, 0, 0, 0.05);
@@ -153,7 +160,7 @@
 
   // Post body
   .post-body {
-    gap: $jv-space-2 !important; // Tighter gap - 4px
+    gap: $jv-space-2 !important; // 8dp - Material grid
   }
 }
 
@@ -162,12 +169,12 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .topic-title {
-    font-size: 18px !important; // Keeping subtle
-    font-weight: 600 !important;
-    line-height: 1.3 !important; // Tighter for clean look
+    font-size: 20px !important; // Larger for prominence (Reddit/LinkedIn style)
+    font-weight: 700 !important; // Bolder for better hierarchy
+    line-height: 1.4 !important; // Better readability
     color: $jv-text-main !important;
-    margin-bottom: $jv-space-2; // 4px
-    letter-spacing: -0.01em; // Slight tightening for modern feel
+    margin-bottom: $jv-space-3; // 6px - more breathing room
+    letter-spacing: -0.02em; // Tighter for modern feel
 
     &:hover {
       color: $jv-primary !important;
@@ -180,14 +187,15 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .post-info {
-    font-size: 13px !important;
+    font-size: 14px !important; // Slightly larger for readability
     color: $jv-text-soft; // Lighter for hierarchy
-    gap: $jv-space-2 !important;
+    gap: $jv-space-3 !important; // More spacing between elements
 
     .post-author {
       a {
-        color: $jv-text-muted; // Less prominent
-        font-weight: 500; // Lighter weight
+        color: $jv-text-soft; // More subtle - not competing with title
+        font-weight: 400; // Normal weight
+        font-size: 14px;
 
         &:hover {
           color: $jv-primary;
@@ -205,6 +213,12 @@
 
     .timeago {
       color: $jv-text-soft !important;
+      font-size: 13px;
+
+      &::before {
+        content: "• ";
+        margin-right: 4px;
+      }
     }
   }
 }
@@ -214,13 +228,14 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .content[component="post/content"] {
-    font-size: 14px !important;
+    font-size: 15px !important; // Slightly larger for better readability
     line-height: 1.6 !important;
     color: $jv-text-muted;
+    margin-top: $jv-space-3; // Better spacing from meta
 
     // Truncation styles (from plugin)
     &.truncate-post-content {
-      max-height: 150px;
+      max-height: 120px; // Reduced from 150px for cleaner cards
       overflow: hidden;
       position: relative;
 
@@ -230,7 +245,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        height: 40px;
+        height: 50px; // Taller gradient
         background: linear-gradient(transparent, $jv-surface);
         pointer-events: none;
       }
@@ -300,40 +315,55 @@
 .feed li[component="post"].posts-list-item {
   .d-flex.justify-content-between:last-child {
     margin: 0 (-$jv-space-2);
-    padding-top: $jv-space-2; // Small padding above - 4px
-    border-top: 1px solid rgba(0, 0, 0, 0.04); // Subtle separator
+    padding-top: $jv-space-4; // More padding - 8px
+    border-top: 1px solid rgba(0, 0, 0, 0.06); // Slightly more visible separator
 
     .btn-link {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      padding: 6px 10px !important; // Tighter padding
-      font-size: 13px !important;
-      font-weight: 500 !important; // Lighter weight
+      gap: $jv-space-2; // 8dp consistent spacing
+      padding: $jv-space-2 $jv-space-3 !important; // 8dp vertical, 12dp horizontal
+      font-size: 14px !important;
+      font-weight: 600 !important;
       color: $jv-text-muted !important;
       background: transparent;
       border: none;
-      border-radius: $jv-radius-sm;
+      border-radius: $jv-radius-sm; // 8px shadcn standard
       text-decoration: none !important;
-      transition: background-color 0.15s ease, color 0.15s ease;
+      transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions, NO transform
 
       &:hover {
-        background: rgba(0, 0, 0, 0.03); // Subtler hover
+        background: $jv-hover-bg; // Consistent hover state
         color: $jv-text-main !important;
       }
 
+      // Focus state for accessibility
+      &:focus-visible {
+        outline: none;
+        box-shadow: $jv-focus-ring;
+      }
+
       i {
-        font-size: 16px;
+        font-size: 18px; // Larger icons
+      }
+
+      // Make numbers bold and prominent
+      span {
+        font-weight: 700;
       }
 
       // Comments button
       &[href*="post"]:first-child {
         i {
-          color: $jv-text-soft;
+          color: $jv-text-muted;
         }
 
-        &:hover i {
-          color: $jv-primary;
+        &:hover {
+          background: rgba(0, 81, 255, 0.08);
+
+          i {
+            color: $jv-primary;
+          }
         }
       }
 
@@ -341,6 +371,7 @@
       &[data-action="bookmark"] {
         &[data-bookmarked="true"] {
           color: $jv-primary !important;
+          background: $jv-selected-bg !important; // Consistent selected state
 
           i {
             color: $jv-primary !important;
@@ -348,7 +379,11 @@
         }
 
         &:hover {
-          background: rgba(0, 81, 255, 0.06);
+          background: $jv-selected-bg;
+
+          i {
+            color: $jv-primary;
+          }
         }
       }
 
@@ -356,6 +391,7 @@
       &[data-action="upvote"] {
         &[data-upvoted="true"] {
           color: #ef4444 !important;
+          background: rgba(239, 68, 68, 0.08) !important;
 
           i {
             color: #ef4444 !important;
@@ -363,7 +399,7 @@
         }
 
         &:hover {
-          background: rgba(239, 68, 68, 0.06);
+          background: rgba(239, 68, 68, 0.08);
 
           i {
             color: #ef4444;
@@ -371,10 +407,13 @@
         }
       }
 
-      // Reply button
+      // Reply button (Primary CTA)
       &[data-action="reply"] {
+        color: $jv-primary !important;
+        font-weight: 700 !important;
+
         &:hover {
-          background: rgba(0, 81, 255, 0.06);
+          background: $jv-selected-bg;
 
           i {
             color: $jv-primary;