diff --git a/assets/index.css b/assets/index.css index 6751254..3bd194a 100644 --- a/assets/index.css +++ b/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 */ -@media (max-width: 768px) { +/* Tablets and smaller desktops */ +@media (max-width: 1024px) { + .terminal { + margin-left: 70px; + padding: 15px; + max-width: calc(100% - 70px); + } + + .sidebar { + width: 70px; + } + .project-grid, - .status-grid { - gap: 15px; + .status-grid, + .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 { - grid-template-columns: 1fr; + .nested-entries { + margin-left: 15px; + padding-left: 10px; } -} -@media (max-width: 480px) { - .project-header, - .status-header { - flex-direction: column; - align-items: flex-start; - gap: 8px; + .entry { + padding-left: 15px; } .tech-tag { - font-size: 0.75em; + font-size: 0.7em; + padding: 3px 6px; + } + + .project-title, + .contact-type { + font-size: 0.9em; } }