julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making the roof a little more roofy

Browse Source
This commit is contained in:
Julien Calixte
2024-12-23 10:25:03 +01:00
parent a9f434ef1a
commit 0fb00078d5
2 changed files with 53 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index.css
View File

@@ -26,13 +26,42 @@ li {
color: var(--primary-color); 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 { .customer-satisfaction-roof {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
text-align: 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, .customer-satisfaction-roof h2,

28
index.html
View File

@@ -20,12 +20,14 @@
<h1 class="thinking-people-system">Thinking People System</h1> <h1 class="thinking-people-system">Thinking People System</h1>
</header> </header>
<main> <main>
<section class="customer-satisfaction-roof focusable"> <div class="customer-satisfaction-roof-parent">
<h2 class="customer-satisfaction">Customer Satisfaction</h2> <section class="customer-satisfaction-roof focusable">
<p class="value-analysis-value-engineering"> <h2 class="customer-satisfaction">Customer Satisfaction</h2>
Value analysis / Value engineering <p class="value-analysis-value-engineering">
</p> Value analysis / Value engineering
</section> </p>
</section>
</div>
<section class="levers"> <section class="levers">
<ul> <ul>
<li class="security focusable">Security</li> <li class="security focusable">Security</li>
@@ -152,6 +154,20 @@
</li> </li>
</ul> </ul>
</details> </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> <script type="module" src="main.ts"></script>
</body> </body>
</html> </html>