diff --git a/core.css b/core.css index 22e1227..c178556 100644 --- a/core.css +++ b/core.css @@ -6,6 +6,7 @@ --color: white; --font-size: 28px; --min-font-size: 15px; + --gap: 1rem; } *:not(td):not(th) { diff --git a/index.css b/index.css index 80723d3..95a3e5a 100644 --- a/index.css +++ b/index.css @@ -11,7 +11,7 @@ li { flex: 1; list-style: none; text-align: center; - padding: 0.5rem 1rem; + padding: calc(var(--gap) / 2) var(--gap); } .focusable { @@ -49,7 +49,7 @@ li { .customer-satisfaction-parent { filter: url(#round); /* Making the triangle fit the rest of the house */ - margin: 0 -1rem; + margin: 0 -var(--gap); } .customer-satisfaction { @@ -67,12 +67,12 @@ li { .customer-satisfaction h2, .customer-satisfaction p { margin: 0; - padding: 0 0.5rem 0.5rem; + padding: 0 calc(var(--gap) / 2) calc(var(--gap) / 2); border-radius: 0; } .levers { - margin: 0.5rem 0; + margin: calc(var(--gap) / 2) 0; } .levers ul { @@ -82,8 +82,8 @@ li { justify-content: space-between; align-items: center; padding-left: 0; - row-gap: 0.5rem; - gap: 0.5rem; + row-gap: calc(var(--gap) / 2); + gap: calc(var(--gap) / 2); } .people-improvement { @@ -108,7 +108,7 @@ li { .pilars h3 { margin-top: 0; margin-bottom: 0; - padding: 1rem 2rem; + padding: var(--gap) 2rem; width: calc(100% - (2rem * 2)); text-align: center; } @@ -119,7 +119,7 @@ li { flex: 2; flex-direction: column; align-items: center; - gap: 1rem; + gap: var(--gap); } .pilars ul { @@ -128,7 +128,7 @@ li { flex-direction: column; justify-content: space-evenly; align-items: center; - gap: 0.5rem; + gap: calc(var(--gap) / 2); } .pilars li { @@ -142,8 +142,8 @@ li { .ground { display: flex; flex-direction: column; - margin: 0.5rem 0; - gap: 1rem; + margin: calc(var(--gap) / 2) 0; + gap: var(--gap); } .improvement ul, @@ -174,7 +174,7 @@ main a:focus-visible { details.hud { font-size: 16px; - margin: 1rem; + margin: var(--gap); } details.hud li { diff --git a/main.ts b/main.ts index 4d206f7..fb17a2a 100644 --- a/main.ts +++ b/main.ts @@ -42,11 +42,8 @@ const size = params.get('size') if (size === 'small') { const body = document.querySelector('body') if (body) { - if (simpleCustomerSatisfaction) { - document.documentElement.style.setProperty('--min-height', '80px') - } else { - document.documentElement.style.setProperty('--min-height', '100px') - } + document.documentElement.style.setProperty('--min-height', '100px') + document.documentElement.style.setProperty('--gap', '0.5rem') document.documentElement.style.setProperty('--font-size', '13px') document.documentElement.style.setProperty('--min-font-size', '8px') }