-> tailwind

This commit is contained in:
roryjshelton 2023-05-05 08:45:14 +02:00
parent f422b72ffb
commit 41afba6daf
3 changed files with 10 additions and 17 deletions

View File

@ -1,7 +1,7 @@
.grid-grid { .grid-grid {
display: grid; display: grid;
grid-template-columns: 25% 25% 25%; grid:
grid-template-rows: 5% 5%; "top-left top-mid top-right" 5% "bot-left bot-mid bot-right" 5% / 25% 25% 25%;
gap: 44.5% 0.5%; gap: 44.5% 0.5%;
margin-block: 15vh; margin-block: 15vh;
grid-auto-flow: row; grid-auto-flow: row;
@ -9,9 +9,6 @@
align-content: center; align-content: center;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
grid-template-areas:
"top-left top-mid top-right"
"bot-left bot-mid bot-right";
} }
.top-left { .top-left {

View File

@ -3,8 +3,14 @@ import "./MessageStyles.css";
--- ---
<div class="message-container"> <div class="message-container">
<div class="message-header">A message from Derrick</div> <div
<div class="message-content"> class="message-header text-[color:var(--blue-charcoal-2)] text-[calc(25px_+_(32_-_24)_*_((100vw_-_300px)_/_(1600_-_300)))] font-bold leading-[2em] not-italic;"
>
A message from Derrick
</div>
<div
class="message-content text-[color:var(--blue-charcoal-2)] text-[calc(15px_+_(21_-_14)_*_((100vw_-_300px)_/_(1600_-_300)))] max-w-[85%] font-normal not-italic;"
>
Web3 gives people control over their data, privacy, and ownership. Web3 gives people control over their data, privacy, and ownership.
Lume's affordable Web3 tech aims to speed up the transition from Web2 to Lume's affordable Web3 tech aims to speed up the transition from Web2 to
Web3, which matters for privacy and security. Web3, which matters for privacy and security.

View File

@ -11,19 +11,9 @@
} }
.message-header { .message-header {
color: var(--blue-charcoal-2);
font-family: var(--font-family-jetbrains-mono); font-family: var(--font-family-jetbrains-mono);
font-size: calc(25px + (32 - 24) * ((100vw - 300px) / (1600 - 300)));
font-weight: 700;
line-height: 2em;
font-style: normal;
} }
.message-content { .message-content {
color: var(--blue-charcoal-2);
font-family: var(--font-family-jaldi); font-family: var(--font-family-jaldi);
font-size: calc(15px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
max-width: 85%;
font-weight: 400;
font-style: normal;
} }