StarterKit-Kachel überarbeitet

src/template/template.html

@@ -4,7 +4,7 @@
         <p></p>
         <div class="starterkit-footer">
             <div class="profile-count">
-                <span class="profile-line1"></span><br>
+                <span class="profile-line1">Accounts</span><br>
                 <span class="profile-line2"></span>
             </div>
             <div class="autor">

src/utils/starterkit-utils.js

@@ -4,13 +4,13 @@ import { createRecommendationPopup } from './popup-utils.js';
 export function createStarterKitElement(kit) {
     const template = document.getElementById('starterkit-template').content.cloneNode(true);
 
+    // Titel und Beschreibung
     const kitElement = template.querySelector('.starterkit');
     kitElement.querySelector('h3').textContent = kit.name;
     kitElement.querySelector('p').textContent = kit.description;
 
     // Aufteilen der Profilanzahl in zwei Zeilen
     const profileCount = kitElement.querySelector('.profile-count');
-    profileCount.querySelector('.profile-line1').textContent = `Accounts`;
     profileCount.querySelector('.profile-line2').textContent = `${kit.accounts.length}`;    
 
     // Hinzufügen des Autors mit 'created by'
@@ -20,6 +20,7 @@ export function createStarterKitElement(kit) {
     fetchProfile(kit.author, { updateElement: authorLink }).then(() => {
         const avatarImage = authorLink.querySelector('.account-avatar');
         if (avatarImage) {
+            authorLink.textContent = '';
             authorLink.appendChild(avatarImage);
         }
     });

style.css

@@ -169,18 +169,19 @@ section {
 
 .starterkit {
     background-color: var(--secondary-background-color);
+    border: 1px solid var(--secondary-background-color);
     border-radius: 15px;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
     position: relative;
-    min-height: 200px;
-    padding-bottom: 50px;
+    min-height: 170px;
+    padding-bottom: 65px;
 }
 
 .starterkit:hover {
-    transform: translateY(-5px);
+    border: 1px solid var(--primary-color-hover);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
 }
 
@@ -193,7 +194,8 @@ section {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 15px;
+    padding: 10px;
+    padding-top: 5px;
     margin: 0 15px;
     font-size: 0.85rem;
     color: #aaa;
@@ -202,18 +204,31 @@ section {
     border-radius: 0 0 15px 15px; /* Runde Ecken unten */
 }
 
+.starterkit h3 {
+    margin: 5px;
+}
+
+.starterkit p {
+    margin: 5px;
+    font-size: 0.9rem;
+    color: #ccc;
+}
+
 .profile-count {
     font-size: 0.9rem;
     color: #ccc;
     text-align: center;
 }
 
+.profile-line1 {
+    font-size: 0.75rem;
+}
+
 .autor {
     display: flex;
     align-items: center;
     gap: 10px;
     text-align: left;
-    margin-top: 10px;
 }
 
 .autor-text {