Wild CSS Alert: the notebook lines and copy in the footer scale in sync, no matter the screen size. The pink card in the hero is intentionally misaligned, per the design, so ignore that guy at the top. But the footer lines are pretty cool 😎
/* Simplified CSS for demonstration, but if you inspect this is pretty close to what's live :) */
/* set font size */
:root {
--fs: 3rem;
}
/* adjust font size carefully at many breakpoints */
@media (max-width: 1700px) { :root { --fs: 3vw; } }
@media (max-width: 991px) { :root { --fs: 4.25vw; } }
@media (max-width: 767px) { :root { --fs: 5vw; } }
@media (max-width: 480px) { :root { --fs: 6vw; } }
/* apply font size to card text */
.take_card {
font-size: var(--fs);
line-height: calc(1.25 * var(--fs));
}
/* apply font size to div holding lines */
.take_card-note-lines {
font-size: var(--fs);
line-height: 1em;
/* this is what generates the perfect lines */
background-image:
linear-gradient(
var(--earthy-brown) 1px,
transparent 1px
);
background-position: center center;
/* note: this matches the card text line-height */
background-size: 100% calc(1.25 * var(--fs));
}
