/* ============================================================
mobile.css — responsive retrofit for scherbaummusic.com
Link this AFTER verdana.css on every page:
Also add to on every page:
============================================================ */
/* ---- 1. Global sanity ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
/* Keep the tiny nav icons (36x24) at native size — don't let the
generic "img{max-width:100%}" rule shrink them further, and don't
let them get blurry on retina screens either. */
img[src*="back"], img[src*="forward"] {
max-width: none;
width: auto;
height: 24px;
}
img[src*="MP3_32"], img[src*="PDF_32"], img[src*="BZIP2_32"] {
max-width: none;
width: auto;
height: 32px;
}
/* ============================================================
TABLET (≤ 900px): mostly fluid already because widths are %,
just fix the things that are fragile at medium widths.
============================================================ */
@media screen and (max-width: 900px) {
h1 { font-size: 1.6rem; }
body { font-size: 0.95rem; }
/* Data table: allow horizontal scroll instead of squeezing
9 columns into a narrow viewport — cheap, safe first step. */
table[border="1"] {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
/* ============================================================
PHONE (≤ 600px): full reflow.
============================================================ */
@media screen and (max-width: 600px) {
h1 { font-size: 1.3rem; }
p[align="center"] { font-size: 0.9rem; }
/* --- Outer layout table (nav | content) → stacked --- */
body > table[cellspacing="16"],
body > table[cellspacing="16"] > tbody,
body > table[cellspacing="16"] > tbody > tr,
body > table[cellspacing="16"] > tbody > tr > td {
display: block;
width: 100% !important;
}
body > table[cellspacing="16"] > tbody > tr > td:first-child {
/* nav column: turn its stacked links into a horizontal,
wrapping strip at the top instead of a tall sidebar */
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
border-bottom: 1px solid #ccc;
padding-bottom: 0.5rem;
margin-bottom: 0.75rem;
}
body > table[cellspacing="16"] > tbody > tr > td:first-child p {
margin: 0;
display: inline;
}
/* --- Pager table (Top/Prev/Next/±10/±50/End) --- */
table[width="100%"] table[width="40%"] {
width: 100% !important;
}
table[width="40%"] tr {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
table[width="40%"] td {
width: auto !important;
padding: 0.5rem 0.6rem !important; /* bigger tap target */
}
/* --- Main data table → card list ---
Requires: display:block reflow + generated labels via
nth-child, since column order is fixed across all works_*
pages: 1 SWV, 2 Bezeichnung, 3 Art/Besetzung, 4 Form/Tempo,
5 Jahr, 6 Format, 7 Seiten, 8 Autor/Text, 9 Bemerkungen. */
table[border="1"] {
display: block;
overflow-x: visible; /* undo the tablet scroll behavior */
white-space: normal;
border: none;
}
table[border="1"] tbody,
table[border="1"] tr {
display: block;
width: 100%;
}
table[border="1"] tr {
margin-bottom: 1rem;
border: 1px solid #999;
border-radius: 6px;
padding: 0.5rem;
}
/* hide the header row entirely — labels are re-injected per cell */
table[border="1"] tr:first-child { display: none; }
table[border="1"] td {
display: block;
width: 100% !important;
padding: 0.25rem 0 !important;
text-align: left !important;
border: none;
border-bottom: 1px dotted #ddd;
}
table[border="1"] td:last-child { border-bottom: none; }
table[border="1"] td::before {
display: block;
font-weight: bold;
color: #800000;
font-size: 0.8rem;
text-transform: uppercase;
margin-bottom: 0.15rem;
}
table[border="1"] td:nth-child(1)::before { content: "SWV"; }
table[border="1"] td:nth-child(2)::before { content: "Bezeichnung"; }
table[border="1"] td:nth-child(3)::before { content: "Art/Besetzung"; }
table[border="1"] td:nth-child(4)::before { content: "Form/Tempo"; }
table[border="1"] td:nth-child(5)::before { content: "Jahr"; }
table[border="1"] td:nth-child(6)::before { content: "Format"; }
table[border="1"] td:nth-child(7)::before { content: "Seiten"; }
table[border="1"] td:nth-child(8)::before { content: "Autor/Text"; }
table[border="1"] td:nth-child(9)::before { content: "Bemerkungen"; }
}