🧑‍💻💡 added comments to source code for a better developer experience

Author: LoupesDEV

css/error.css

@@ -1,10 +1,12 @@
+/* Import Google Fonts - Outfit font family */
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap');
 
 html,
 body {
     height: 100%;
 }
 
+/* Center content vertically and horizontally */
 body {
     font-family: 'Outfit', sans-serif;
     background: var(--color-bg);
@@ -16,6 +18,7 @@ body {
     overflow-x: hidden;
 }
 
+/* Create two floating gradient blobs for visual interest */
 body::before,
 body::after {
     content: '';
@@ -30,20 +33,23 @@ body::after {
     z-index: 0;
 }
 
+/* Top-left blob with red gradient */
 body::before {
     top: -10vmin;
     left: -10vmin;
     background: radial-gradient(closest-side, rgba(220, 38, 38, 0.35), transparent 70%);
     animation: float-a 18s ease-in-out infinite;
 }
 
+/* Bottom-right blob with red gradient */
 body::after {
     bottom: -12vmin;
     right: -12vmin;
     background: radial-gradient(closest-side, rgba(220, 38, 38, 0.25), transparent 70%);
     animation: float-b 22s ease-in-out infinite;
 }
 
+/* Floating animation for top-left blob */
 @keyframes float-a {
 
     0%,
@@ -56,6 +62,7 @@ body::after {
     }
 }
 
+/* Floating animation for bottom-right blob */
 @keyframes float-b {
 
     0%,
@@ -68,6 +75,7 @@ body::after {
     }
 }
 
+/* Glass morphism container with backdrop blur */
 .container {
     position: relative;
     z-index: 1;
@@ -83,6 +91,7 @@ body::after {
     animation: fadeInUp 0.7s ease-out both;
 }
 
+/* Fade in and slide up animation for container */
 @keyframes fadeInUp {
     from {
         opacity: 0;
@@ -95,6 +104,7 @@ body::after {
     }
 }
 
+/* StreamIt logo with red glow effect */
 .logo {
     width: 96px;
     height: 96px;
@@ -104,11 +114,13 @@ body::after {
     filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.35));
 }
 
+/* Spacing adjustments for error elements */
 h1+.error-message,
 .code-badge+h1 {
     margin-top: 0.5rem;
 }
 
+/* Error code badge (e.g., 404, 403) */
 .code-badge {
     display: inline-block;
     margin: 0.25rem auto 0.25rem auto;
@@ -124,6 +136,7 @@ h1+.error-message,
     box-shadow: 0 10px 25px rgba(220, 38, 38, 0.15);
 }
 
+/* Main error title with gradient text */
 h1 {
     margin: 0 0 0.75rem 0;
     font-size: clamp(2rem, 4.5vw, 3rem);
@@ -136,6 +149,7 @@ h1 {
     color: transparent;
 }
 
+/* Error message description text */
 .error-message {
     margin: 0 auto 1.5rem auto;
     max-width: 48ch;
@@ -144,6 +158,7 @@ h1 {
     line-height: 1.6;
 }
 
+/* Back to home button with smooth transitions */
 .back-btn {
     display: inline-flex;
     align-items: center;
@@ -161,24 +176,15 @@ h1 {
     transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
 }
 
+/* Hover state - red background with lift effect */
 .back-btn:hover {
     background: var(--color-primary);
     color: #ffffff;
     transform: translateY(-2px) scale(1.02);
     box-shadow: 0 10px 30px rgba(220, 38, 38, 0.35);
 }
 
+/* Active/pressed state - slight scale down */
 .back-btn:active {
     transform: translateY(0) scale(0.99);
-}
-
-@media (max-width: 480px) {
-    .container {
-        padding: 2.25rem 1.5rem;
-    }
-
-    .logo {
-        width: 84px;
-        height: 84px;
-    }
 }

css/responsive.css

@@ -1,100 +1,120 @@
 @media (max-width: 640px) {
+    /* Reduce navigation padding on mobile */
     .glass-nav .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }
 
+    /* Reduce logo size for mobile */
     #navbar .text-3xl {
         font-size: 1.5rem;
     }
 
+    /* Mobile menu panel background */
     #mobileMenuPanel {
         background-color: #000000 !important;
     }
 
+    /* Slide in mobile menu when active */
     #mobileMenuPanel.active {
         transform: translate(0);
     }
 
+    /* Transparent background for mobile menu buttons */
     #mobileMenuPanel button {
         background-color: transparent !important;
     }
 
+    /* Show mobile search panel when active */
     #mobileSearchPanel.active {
         display: block;
     }
 
+    /* Hero section height and alignment on mobile */
     #heroSection {
         min-height: 85vh;
         align-items: center;
     }
 
