feat: changed some css: bigger border radius, more consistent titlebar, no gap on homepage, smaller grid gap and more

public/style.css

@@ -8,7 +8,7 @@
     --text-secondary: #a0a0a0;
     --hover-overlay: rgba(255, 255, 255, 0.1);
     --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-    --radius: 4px;
+    --radius: 8px;
     --transition: all 0.25s ease;
     --transition-fast: all 0.15s ease;
     --blur-amount: 10px;
@@ -18,7 +18,8 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+        Ubuntu, Cantarell, sans-serif;
 }
 
 body {
@@ -49,15 +50,16 @@ header {
 }
 
 .logo h1 {
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     color: var(--text-primary);
     font-weight: 500;
     letter-spacing: 0.5px;
+    margin-bottom: 1px;
 }
 
 .logo-icon {
     color: var(--text-primary);
-    font-size: 1.5rem;
+    font-size: 1rem;
 }
 
 .search-bar {
@@ -78,11 +80,12 @@ header {
     color: var(--text-primary);
     font-size: 1rem;
     transition: var(--transition);
+    background-color: var(--surface-light);
 }
 
 .search-input:focus {
     outline: none;
-    box-shadow: 0 0 0 2px var(--primary);
+    background-color: var(--hover-overlay);
 }
 
 .search-button {
@@ -112,7 +115,8 @@ header {
     border-radius: 50%;
     background-color: var(--surface-light);
     color: var(--text-primary);
-    font-size: 1.1rem;
+    font-size: 1rem;
+    font-weight: 700;
     transition: var(--transition);
     cursor: pointer;
     text-decoration: none;
@@ -121,7 +125,6 @@ header {
 
 .github-button:hover {
     background-color: var(--hover-overlay);
-    transform: scale(1.05);
 }
 
 .container {
@@ -131,12 +134,13 @@ header {
     perspective: 1000px;
 }
 
-
+.trending-grid, .search-grid {
-.trending-grid,
-.search-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 24px;
+    gap: 12px;
+}
+
+.search-grid {
     margin-top: 32px;
 }
 
@@ -162,7 +166,6 @@ header {
     position: relative;
     overflow: hidden;
     padding-top: 56.25%;
-   
 }
 
 .thumbnail {
@@ -200,6 +203,7 @@ header {
     margin-bottom: 8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     transition: var(--transition);
@@ -245,7 +249,6 @@ header {
     gap: 4px;
 }
 
-
 .page {
     opacity: 0;
     visibility: hidden;
@@ -282,8 +285,6 @@ header {
     filter: blur(var(--blur-amount));
 }
 
-
-
 .transition-overlay {
     position: fixed;
     top: 0;
@@ -313,9 +314,13 @@ header {
     border-radius: 0;
 }
 
-
 .skeleton {
-    background: linear-gradient(90deg, var(--surface), var(--surface-light), var(--surface));
+    background: linear-gradient(
+        90deg,
+        var(--surface),
+        var(--surface-light),
+        var(--surface)
+    );
     background-size: 200% 100%;
     animation: shine 1.5s infinite;
     border-radius: var(--radius);
@@ -352,7 +357,6 @@ header {
     width: 40%;
 }
 
-
 .video-player-container {
     display: flex;
     flex-direction: column;
@@ -440,7 +444,6 @@ header {
     font-size: 1.2rem;
 }
 
-
 .related-videos {
     margin-top: 32px;
 }
@@ -455,7 +458,7 @@ header {
 }
 
 .section-title::after {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     bottom: -4px;
@@ -470,8 +473,6 @@ header {
     gap: 20px;
 }
 
-
-
 .search-heading {
     margin-bottom: 16px;
     display: flex;
@@ -501,7 +502,6 @@ header {
     font-size: 1.1rem;
 }
 
-
 @keyframes fadeIn {
     from {
         opacity: 0;
@@ -525,8 +525,6 @@ header {
     transform: translateY(0);
 }
 
-
-
 .preparation-overlay {
     position: absolute;
     top: 0;
@@ -571,16 +569,18 @@ header {
 }
 
 .preparation-progress-bar::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(90deg,
+    background: linear-gradient(
-            rgba(255, 255, 255, 0.1),
+        90deg,
-            rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.1),
-            rgba(255, 255, 255, 0.1));
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.1)
+    );
     animation: shimmer 1.5s infinite;
     transform: translateX(-100%);
 }
@@ -609,8 +609,6 @@ header {
     }
 }
 
-
-
 .loading-container {
     display: flex;
     justify-content: center;
@@ -637,9 +635,7 @@ header {
     }
 }
 
-
 @media (max-width: 768px) {
-
     .trending-grid,
     .search-grid {
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -667,7 +663,6 @@ header {
 }
 
 @media (max-width: 480px) {
-
     .trending-grid,
     .search-grid {
         grid-template-columns: 1fr;
@@ -682,8 +677,6 @@ header {
     }
 }
 
-
-
 .channel-header {
     border-radius: var(--radius);
     overflow: hidden;
@@ -713,7 +706,6 @@ header {
 }
 
 .channel-avatar-container {
-    margin-top: -40px;
     flex-shrink: 0;
 }