Tuning text with CSS clamp

eudanielsilveira · May 22, 2023 · f1f2cb1 · f1f2cb1
1 parent ae6dd49
commit f1f2cb1
Showing 1 changed file with 9 additions and 11 deletions.
diff --git a/style.css b/style.css
@@ -16,7 +16,8 @@
 
   font-size: 62.5%;
   --fs-body: 1.6rem;
-  --fs-heading: 4rem;
+  --fs-heading: clamp(4rem, 1rem + 5vw, 5.6rem);
+  --fs-heading-sm: clamp(3rem, .5rem + 3vw, 4rem);
 }
 body {
   font-family: var(--ff-texting);
@@ -28,7 +29,8 @@ body {
 }
 
 .page {
-  max-width: 33rem;
+  max-width: clamp(33rem, 30rem + 60vw, 117rem);
+  padding: 0 5rem;
   margin: 0 auto;
 }
 
@@ -78,11 +80,15 @@ main {
   height: 41.6rem;
   object-fit: cover;
 
+  filter: brightness(0.5) saturate(0);
+
   border-radius: 6px;
 
   transition: all 200ms;
 }
 .card img:hover {
+  filter: brightness(1);
+
   transform: scale(1.1);
   opacity: .4;
 }
@@ -91,7 +97,7 @@ main {
   bottom: 5.2rem;
   left: 2.8rem;
 
-  font-size: 4rem;
+  font-size: var(--fs-heading-sm);
   font-weight: 800;
 
   display: flex;
@@ -138,14 +144,6 @@ main {
 }
 
 @media (min-width: 700px) {
-  :root {
-    --fs-heading: 5.6rem;
-  }
-
-  .page {
-    max-width: 117rem;
-    padding: 0 5rem;
-  }
   main {
     grid-template-columns: 1fr 1fr;
   }