From b9763e4365133ab15368ea234a00b46fc735aed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20M=C3=BCller?= <alexander@mueller-post.de>
Date: Thu, 12 Dec 2024 22:30:51 +0100
Subject: [PATCH] =?UTF-8?q?StarterKit-Kachel=20=C3=BCberarbeitet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/template/template.html    |  2 +-
 src/utils/starterkit-utils.js |  3 ++-
 style.css                     | 25 ++++++++++++++++++++-----
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/template/template.html b/src/template/template.html
index 1ee9d72..a2e2292 100644
--- a/src/template/template.html
+++ b/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">
diff --git a/src/utils/starterkit-utils.js b/src/utils/starterkit-utils.js
index 837c970..16680ee 100644
--- a/src/utils/starterkit-utils.js
+++ b/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);
         }
     });
diff --git a/style.css b/style.css
index 473b171..7ff0220 100644
--- a/style.css
+++ b/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 {