Update: local font + fix home card layout

src/main/resources/static/css/home.css

@@ -48,7 +48,6 @@
 
 .feature-card .card-text {
   flex: 1;
-  margin-left: 3.5rem;
 }
 
 .feature-card:hover {
@@ -75,6 +74,18 @@
   color: var(--md-sys-color-secondary);
 }
 
+#tool-icon {
+height: 100%;
+}
+
+#tool-text {
+margin: 0.5rem 0.5rem 0rem;
+}
+
+.card-title {
+  margin-bottom: 1rem;
+}
+
 /* Only show the favorite icons when the parent card is being hovered over */
 .feature-card:hover .favorite-icon {
   display: block;
@@ -89,9 +100,6 @@
   /* Reduce vertical padding */
 }
 
-
-
-
 .lookatme {
   opacity: 1;
   position: relative;

src/main/resources/static/css/theme/componentes.css

@@ -249,6 +249,10 @@ td {
   color: var(--md-sys-color-on-surface);
 }
 
+.modal-header .btn-close {
+  margin: 0;
+}
+
 /* Primary btn */
 .btn-primary {
   color: var(--md-sys-color-on-primary);

src/main/resources/static/css/theme/font.css

@@ -0,0 +1,22 @@
+@font-face {
+    font-family: 'Material Symbols Rounded';
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(../../fonts/google-symbol.woff2) format('woff2');
+}
+
+.material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}

src/main/resources/templates/fragments/card.html

@@ -3,17 +3,16 @@
   <a th:href="${cardLink}">
     <div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
 
-
+      <div id="tool-icon" class="icon" alt="icon" th:class="@{${toolGroup}}">
-      
-      <div class="icon" alt="icon" th:class="@{${toolGroup}}">
         <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>
       </div>
 
+      <div id="tool-text">
+        <h5 class="card-title" th:text="${cardTitle}"></h5>
+        <p class="card-text" th:text="${cardText}"></p>
+      </div>
 
-      <h5 class="card-title  mx-2" th:text="${cardTitle}"></h5>
-      <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
     </div>
-    <p class="card-text" th:text="${cardText}"></p>
   </a>
   <div class="favorite-icon" onclick="toggleFavorite(this)">
     <span class="material-symbols-rounded no-fill">

src/main/resources/templates/fragments/common.html

@@ -61,7 +61,7 @@
   <link rel="stylesheet" href="css/footer.css">
 
   <!-- Google MD Icons -->
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
+  <link rel="stylesheet" href="css/theme/font.css">
 
   <!-- Help Modal -->
   <link rel="stylesheet" href="css/errorBanner.css">