update section-navigation-tiles_mod.html

Author: supernord

_includes/section-navigation-tiles_mod.html

@@ -11,8 +11,11 @@
       {%- for page in pages_to_add_as_tiles -%}
       {%- if page.type == include.type %}
       <a href="{{ page.url | relative_url }}" class="page-tile-link">
-          <div class="page-tile-item page-tile-item-{{ page.roadmap_category | default: none }}">
+          <div class="page-tile-item">
             <div class="page-tile-content">
+              {%- if page.roadmap_category -%}
+              <div class="page-tile-category page-tile-item-{{ page.roadmap_category | default: none }}">{{ page.roadmap_category }}</div>
+              {%- endif -%}
               <h3 class="page-tile-title" style="margin-top: 0.0rem">{{ page.title }}</h3>
               {% if page.description %}
               <p class="page-tile-description">{{ page.description }}</p>
@@ -28,68 +31,81 @@ <h3 class="page-tile-title" style="margin-top: 0.0rem">{{ page.title }}</h3>
 
 <style>
 
+  .page-tile-category {
+    display: inline-block;
+    padding: 0.2rem 0.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8em;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 4px;
+  }
+
   .page-tiles-list {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-          gap: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
   }
 
   .page-tile-link {
-          text-decoration: none;
-          color: inherit;
-          display: flex;
+    text-decoration: none;
+    color: inherit;
+    display: flex;
   }
 
   .page-tile-item {
-           border-radius: 12px;
-           padding: 25px;
-           transition: all 0.3s ease;
-           background: #9c9c9c;
-           width: 100%;
-           display: flex;
-           flex-direction: column;
-           justify-content: space-between;
-           border: 1px solid #ffffff;
+    border-radius: 12px;
+    padding: 25px;
+    transition: all 0.3s ease;
+    background: #f0f3fa;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid #ffffff;
+    color: #012152;
   }
 
-  .page-tile-item-none {
-           background: #9c9c9c;
+  .page-tile-item-No-category {
+    background: #9c9c9c;
   }
 
-  .page-tile-item-D1 {
-           background: #a4c2f4ff;
+  .page-tile-item-Community-space {
+    background: #D98B19;
   }
 
-  .page-tile-item-D2 {
-           background: #6d9eebff;
+  .page-tile-item-Training {
+    background: #056608;
   }
 
-    .page-tile-item-D3 {
-           background: #1155ccff;
+  .page-tile-item-Shared-platform {
+    background: #1155ccff;
   }
 
-    .page-tile-item-D4 {
-           background: #1c4587ff;
+  .page-tile-item-Global-connections {
+    background: #000000;
   }
 
   .page-tile-item:hover {
-           transform: translateY(-4px);
-           box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-           border: 1px solid #000000;
+    background: #012152;
+    color: #ffffff;
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    border: 1px solid #000000;
   }
 
   .page-tile-title {
-           color: #ffffff;
-           font-size: 1.3rem;
-           font-weight: 600;
-           margin-bottom: 8px;
+    color: inherit;
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 8px;
   }
 
   .page-tile-description {
-           color: #ffffff;
-           font-size: 0.9rem;
-           line-height: 1.5;
-           flex-grow: 1;
+    color: inherit;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    flex-grow: 1;
   }
 
 </style>