Add App CSS styles

This commit is contained in:
2026-03-08 22:52:51 -05:00
parent 3e9d878eb2
commit 4edfe2bfd6

79
client/src/App.css Normal file
View File

@@ -0,0 +1,79 @@
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.navbar {
background: var(--bg);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 100;
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--primary);
font-weight: 700;
font-size: 1.5rem;
}
.brand-text {
letter-spacing: 0.05em;
}
.nav-links {
display: flex;
gap: 0.5rem;
}
.nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
border-radius: 0.375rem;
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
}
.nav-link:hover {
background: var(--bg-secondary);
color: var(--primary);
}
.nav-link.active {
background: var(--primary);
color: white;
}
.main-content {
flex: 1;
padding: 2rem 0;
}
@media (max-width: 768px) {
.nav-links {
gap: 0.25rem;
}
.nav-link span {
display: none;
}
.nav-link {
padding: 0.625rem;
}
}