/* * Our changes on top of the legacy stylesheets. Loaded after style.css / * style2.css and before mobile.css, so it overrides the first two and is itself * overridden by the mobile rules below 641px. * * The layout of the original site is deliberately kept: fixed 1330px, centred, * grey content block, grey menu buttons. Only two things had to change, both * because the site is no longer Heller Metalltechnik: * * 1. one HE-MA logo instead of the original's two * 2. room in the menu bar for the DE/EN switcher */ /* --- Logo ---------------------------------------------------------------- * The HE-MA logo replaces both originals — the round "Metalltechnik" planet on * the left and the Heller box on the right. It takes the left slot, which the * original gave to the planet, and the right slot is gone. * * The artwork is used exactly as supplied — full tile, not cropped. It carries * an empty half of brushed metal above the wordmark, which is why the logo is * taller than it looks like it needs to be. * ----------------------------------------------------------------------- */ #logo { /* 200px logo + 10px margin either side */ width: 220px; } #logo a { display: block; } #logo img { /* The file is 560px wide for high-DPI screens, so it needs an explicit display width — without one it renders at its natural size. This is the artwork as supplied, uncropped (1.24:1), so 200px wide makes it 161px tall and the header grows accordingly. */ width: 200px; height: auto; display: block; margin: 10px; } /* --- Menu ---------------------------------------------------------------- * style.css sizes the nav at 1050px next to two logos totalling 270px. With one * 200px logo there is more room, which the DE/EN switcher and the longer * English labels need. Everything else about the bar — grey buttons, borders, * the active state — comes from style.css untouched. * * Desktop only; below 641px mobile.css takes over with the hamburger menu. * ----------------------------------------------------------------------- */ @media screen and (min-width: 641px) { nav#menu { width: 1110px; /* style.css pulls the nav 10px left, which tucked it under the original's round logo. The HE-MA logo is a solid rectangle, so the overlap would show as the menu running underneath it. */ margin-left: 0; vertical-align: bottom; } #logo { vertical-align: bottom; } /* Equal-height menu buttons. * * The English labels break over two lines, which left the single-line ones * (Home, Design, Contact) shorter than the rest — they sat bottom-aligned * with a notch above them. Stretching the items and letting the link fill * each one gives every button the same height, whatever its label does. * * The language switcher is deliberately excluded: it keeps its natural * height and stays aligned to the bottom of the bar. */ nav#menu ul { display: flex; flex-wrap: wrap; align-items: stretch; } nav#menu li { display: flex; } nav#menu li a { display: flex; align-items: center; justify-content: center; text-align: center; } nav#menu li.lang { align-self: flex-end; } } /* --- Scale to fit -------------------------------------------------------- * The original is a fixed 1330px layout, so anything between the mobile * breakpoint and ~1380px used to scroll sideways — up to 678px of the page sat * off-screen. Instead of rebuilding the layout responsively, the whole page is * scaled down proportionally: at 1386px and above it renders at 1:1, below that * it shrinks to fit. The proportions never change, the page just gets smaller. * * `zoom` rather than `transform: scale()` on purpose — zoom shrinks the layout * box too, so the page height follows and no dead space appears underneath. * * The factor is set on by the inline script in BaseLayout.astro. It has * to be JS: CSS cannot divide a viewport width by a length to get the unitless * ratio `zoom` needs. * * Below 641px this does not apply — mobile.css takes over with the hamburger. * ----------------------------------------------------------------------- */ @media screen and (min-width: 641px) { #page { zoom: var(--fit, 1); } }