update tiles-simple.html and join_conversation.md

Author: supernord

_includes/tiles-simple.html

@@ -1,14 +1,64 @@
-<div class="row row-cols-1 row-cols-md-2 row-cols-lg-{{ include.col | default: 2 }} gy-2 gx-4 my-4 navigation-tiles">
-    {%- if include.yaml %}
-    {%- assign tiles = site.data.tiles[include.target] %}
-    {% else %}
-    {%- assign tiles = page[include.target] %}
-    {%- endif %}
-    {%- for item in tiles %}
-    {%- if item.title %}
-    <div class="col d-grid">
-        <a role="button" class="btn font-size-sm py-4 fs-3" href="{{ item.url | relative_url }}">{{item.title}}</a>
+{%- if include.yaml %}
+{%- assign tiles = site.data.tiles[include.target] %}
+{% else %}
+{%- assign tiles = page[include.target] %}
+{%- endif %}
+<div class="simple-tiles">
+    <div class="simple-tiles-container">
+        <div class="simple-tiles-list">
+            {%- for item in tiles %}
+            {%- if item.title %}
+                <a href="{{ item.url | relative_url }}" class="simple-tile-link">
+                    <div class="simple-tile-item">
+                        <div class="simple-tile-content">
+                            <p class="simple-tile-title" style="font-size: 2.0rem; text-align: center">{{ item.title }}</p>
+                        </div>
+                    </div>
+                </a>
+            {%- endif %}
+            {%- endfor %}
+        </div>
     </div>
-    {%- endif %}
-    {%- endfor %}
 </div>
+
+
+<style>
+
+  .simple-tiles-list {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 0.5fr));
+          gap: 20px;
+  }
+
+  .simple-tile-link {
+          text-decoration: none;
+          color: inherit;
+          display: flex;
+  }
+
+  .simple-tile-item {
+           border: 1px solid #e0e0e0;
+           border-radius: 12px;
+           padding: 25px;
+           transition: all 0.3s ease;
+           background: #1c4587ff;
+           width: 100%;
+           display: flex;
+           flex-direction: column;
+           justify-content: space-between;
+  }
+
+  .simple-tile-item:hover {
+           transform: translateY(-4px);
+           box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+           border-color: #012152;
+  }
+
+  .simple-tile-title {
+           color: #ffffff;
+           font-weight: 400;
+           margin-top: 0px;
+           margin-bottom: 0px;
+  }
+
+</style>

pages/join_conversation.md

@@ -14,6 +14,8 @@ If you would like to, there are multiple ways to join the conversation:
 
 {% include tiles-simple.html col = "2" target = "tiles" %}
 
+<br>
+
 If you join the mailing list (below), you will receive community updates and automatic community meeting invitations.
 
 ### Mailing list