Responsive CSS
All checks were successful
Deploy / deploy (push) Successful in 7s

This commit is contained in:
elijah 2024-11-05 09:07:43 +01:00
parent 58310138b6
commit 52504ecef8

View File

@ -801,138 +801,3 @@ body::before {
font-size: 1.1em; font-size: 1.1em;
color: var(--text-bright); color: var(--text-bright);
} }
/* 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,
.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,
.status-header {
padding: 15px;
}
.project-content,
.status-content {
padding: 15px;
}
.nested-entries {
margin-left: 15px;
padding-left: 10px;
}
.entry {
padding-left: 15px;
}
.tech-tag {
font-size: 0.7em;
padding: 3px 6px;
}
.project-title,
.contact-type {
font-size: 0.9em;
}
}