Add nav styles to App.css
This commit is contained in:
61
src/App.css
61
src/App.css
@@ -330,3 +330,64 @@
|
|||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
.main-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-bottom: 1px solid #c8b89a;
|
||||||
|
background: #f5f0e8;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: #6b5a3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
padding: 4px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #c8b89a;
|
||||||
|
background: transparent;
|
||||||
|
color: #6b5a3e;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn:hover {
|
||||||
|
background: #ede8df;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn.active {
|
||||||
|
background: #2a1f0e;
|
||||||
|
color: #f5f0e8;
|
||||||
|
border-color: #2a1f0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Screen wrapper */
|
||||||
|
.screen-wrap {
|
||||||
|
min-height: calc(100vh - 49px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Placeholder screens */
|
||||||
|
.placeholder {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: calc(100vh - 49px);
|
||||||
|
font-style: italic;
|
||||||
|
color: #6b5a3e;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user