smaller gapes
This commit is contained in:
1
core.css
1
core.css
@@ -6,6 +6,7 @@
|
|||||||
--color: white;
|
--color: white;
|
||||||
--font-size: 28px;
|
--font-size: 28px;
|
||||||
--min-font-size: 15px;
|
--min-font-size: 15px;
|
||||||
|
--gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
*:not(td):not(th) {
|
*:not(td):not(th) {
|
||||||
|
|||||||
24
index.css
24
index.css
@@ -11,7 +11,7 @@ li {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.5rem 1rem;
|
padding: calc(var(--gap) / 2) var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
.focusable {
|
.focusable {
|
||||||
@@ -49,7 +49,7 @@ li {
|
|||||||
.customer-satisfaction-parent {
|
.customer-satisfaction-parent {
|
||||||
filter: url(#round);
|
filter: url(#round);
|
||||||
/* Making the triangle fit the rest of the house */
|
/* Making the triangle fit the rest of the house */
|
||||||
margin: 0 -1rem;
|
margin: 0 -var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
.customer-satisfaction {
|
.customer-satisfaction {
|
||||||
@@ -67,12 +67,12 @@ li {
|
|||||||
.customer-satisfaction h2,
|
.customer-satisfaction h2,
|
||||||
.customer-satisfaction p {
|
.customer-satisfaction p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 0.5rem 0.5rem;
|
padding: 0 calc(var(--gap) / 2) calc(var(--gap) / 2);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.levers {
|
.levers {
|
||||||
margin: 0.5rem 0;
|
margin: calc(var(--gap) / 2) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.levers ul {
|
.levers ul {
|
||||||
@@ -82,8 +82,8 @@ li {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
row-gap: 0.5rem;
|
row-gap: calc(var(--gap) / 2);
|
||||||
gap: 0.5rem;
|
gap: calc(var(--gap) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.people-improvement {
|
.people-improvement {
|
||||||
@@ -108,7 +108,7 @@ li {
|
|||||||
.pilars h3 {
|
.pilars h3 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: 1rem 2rem;
|
padding: var(--gap) 2rem;
|
||||||
width: calc(100% - (2rem * 2));
|
width: calc(100% - (2rem * 2));
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -119,7 +119,7 @@ li {
|
|||||||
flex: 2;
|
flex: 2;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pilars ul {
|
.pilars ul {
|
||||||
@@ -128,7 +128,7 @@ li {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: calc(var(--gap) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pilars li {
|
.pilars li {
|
||||||
@@ -142,8 +142,8 @@ li {
|
|||||||
.ground {
|
.ground {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 0.5rem 0;
|
margin: calc(var(--gap) / 2) 0;
|
||||||
gap: 1rem;
|
gap: var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
.improvement ul,
|
.improvement ul,
|
||||||
@@ -174,7 +174,7 @@ main a:focus-visible {
|
|||||||
|
|
||||||
details.hud {
|
details.hud {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 1rem;
|
margin: var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.hud li {
|
details.hud li {
|
||||||
|
|||||||
5
main.ts
5
main.ts
@@ -42,11 +42,8 @@ const size = params.get('size')
|
|||||||
if (size === 'small') {
|
if (size === 'small') {
|
||||||
const body = document.querySelector('body')
|
const body = document.querySelector('body')
|
||||||
if (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('--font-size', '13px')
|
||||||
document.documentElement.style.setProperty('--min-font-size', '8px')
|
document.documentElement.style.setProperty('--min-font-size', '8px')
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user