+    /* Add vertical padding to hero container */
     #heroSection .container {
         padding-top: 6rem;
         padding-bottom: 4rem;
     }
 
+    /* Reduce hero title size for mobile readability */
     #heroTitle {
         font-size: 2.5rem !important;
         line-height: 1.1;
         margin-bottom: 1rem;
     }
 
+    /* Adjust hero description for mobile */
     #heroDesc {
         font-size: 1rem;
         line-clamp: 4;
         -webkit-line-clamp: 4;
         margin-bottom: 1.5rem;
     }
 
+    /* Stack hero buttons vertically on mobile */
     #heroSection .flex.gap-5 {
         flex-direction: column;
         gap: 1rem;
         width: 100%;
     }
 
+    /* Full-width buttons with centered text */
     #heroSection button {
         width: 100%;
         justify-content: center;
         padding: 1rem;
     }
 
+    /* Stack filter controls vertically on mobile */
     #filterSection .flex-wrap {
         flex-direction: column;
         align-items: stretch;
     }
 
+    /* Full-width filter inputs on mobile */
     #filterSection select,
     #filterSection input {
         width: 100% !important;
     }
 
+    /* Reduce details overlay title size for mobile */
     #detailsOverlay h1 {
         font-size: 2.2rem !important;
         line-height: 1.2;
     }
 
+    /* Increase spacing in details overlay */
     #detailsOverlay .flex-col {
         gap: 2rem;
     }
 
+    /* Stack episode items vertically on mobile */
     .episode-item {
         flex-direction: column;
         align-items: flex-start;
         gap: 1rem;
     }
 
+    /* Full-width episode thumbnail container */
     .episode-item>div:first-child {
         width: 100%;
     }
 
+    /* Responsive episode thumbnail with 16:9 aspect ratio */
     .episode-item img {
         width: 100%;
         height: auto;
         aspect-ratio: 16/9;
         object-fit: cover;
     }
 
+    /* Center dropdowns on mobile with fixed positioning */
     #notifDropdown,
     #settingsDropdown {
         position: fixed;
@@ -106,6 +126,7 @@
         z-index: 60;
     }
 
+    /* Show and animate dropdowns when active */
     #notifDropdown.active,
     #settingsDropdown.active {
         transform: translateX(-50%) scale(1);
@@ -115,11 +136,77 @@
 }
 
 @media (min-width: 641px) and (max-width: 1024px) {
+    /* Adjust hero title size for tablets */
     #heroTitle {
         font-size: 4rem !important;
     }
 
+    /* Increase top padding for hero section on tablets */
     #heroSection .container {
         padding-top: 8rem;
     }
+}
+
+/* Video player mobile screen adjustments (max 768px) */
+@media (max-width: 768px) {
+    #videoTitleOverlay {
+        padding: 1.5rem;
+    }
+    
+    #videoMainTitle {
+        font-size: 1.5rem;
+    }
+    
+    #videoSeriesInfo {
+        font-size: 0.75rem;
+    }
+    
+    #videoControls {
+        font-size: 0.875rem;
+    }
+    
+    #playPauseBtn i {
+        font-size: 1.5rem;
+    }
+    
+    #rewindBtn i,
+    #forwardBtn i,
+    #volumeBtn i,
+    #fullscreenBtn i,
+    #qualityBtn i {
+        font-size: 1rem;
+    }
+    
+    #videoControls > div:last-child {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    #progressContainer {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    /* Hide speed and quality buttons on mobile - limited screen space */
+    #speedBtn,
+    #qualityBtn {
+        display: none;
+    }
+    
+    /* Volume slider hidden on mobile - takes too much space */
+    #volumeSlider {
+        display: none;
+    }
+}
+
+/* Error page mobile adjustments for smaller screens */
+@media (max-width: 480px) {
+    .container {
+        padding: 2.25rem 1.5rem;
+    }
+
+    .logo {
+        width: 84px;
+        height: 84px;
+    }
 }