feat: style improvements

public/app.js

@@ -740,33 +740,33 @@ function createLinkCard(link) {
                 <a href="${escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-url">
                     ${escapeHtml(link.url)}
                 </a>
-                <div class="link-footer">
+            </div>
-                    <span class="link-date">${formattedDate}</span>
+            <div class="link-footer">
-                    <div class="link-actions">
+                <span class="link-date">${formattedDate}</span>
-                        <button class="add-to-list-btn" data-tooltip="Add to lists">
+                <div class="link-actions">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <button class="add-to-list-btn" data-tooltip="Add to lists">
-                                <line x1="5" y1="6" x2="19" y2="6"></line>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <line x1="5" y1="12" x2="19" y2="12"></line>
+                            <line x1="5" y1="6" x2="19" y2="6"></line>
-                                <line x1="5" y1="18" x2="19" y2="18"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
-                                <line x1="2" y1="6" x2="2.01" y2="6"></line>
+                            <line x1="5" y1="18" x2="19" y2="18"></line>
-                                <line x1="2" y1="12" x2="2.01" y2="12"></line>
+                            <line x1="2" y1="6" x2="2.01" y2="6"></line>
-                                <line x1="2" y1="18" x2="2.01" y2="18"></line>
+                            <line x1="2" y1="12" x2="2.01" y2="12"></line>
-                            </svg>
+                            <line x1="2" y1="18" x2="2.01" y2="18"></line>
-                        </button>
+                        </svg>
-                        <button class="archive-btn" data-tooltip="${link.archived ? 'Unarchive' : 'Archive'}">
+                    </button>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <button class="archive-btn" data-tooltip="${link.archived ? 'Unarchive' : 'Archive'}">
-                                ${link.archived 
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    ? '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/><path d="M9 12l3 3 3-3"/>'
+                            ${link.archived 
-                                    : '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>'
+                                ? '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/><path d="M9 12l3 3 3-3"/>'
-                                }
+                                : '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>'
-                            </svg>
+                            }
-                        </button>
+                        </svg>
-                        <button class="delete-btn" data-tooltip="Delete">
+                    </button>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <button class="delete-btn" data-tooltip="Delete">
-                                <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            </svg>
+                            <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
-                        </button>
+                        </svg>
-                    </div>
+                    </button>
                 </div>
             </div>
         </div>

public/styles.css

@@ -744,8 +744,7 @@ body {
 }
 
 .links-container.layout-masonry .link-footer {
-    margin-top: auto;
+    padding: 0.75rem 1.25rem;
-    padding-top: 0.75rem;
 }
 
 .links-container.layout-masonry .empty-state {
@@ -764,7 +763,9 @@ body {
 }
 
 .links-container.layout-list .link-card {
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 100px 1fr;
+    grid-template-rows: 1fr auto;
     border-radius: 10px;
     padding: 0;
 }
@@ -772,13 +773,17 @@ body {
 .links-container.layout-list .link-image {
     width: 100px;
     height: 100px;
-    flex-shrink: 0;
+    grid-column: 1;
+    grid-row: 1;
     border-radius: 0;
 }
 
 .links-container.layout-list .link-content {
     padding: 0.75rem 1rem;
-    flex: 1;
+    grid-column: 2;
+    grid-row: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .links-container.layout-list .link-title {
@@ -800,8 +805,11 @@ body {
 }
 
 .links-container.layout-list .link-footer {
-    padding-top: 0.5rem;
+    padding: 0.75rem 1rem;
     border-top: 1px solid var(--border);
+    grid-column: 1 / -1;
+    grid-row: 2;
+    width: 100%;
 }
 
 .links-container.layout-list .link-date {
@@ -872,6 +880,10 @@ body {
     flex-direction: column;
 }
 
+.link-card .link-footer {
+    padding: 1rem 1.5rem;
+}
+
 .link-title {
     font-size: 1.25rem;
     font-weight: 600;
@@ -914,7 +926,6 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-top: 1rem;
     border-top: 1px solid var(--border);
 }
 
@@ -1080,27 +1091,43 @@ body {
     }
 
     .title-icon {
-        font-size: 1.25rem;
+        width: 44px;
+        height: 44px;
     }
 
     .header-right {
         flex-wrap: wrap;
+        gap: 0.75rem;
     }
     
     /* Remove focus outline and active state persistence on mobile nav buttons */
     .search-toggle-btn,
     .add-link-toggle-btn,
     .lists-toggle-btn,
-    .layout-toggle-btn {
+    .layout-toggle-btn,
+    .login-toggle-btn {
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
         touch-action: manipulation;
+        width: 44px;
+        height: 44px;
+        padding: 0.625rem;
+    }
+    
+    .search-toggle-btn svg,
+    .add-link-toggle-btn svg,
+    .lists-toggle-btn svg,
+    .layout-toggle-btn svg,
+    .login-toggle-btn svg {
+        width: 22px;
+        height: 22px;
     }
     
     .search-toggle-btn:focus,
     .add-link-toggle-btn:focus,
     .lists-toggle-btn:focus,
-    .layout-toggle-btn:focus {
+    .layout-toggle-btn:focus,
+    .login-toggle-btn:focus {
         outline: none;
     }
     
@@ -1108,7 +1135,8 @@ body {
     .search-toggle-btn:active:not(.active),
     .add-link-toggle-btn:active:not(.active),
     .lists-toggle-btn:active:not(.active),
-    .layout-toggle-btn:active:not(.active) {
+    .layout-toggle-btn:active:not(.active),
+    .login-toggle-btn:active:not(.active) {
         background: transparent !important;
         border-color: var(--border) !important;
         color: var(--text-secondary) !important;
@@ -1118,7 +1146,8 @@ body {
     .search-toggle-btn:not(.active),
     .add-link-toggle-btn:not(.active),
     .lists-toggle-btn:not(.active),
-    .layout-toggle-btn:not(.active) {
+    .layout-toggle-btn:not(.active),
+    .login-toggle-btn:not(.active) {
         background: transparent !important;
         border-color: var(--border) !important;
         color: var(--text-secondary) !important;
@@ -1137,14 +1166,43 @@ body {
     }
     
     .user-info {
-        padding: 0.5rem;
+        padding: 0;
         gap: 0;
+        min-height: 44px;
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .logout-btn {
+        width: 44px;
+        height: 44px;
+        padding: 0.625rem;
+        margin: 0;
+    }
+
+    .logout-btn svg {
+        width: 20px;
+        height: 20px;
     }
 
     .add-link-toggle-btn {
         display: flex;
     }
 
+    .lists-toggle-btn {
+        width: 44px !important;
+        height: 44px !important;
+        padding: 0.625rem;
+    }
+
+    .lists-toggle-btn svg {
+        width: 22px;
+        height: 22px;
+    }
+
     .layout-toggle-wrapper {
         position: relative;
     }
@@ -1169,14 +1227,34 @@ body {
         transform: translateY(0);
     }
 
+    .add-link-wrapper .input-wrapper {
+        height: 52px !important;
+        padding: 0.75rem 1rem !important;
+    }
+
+    .add-link-wrapper .input-wrapper #linkInput {
+        font-size: 1rem;
+    }
+
+    .add-link-wrapper .input-wrapper .btn-add {
+        width: 44px !important;
+        height: 44px !important;
+        padding: 0.625rem !important;
+    }
+
+    .add-link-wrapper .input-wrapper .btn-add::after {
+        font-size: 1.5rem !important;
+    }
+
     .search-wrapper {
         width: 100%;
         margin: 0;
-        padding: 0.625rem 1rem;
+        padding: 0.75rem 1rem;
         display: none;
         opacity: 0;
         transform: translateY(-10px);
         transition: opacity 0.3s ease, transform 0.3s ease;
+        min-height: 52px;
     }
 
     .search-wrapper.show {
@@ -1185,31 +1263,130 @@ body {
         transform: translateY(0);
     }
 
-    .link-actions {
+    .search-wrapper #searchInput {
-        flex-wrap: wrap;
+        font-size: 1rem;
-        gap: 0.5rem;
-    }
-
-    .archive-btn,
-    .delete-btn {
-        width: 36px;
-        height: 36px;
     }
 
     .input-wrapper {
         flex-wrap: nowrap;
+        min-height: 48px;
+        padding: 0.625rem 1rem;
+    }
+
+    #linkInput {
+        font-size: 1rem;
+        padding: 0.625rem 0;
     }
 
     .btn-add {
-        width: 36px;
+        width: 44px;
-        height: 36px;
+        height: 44px;
-        padding: 0.5rem;
+        padding: 0.625rem;
         flex-shrink: 0;
     }
 
+    .btn-add::after {
+        font-size: 1.75rem;
+    }
+
+    .link-actions {
+        flex-wrap: wrap;
+        gap: 0.625rem;
+    }
+
+    .archive-btn,
+    .delete-btn,
+    .add-to-list-btn {
+        width: 44px !important;
+        height: 44px !important;
+        padding: 0.625rem;
+    }
+
+    .archive-btn svg,
+    .delete-btn svg,
+    .add-to-list-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .add-to-list-btn {
+        width: 44px !important;
+        height: 44px !important;
+        padding: 0.625rem;
+    }
+
+    .add-to-list-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .edit-lists-btn,
+    .clear-list-filters-btn {
+        padding: 0.625rem 1rem;
+        font-size: 0.9375rem;
+        min-height: 44px;
+    }
+
+    .edit-lists-btn svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    .list-filter-chip {
+        padding: 0.625rem 1rem;
+        font-size: 0.9375rem;
+        min-height: 44px;
+    }
+
+    .archive-toggle-slider {
+        width: 50px;
+        height: 28px;
+    }
+
+    .archive-toggle-slider:before {
+        height: 22px;
+        width: 22px;
+    }
+
+    .archive-toggle-switch input:checked + .archive-toggle-slider:before {
+        transform: translateX(22px);
+    }
+
     .links-container {
         grid-template-columns: 1fr;
     }
+
+    .close-modal-btn,
+    .close-overlay-btn {
+        width: 44px;
+        height: 44px;
+        padding: 0.625rem;
+    }
+
+    .close-modal-btn svg,
+    .close-overlay-btn svg {
+        width: 22px;
+        height: 22px;
+    }
+
+    .btn-login,
+    .btn-create-list {
+        padding: 0.875rem 1.5rem;
+        font-size: 1rem;
+        min-height: 48px;
+    }
+
+    .form-group input {
+        padding: 0.875rem;
+        font-size: 1rem;
+        min-height: 48px;
+    }
+
+    .create-list-form input {
+        padding: 0.875rem;
+        font-size: 1rem;
+        min-height: 48px;
+    }
 }
 
 /* Scroll to Top Button */
@@ -1235,6 +1412,20 @@ body {
     z-index: 999;
 }
 
+@media (max-width: 768px) {
+    .scroll-to-top-btn {
+        width: 56px;
+        height: 56px;
+        bottom: 1.5rem;
+        right: 1.5rem;
+    }
+
+    .scroll-to-top-btn svg {
+        width: 28px;
+        height: 28px;
+    }
+}
+
 .scroll-to-top-btn.show {
     opacity: 1;
     visibility: visible;
@@ -1258,7 +1449,7 @@ body {
 @media (max-width: 400px) {
     .header-right {
         flex-wrap: nowrap;
-        gap: 0.5rem;
+        gap: 0.625rem;
     }
 
     .search-wrapper {
@@ -1268,8 +1459,13 @@ body {
     .scroll-to-top-btn {
         bottom: 1.5rem;
         right: 1.5rem;
-        width: 45px;
+        width: 52px;
-        height: 45px;
+        height: 52px;
+    }
+
+    .scroll-to-top-btn svg {
+        width: 26px;
+        height: 26px;
     }
 }
 
@@ -2062,18 +2258,28 @@ body {
     .public-url-btn,
     .save-list-btn,
     .delete-list-btn {
-        padding: 0.25rem;
+        padding: 0.625rem;
-        min-width: 28px;
+        min-width: 44px;
-        width: 28px;
+        width: 44px;
-        height: 28px;
+        height: 44px;
     }
 
     .toggle-public-btn svg,
     .public-url-btn svg,
     .save-list-btn svg,
     .delete-list-btn svg {
-        width: 14px;
+        width: 20px;
-        height: 14px;
+        height: 20px;
+    }
+
+    .list-item {
+        padding: 0.75rem;
+    }
+
+    .list-name-input {
+        font-size: 1rem;
+        padding: 0.5rem;
+        min-height: 44px;
     }
 }