bronku/cake-order-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactoring html and css

Browse source
This commit is contained in:
bronkuu 2026-06-15 14:43:50 +02:00
parent 8194cea85e
commit a91b196e64
16 changed files with 1299 additions and 1383 deletions
Download patch file Download diff file Expand all files Collapse all files

277
server/static/layout.css Normal file
View file

@ -0,0 +1,277 @@
/* ========== SIDEBAR ========== */
aside.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: var(--sidebar-width);
background: var(--surface-container-lowest);
border-right: 1px solid var(--outline-variant);
display: flex;
flex-direction: column;
padding: 1rem;
z-index: 40;
.brand {
margin-bottom: 1.5rem;
padding: 0 0.5rem;
h1 {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
letter-spacing: -0.01em;
line-height: 1.3;
}
p {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: 0.25rem;
}
}
.cta {
width: 100%;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--primary);
color: var(--on-primary);
border: none;
border-radius: var(--border-radius-md);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
text-decoration: none;
margin-bottom: 1.5rem;
transition: opacity var(--transition);
&:hover {
opacity: 0.9;
}
.material-symbols-outlined {
font-size: 1.25rem;
}
}
nav {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
a.link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--border-radius-md);
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
color: var(--on-surface-variant);
transition: all var(--transition);
cursor: pointer;
&:hover {
background: var(--surface-container-low);
color: var(--on-surface);
}
&.active {
background: var(--primary-container);
color: var(--primary);
font-weight: 700;
}
.material-symbols-outlined {
font-size: 1.25rem;
}
}
}
footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--outline-variant);
.user {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
margin-top: 0.75rem;
.avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--surface-container-high);
display: flex;
align-items: center;
justify-content: center;
color: var(--on-surface);
font-size: 1rem;
font-weight: 700;
flex-shrink: 0;
}
.info {
display: flex;
flex-direction: column;
.name {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface);
}
.status {
font-size: 0.75rem;
color: var(--on-surface-variant);
}
}
}
}
}
/* ========== MAIN LAYOUT ========== */
main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
display: flex;
flex-direction: column;
height: 100dvh;
}
/* ========== TOP NAVBAR ========== */
header.topnav {
height: var(--topnav-height);
border-bottom: 1px solid var(--outline-variant);
background: var(--surface);
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0 1.5rem;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 30;
h1 {
font-size: 1.25rem;
font-weight: 700;
color: var(--on-surface);
letter-spacing: -0.01em;
white-space: nowrap;
margin-right: auto;
}
search {
position: relative;
width: 15rem;
.material-symbols-outlined {
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
color: var(--on-surface-variant);
pointer-events: none;
}
input {
width: 100%;
height: 2rem;
padding: 0 0.5rem 0 2rem;
border: 1px solid var(--outline-variant);
border-radius: var(--border-radius-sm);
background: var(--surface-container-lowest);
font-size: 0.75rem;
color: var(--on-surface);
outline: none;
transition: border-color var(--transition);
&:focus {
border-color: var(--primary);
}
&::placeholder {
color: var(--on-surface-variant);
opacity: 0.6;
}
}
}
}
/* ========== MAIN CONTENT ========== */
.main-content {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 64em) {
header.topnav search {
width: 10rem;
}
}
@media (max-width: 48em) {
aside.sidebar {
width: 3.5rem;
padding: 0.5rem;
.brand h1,
.brand p,
nav a.link span:not(.material-symbols-outlined),
.cta span:not(.material-symbols-outlined),
.user .info {
display: none;
}
.cta {
padding: 0;
width: 2.5rem;
height: 2.5rem;
margin: 0 auto 1rem;
border-radius: 50%;
}
nav a.link {
justify-content: center;
padding: 0.75rem 0.5rem;
}
.user {
justify-content: center;
}
}
main {
margin-left: 3.5rem;
width: calc(100% - 3.5rem);
}
header.topnav {
padding: 0 0.75rem;
search {
display: none;
}
}
.main-content {
padding: 0.5rem;
}
}