Responsive CSS

assets/index.css

@@ -488,39 +488,7 @@ body::before {
     margin-right: 15px;
     font-size: 24px;
 }
-@media (max-width: 768px) {
+
-    .terminal {
-        margin-left: 60px;
-        padding: 15px;
-    }
-    .sidebar {
-        width: 60px;
-    }
-    .nav-icon {
-        font-size: 20px;
-    }
-    .project-item,
-    .contact-link,
-    .status-item {
-        padding: 10px;
-    }
-}
-@media (max-width: 480px) {
-    .terminal {
-        margin-left: 50px;
-        padding: 10px;
-    }
-    .sidebar {
-        width: 50px;
-    }
-    .nav-icon {
-        font-size: 18px;
-        margin: 15px 0;
-    }
-    .section-title {
-        font-size: 1em;
-    }
-}
 .status-average {
     font-size: 0.9em;
     color: var(--text-muted);
@@ -661,25 +629,6 @@ body::before {
     transform: translateX(5px);
 }
 
-@media (max-width: 768px) {
-    .contact-grid {
-        gap: 15px;
-    }
-    .contact-method {
-        padding: 10px;
-    }
-}
-@media (max-width: 480px) {
-    .contact-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-    }
-    .method-details {
-        font-size: 0.9em;
-    }
-}
-
 .project-grid {
     display: grid;
     gap: 20px;
@@ -853,11 +802,109 @@ body::before {
     color: var(--text-bright);
 }
 
-/* Responsive adjustments */
+/* Tablets and smaller desktops */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
+    .terminal {
+        margin-left: 70px;
+        padding: 15px;
+        max-width: calc(100% - 70px);
+    }
+
+    .sidebar {
+        width: 70px;
+    }
+
     .project-grid,
-    .status-grid {
+    .status-grid,
-        gap: 15px;
+    .contact-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Mobile devices - landscape */
+@media (max-width: 768px) {
+    .terminal {
+        margin-left: 60px;
+        padding: 10px;
+        max-width: calc(100% - 60px);
+    }
+
+    .sidebar {
+        width: 60px;
+    }
+
+    .nav-icon {
+        font-size: 18px;
+        margin: 15px 0;
+    }
+
+    .nav-icon .icon {
+        font-size: 20px;
+    }
+
+    .contact-method {
+        padding: 12px;
+    }
+
+    .method-details {
+        font-size: 0.9em;
+    }
+
+    .project-item,
+    .contact-link,
+    .status-item {
+        padding: 12px;
+    }
+
+    .header-metrics {
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    .separator {
+        display: none;
+    }
+}
+
+/* Mobile devices - portrait */
+@media (max-width: 480px) {
+    .terminal {
+        margin-left: 50px;
+        padding: 8px;
+        max-width: calc(100% - 50px);
+    }
+
+    .sidebar {
+        width: 50px;
+    }
+
+    .nav-icon {
+        font-size: 16px;
+        margin: 12px 0;
+    }
+
+    .nav-icon .icon {
+        font-size: 18px;
+    }
+
+    .section-title {
+        font-size: 0.9em;
+        padding-left: 15px;
+    }
+
+    .contact-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 15px;
+    }
+
+    .contact-content {
+        padding: 15px;
+    }
+
+    .method-details {
+        font-size: 0.85em;
     }
 
     .project-header,
@@ -870,20 +917,22 @@ body::before {
         padding: 15px;
     }
 
-    .status-metrics {
+    .nested-entries {
-        grid-template-columns: 1fr;
+        margin-left: 15px;
-    }
+        padding-left: 10px;
     }
 
-@media (max-width: 480px) {
+    .entry {
-    .project-header,
+        padding-left: 15px;
-    .status-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
     }
 
     .tech-tag {
-        font-size: 0.75em;
+        font-size: 0.7em;
+        padding: 3px 6px;
+    }
+
+    .project-title,
+    .contact-type {
+        font-size: 0.9em;
     }
 }