Merge branch 'main' of github.com:jcalixte/tps

README.md

@@ -1,3 +1,3 @@
 # Thinking People System
 
-An interactive website to better understand the Thinking People System.
+[An interactive website](https://thinking-people-system.house) to better understand the Thinking People System.

core.css

@@ -4,6 +4,9 @@
   --primary-color: #002992;
   --primary-color-no-focus: #abbbdf;
   --color: white;
+  --font-size: 28px;
+  --min-font-size: 15px;
+  --gap: 1rem;
 }
 
 *:not(td):not(th) {
@@ -26,7 +29,7 @@ main {
   flex-direction: column;
   justify-content: center;
   gap: 0;
-  margin: 1rem 1rem 0;
+  padding: 1rem 1rem 0;
   color: var(--color);
 }
 
@@ -42,4 +45,4 @@ main {
 
 .meaning::after {
   content: ')';
-}
+}

index.css

@@ -1,5 +1,5 @@
 body {
-  font-size: clamp(11px, 2.1vw, 28px);
+  font-size: clamp(var(--min-font-size, 11px), 2.1vw, var(--font-size, 28px));
 }
 
 ul {
@@ -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 {
@@ -46,32 +46,33 @@ li {
   color: var(--color);
 }
 
-.customer-satisfaction-roof-parent {
+.customer-satisfaction-parent {
   filter: url(#round);
   /* Making the triangle fit the rest of the house */
-  margin: 0 -1rem;
+  margin: 0 -var(--gap);
 }
 
-.customer-satisfaction-roof {
+.customer-satisfaction {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   text-align: center;
   clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
-  min-height: 150px;
-  font-size: clamp(15px, 2.1vw, 28px);
+  /* Set --min-height in JS or fallback to 150px if --font-size is 28px, otherwise 110px */
+  min-height: var(--min-height, 150px);
+  font-size: clamp(var(--min-font-size, 11px), 2.1vw, var(--font-size, 28px));
 }
 
-.customer-satisfaction-roof h2,
-.customer-satisfaction-roof p {
+.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 {
@@ -81,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 {
@@ -107,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;
 }
@@ -118,7 +119,7 @@ li {
   flex: 2;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: var(--gap);
 }
 
 .pilars ul {
@@ -127,7 +128,7 @@ li {
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
-  gap: 0.5rem;
+  gap: calc(var(--gap) / 2);
 }
 
 .pilars li {
@@ -141,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,
@@ -173,7 +174,7 @@ main a:focus-visible {
 
 details.hud {
   font-size: 16px;
-  margin: 1rem;
+  margin: var(--gap);
 }
 
 details.hud li {

index.html

@@ -20,9 +20,9 @@
       <h1 class="thinking-people-system">Thinking People System</h1>
     </header>
     <main id="thinking-people-system">
-      <div class="customer-satisfaction-roof-parent">
-        <section class="customer-satisfaction-roof focusable">
-          <h2 class="customer-satisfaction">Customer Satisfaction</h2>
+      <div class="customer-satisfaction-parent">
+        <section class="customer-satisfaction focusable">
+          <h2 class="customer-satisfaction-title">Customer Satisfaction</h2>
           <p class="value-analysis-value-engineering">
             <span class="use-value">Use</span> Value analysis /
             <span class="use-value">Use</span> Value engineering
@@ -33,7 +33,7 @@
         <ul>
           <li class="safety focusable">Safety</li>
           <li class="quality focusable">Quality</li>
-          <li class="lead-time focusable">Lead&nbsp;time</li>
+          <li class="delivery focusable">Delivery</li>
           <li class="cost focusable">Cost</li>
           <li class="environment focusable">Environment</li>
         </ul>

main.ts

@@ -31,12 +31,21 @@ if (display === 'house-only') {
   document.querySelectorAll('.hud')?.forEach((hud) => hud.remove())
 }
 
+const simpleCustomerSatisfaction = params.get('customer-satisfaction')
+
+if (simpleCustomerSatisfaction === 'simple') {
+  document.querySelector('.value-analysis-value-engineering')?.remove()
+}
+
 const size = params.get('size')
 
 if (size === 'small') {
   const body = document.querySelector('body')
   if (body) {
-    body.style.fontSize = '15px'
+    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')
   }
 }
 

team-leader.html

@@ -20,16 +20,18 @@
       <h1 class="thinking-people-system">Thinking People System</h1>
     </header>
     <main id="thinking-people-system">
-      <div class="customer-satisfaction-roof-parent">
-        <section class="customer-satisfaction-roof focusable">
-          <h2 class="customer-satisfaction">Is the customer satisfied?</h2>
+      <div class="customer-satisfaction-parent">
+        <section class="customer-satisfaction focusable">
+          <h2 class="customer-satisfaction-title">
+            Is the customer satisfied?
+          </h2>
         </section>
       </div>
       <section class="levers">
         <ul>
           <li class="safety focusable">Safety</li>
           <li class="quality focusable">Quality</li>
-          <li class="lead-time focusable">Lead&nbsp;time</li>
+          <li class="delivery focusable">Delivery</li>
           <li class="cost focusable">Cost</li>
           <li class="environment focusable">Environment</li>
         </ul>