26 lines
1.2 KiB
CSS
26 lines
1.2 KiB
CSS
|
/* Living example stylesheet: mobile-first, responsive by default. */
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }
|
||
|
|
.topbar { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem;
|
||
|
|
background: #102030; color: #fff; }
|
||
|
|
.brand { color: #fff; font-weight: bold; text-decoration: none; }
|
||
|
|
.nav-wide { display: none; gap: 0.75rem; }
|
||
|
|
.nav-wide a { color: #cde; text-decoration: none; }
|
||
|
|
.nav-narrow { margin-left: auto; }
|
||
|
|
.nav-narrow nav { display: flex; flex-direction: column; gap: 0.25rem;
|
||
|
|
background: #fff; padding: 0.5rem; border: 1px solid #ccc; }
|
||
|
|
main { padding: 1rem; max-width: 60rem; margin: 0 auto; }
|
||
|
|
table { border-collapse: collapse; width: 100%; }
|
||
|
|
th, td { border: 1px solid #ccc; padding: 0.25rem 0.5rem; text-align: left; }
|
||
|
|
form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; }
|
||
|
|
input, textarea, button { font-size: 1rem; padding: 0.4rem; }
|
||
|
|
.ok { color: #0a0; }
|
||
|
|
.error { color: #a00; }
|
||
|
|
.hint { color: #555; }
|
||
|
|
/* Big button group becomes a dropdown on small phones: the details element
|
||
|
|
above is the dropdown; on wide screens show the plain link row. */
|
||
|
|
@media (min-width: 48rem) {
|
||
|
|
.nav-wide { display: flex; }
|
||
|
|
.nav-narrow { display: none; }
|
||
|
|
}
|