From 0fb00078d57bb74d619d28032d60f10ce4b5e360 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Mon, 23 Dec 2024 10:25:03 +0100
Subject: [PATCH] Making the roof a little more roofy

---
 index.css  | 33 +++++++++++++++++++++++++++++++--
 index.html | 28 ++++++++++++++++++++++------
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/index.css b/index.css
index c44fd89..6a28a8b 100644
--- a/index.css
+++ b/index.css
@@ -26,13 +26,42 @@ li {
   color: var(--primary-color);
 }
 
+.customer-satisfaction-roof-parent {
+  filter: url(#round);
+  /* Making the triangle fit the rest of the house */
+  margin: 0 -1rem;
+}
+
 .customer-satisfaction-roof {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   text-align: center;
-  border-radius: 5rem 5rem 0.5rem 0.5rem;
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  min-height: 150px;
+  font-size: 12pt;
+}
+
+/* mini screen */
+@media only screen and (max-width: 480px) {
+  .customer-satisfaction-roof {
+    font-size: 11pt;
+  }
+}
+
+/* medium screen */
+@media only screen and (min-width: 751px) and (max-width: 1300px) {
+  .customer-satisfaction-roof {
+    font-size: 16pt;
+  }
+}
+
+/* large screen */
+@media only screen and (min-width: 1301px) {
+  .customer-satisfaction-roof {
+    font-size: inherit;
+  }
 }
 
 .customer-satisfaction-roof h2,
@@ -150,4 +179,4 @@ details.hud {
 
 details.hud li {
   text-align: left;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1381357..9ab4991 100644
--- a/index.html
+++ b/index.html
@@ -20,12 +20,14 @@
       <h1 class="thinking-people-system">Thinking People System</h1>
     </header>
     <main>
-      <section class="customer-satisfaction-roof focusable">
-        <h2 class="customer-satisfaction">Customer Satisfaction</h2>
-        <p class="value-analysis-value-engineering">
-          Value analysis / Value engineering
-        </p>
-      </section>
+      <div class="customer-satisfaction-roof-parent">
+        <section class="customer-satisfaction-roof focusable">
+          <h2 class="customer-satisfaction">Customer Satisfaction</h2>
+          <p class="value-analysis-value-engineering">
+            Value analysis / Value engineering
+          </p>
+        </section>
+      </div>
       <section class="levers">
         <ul>
           <li class="security focusable">Security</li>
@@ -152,6 +154,20 @@
         </li>
       </ul>
     </details>
+    <svg class="flt_svg" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="round">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
+            result="flt_tag"
+          />
+          <feComposite in="SourceGraphic" in2="flt_tag" operator="atop" />
+        </filter>
+      </defs>
+    </svg>
     <script type="module" src="main.ts"></script>
   </body>
 </html>