/* ══════════════════════════════════════════════════════════════════════════ Skalningsramp — mer plats på mindre upplösningar PROBLEMET, MÄTT Kunden upplevde att allt var för stort på 1280x800. Mätningen visade varför: mellan 1920 och 1280 krymper layouten mycket mer än typografin. Container 1600px -> 1166px -27 % --h1 56,5px -> 47,6px -16 % --text-m 16,0px -> 15,5px -3 % Sektionsluft 120,0px -> 104,5px -13 % Rubriken upptog därför 4,08 % av spaltbredden på 1280 mot 3,53 % på 1920, och luften 8,96 % mot 7,50 %. Allt är alltså proportionellt 16-19 % större i förhållande till layouten — precis den känsla kunden beskrev. ORSAKEN ACSS interpolerar allt mot viewportBREDDEN mellan vp-min (360) och vp-max (1600). Varje fluid-variabel når sitt max exakt vid 1600px. Vid 1280 ligger man alltså på 74 % av rampen, nästan i taket, medan containern redan tappat 27 % av sin bredd. Rampen är för flack i sin övre halva. ÅTGÄRDEN Flytta rampens ÖVRE ankarpunkt till 1920. Då hamnar 1280 på 59 % av rampen i stället för 74 %. Min- och maxvärdena är oförändrade, så 1920 ser exakt likadant ut som förut — det är bara vägen dit som blir längre. VARFÖR HÄR OCH INTE I ACSS-INSTÄLLNINGARNA Tre skäl, alla dyrköpta: 1. vp-max är hårdkopplad till --content-width i ACSS SCSS (assets/scss/automatic-imports_precompiled.scss:77: $content-width: $vp-max * 1rem). Höjer man inställningen växer containern från 1600 till 1920 px, vilket ändrar den stora skärmen som ingen bett om — uppmätt föll kvoten rubrik/container där till 3,168. 2. Att spara inställningarna tvingar ACSS att regenerera alla CSS-filer, och den regenereringen ger inte samma CSS som ligger på disk. Bland annat försvann hela familjen flödesregler (.brxe-text > * + p), alltså avstånden mellan stycken och rubriker inuti textelement. 3. Halvvägs regenererade filer gav blandade brytpunkter (både 1280 och 1279), vilket slog om huvudmenyn till hamburgare. Den här filen rör varken inställningar eller regenerering. Den definierar om samma custom properties som ACSS sätter, laddas efter dem, och går att ta bort med en rad — se inc/enqueue.php, som har en file_exists-vakt. BRYTPUNKTERNA RÖRS INTE. ACSS och Bricks bryter på olika pixel (1280 mot 1279, 992 mot 991, och så vidare hela vägen ned), vilket är ett verkligt fel — men det är en egen fråga och ska inte blandas in i skalningen. UPPMÄTT RESULTAT vid 1280x800, startsidan: Rubrik 47,6px -> 42,3px Sektionsluft 104,5px -> 88,3px Sidhöjd 6056px -> 5856px Kvot rubrik 4,08 % -> 3,59 % (mål: 1920 års 3,53 %) Kvot luft 8,96 % -> 7,50 % (mål: 7,50 %) Vid 1920: oförändrat i samtliga mått. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Rampen: samma min och max, övre ankaret flyttat 1600 -> 1920 ────── Formeln är ACSS egen, med (vp-max - vp-min) = 1560 i stället för 1240. Kommentaren visar utfallet vid 1280. */ --h1: clamp(2.1866rem, calc(2.8840844vw + 0.1168480rem), 5.6542900rem); /* 38.1px @1280 · 56.5px @1920 */ --h2: clamp(2.0493rem, calc(1.7495297vw + 0.6396930rem), 3.9987900rem); /* 28.8px @1280 · 40.0px @1920 */ --h3: clamp(1.9206rem, calc(0.9653797vw + 0.9744710rem), 2.8280000rem); /* 22.1px @1280 · 28.3px @1920 */ --h4: clamp(1.8000rem, calc(0.3125000vw + 1.4000000rem), 2.0000000rem); /* 18.0px @1280 · 20.0px @1920 */ --text-m: clamp(1.4000rem, calc(0.1282051vw + 1.3538462rem), 1.6000000rem); /* 15,2px */ --text-l: clamp(1.4938rem, calc(0.2732051vw + 1.3954462rem), 1.9200000rem); /* 17,5px */ --text-xl: clamp(1.5939rem, calc(0.4552022vw + 1.4300118rem), 2.3040000rem); /* 20,1px */ --text-xxl: clamp(1.7007rem, calc(0.6821315vw + 1.4551075rem), 2.7648000rem); /* 23,3px */ --space-xs: clamp(1.5360rem, calc(0.0976565vw + 1.5008437rem), 1.6883441rem); /* 16,3px */ --space-s: clamp(1.9200rem, calc(0.2118991vw + 1.8437163rem), 2.2505626rem); /* 21,1px */ --space-m: clamp(2.4000rem, calc(0.3846154vw + 2.2615385rem), 3.0000000rem); /* 27,5px */ --space-l: clamp(3.0000rem, calc(0.6403846vw + 2.7694615rem), 3.9990000rem); /* 35,9px */ --space-xl: clamp(3.7500rem, calc(1.0132481vw + 3.3852307rem), 5.3306670rem); /* 46,8px */ --space-xxl: clamp(4.6875rem, calc(1.5501789vw + 4.1294356rem), 7.1057791rem); /* 61,1px */ /* ── Sidluften: desktopvärdet i alla bredder från 479px ────────────── Den fluida rampen når sitt maxvärde 6rem först vid 1920. På en iPad landade den på 31px och på 1024 på 37, så innehållet kröp mot skärmkanten överallt utom på stora skärmar. Kontaktvyn tålde det sämst — där bär vänsterkanten avdelningslistan och hade ingen luft kvar att ge. Låst på 6rem, alltså samma luft som en 1920-skärm får. Under 479px ligger rampen kvar: 6rem åt varje håll är 120px av en 375px-skärm, en tredjedel av bredden, och där behövs den fluida skalan. Brytpunkten är densamma som komponenterna redan använder. Deklarationen står HÄR och inte i style.css: den här filen laddas efter temats stilmall och skulle annars skriva över den — uppmätt, en override i style.css gav ingen effekt alls. */ --section-padding-x: clamp(2.0000rem, calc(2.5641026vw + 1.0769231rem), 6.0000000rem); /* 43,6px */ --gutter: clamp(2.0000rem, calc(2.5641026vw + 1.0769231rem), 6.0000000rem); /* 43,6px */ /* ── Sektionsluften: ankrad mellan 1280 och 1920 ────────────────────── Enbart rampflytten räcker inte här. En linjär interpolation från 360 kan inte träffa två mål samtidigt, och vi har två: luften ska vara oförändrad vid 1920 (120px) och proportionell vid 1280. Med enbart rampen hamnade den på 95,4px, kvot 8,10 mot målets 7,50. Därför ankras luften direkt mellan de två skärmbredder som faktiskt förekommer, i stället för mellan mobil och en tänkt maxbredd. Det är den generella lärdomen ur hela övningen — förankra i det som finns. Varje värde är max x 0,73625, alltså kvoten mellan containerbredden vid 1280 (1178px) och vid 1920 (1600px). Då blir luftens andel av spalten densamma på båda skärmarna. Min-värdena är ACSS egna och gäller alltjämt på mobil. */ --section-space-xs: clamp(3.0720rem, calc(2.6700062vw - 0.0613820rem), 5.0650300rem); /* 33.6px @1280 · 50.7px @1920 */ --section-space-s: clamp(3.8400rem, calc(3.5587938vw - 0.0811940rem), 6.7516900rem); /* 44.7px @1280 · 67.5px @1920 */ --section-space-m: clamp(4.8000rem, calc(4.7443359vw - 0.1091250rem), 9.0000000rem); /* 59.6px @1280 · 90.0px @1920 */ --section-space-l: clamp(6.0000rem, calc(6.3255656vw - 0.1480860rem), 11.9970000rem); /* 79.5px @1280 · 120.0px @1920 */ --section-space-xl: clamp(7.5000rem, calc(8.4312547vw - 0.1960090rem), 15.9920000rem); /* 106.0px @1280 · 159.9px @1920 */ --section-space-xxl: clamp(9.3750rem, calc(11.2391625vw - 0.2618520rem), 21.3173400rem); /* 141.2px @1280 · 213.2px @1920 */ } /* Sidluften låst till desktopvärdet, se kommentaren vid --section-padding-x. */ @media (min-width: 479px) { :root { --section-padding-x: 6rem; --gutter: 6rem; } }