tree styles polishing

app/assets/css/style.css

@@ -807,28 +807,55 @@ hr, .prose hr { height: 1px; margin-block: 1em; border: none; border-bottom: 1px
 }
 
 .tree-link-card {
-    display: block;
+    display: flex;
-    padding: calc(var(--ui-spacing)*4) calc(var(--ui-spacing)*6);
+    align-items: center;
-    border-radius: 100px;
+    height: calc(var(--ui-spacing)*14);
+    padding: 0 calc(var(--ui-spacing)*6);
+    padding-left: calc(var(--ui-spacing)*14);
+    border-radius: calc(var(--ui-spacing)*2);
     background: var(--color-primary);
     color: var(--color-on-primary);
     margin-bottom: calc(var(--ui-spacing)*1);
-    display: flex;
-    align-items: center;
 }
-.tree-link-card .material-symbols-outlined {
+.tree-link-card:has(.tree-link-card-img),
-    margin-right: calc(var(--ui-spacing)*1);
+.tree-link-card:has(.material-symbols-outlined) {
+    padding-left: calc(var(--ui-spacing)*2);
 }
-.tree-link-card:hover {
+.tree-link-card:hover,
+.tree-link-card:focus-visible {
     background: var(--color-inverse);
     color: var(--color-on-inverse);
 }
-.tree-link-card:hover .material-symbols-outlined {
+.tree-link-card:active {
+    opacity: .8;
+}
+.tree-link-card-img,
+.tree-link-card .material-symbols-outlined {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--ui-spacing)*10);
+    height: calc(var(--ui-spacing)*10);
+    border-radius: 50%;
+    margin-right: calc(var(--ui-spacing)*2);
+}
+.tree-link-card:hover .material-symbols-outlined,
+.tree-link-card:focus-visible .material-symbols-outlined {
+    background: var(--color-container);
     font-variation-settings:
         'FILL' 1
 }
-.tree-link-card:active {
+.tree-link-card-content {
-    opacity: .8;
+    display: flex;
+    flex-direction: column;
+}
+.tree-link-card-content-desc {
+    font-size: 12px;
+    color: var(--color-outline-very-intense);
+}
+.tree-link-card:hover .tree-link-card-content-desc,
+.tree-link-card:focus-visible .tree-link-card-content-desc {
+    color: var(--color-primary-strong);
 }
 a.tree-link-card {
     cursor: pointer;

app/pages/tree/[...slug].vue

@@ -10,13 +10,20 @@
             <section class="web-section web-section-narrow-very">
                 <div v-for="link in tree.links">
                     <a class="tree-link-card" :href="link.url" v-if="link.enabled && !link.separate">
-                        <span v-if="link.ico" class="material-symbols-outlined">{{ link.ico }}</span>{{ link.name }}
+                        <span v-if="link.ico" class="material-symbols-outlined">{{ link.ico }}</span>
+                        <img v-else-if="link.img" class="tree-link-card-img" :src="link.img">
+                        <div v-if="link.name && link.desc" class="tree-link-card-content">
+                          <span>{{ link.name }}</span>
+                          <span class="tree-link-card-content-desc">{{ link.desc }}</span>
+                        </div>
+                        <span v-else-if="link.name">{{ link.name }}</span>
                     </a>
                     <hr v-else-if="link.separate">
                 </div>
             </section>
             <section class="web-section web-section-narrow-very">
               <a class="btn btn-sm" href="/tree">Get your own Tree</a>
+              <p class="web-footer-notice"><a class="link" href="/legal/privacy-policy">Privacy Policy</a> | <a class="link" href="/legal/cookies-policy">Cookies Policy</a> | <a class="link" href="/legal/terms-of-services">Terms of Services</a></p>
             </section>
         </article>
     </main>
@@ -42,6 +49,7 @@ interface TreeUserData {
 interface TreeUserDataLink {
     id: string
     ico: string
+    img: string
     enabled: boolean
     separate: boolean
     name: string