cpc-food-truck: Felt Board Sign

cpc-food-truck-felt-board-sign.markdown

cpc-food-truck: Felt Board Sign

A Pen by iAMNABHON on CodePen.

License.

index.html

<!--

THANKS CODEPEN FOR THE PICK! ᕕ( ՞ ᗜ ՞ )ᕗ

        CODEPEN CHALLENGE
        https://codepen.io/challenges/year/august/3

        VIEW IN FULL SCREEN:
        https://codepen.io/drawcard/full/pencode

        DEV TIME: 1.5 hours
        FEATURES:
        - Faithful recreation of food truck felt board signage, complete with crooked and missing letters!
		- Felt board texture generated using CSS gradients
		- The board is also scrollable on the Y axis

        THANKS:
        https://codepen.io/shshaw/pen/exVJBx
    -->
<div class="frame">
	<div class="menu" data-splitting>
		<section>
			<h2>Burgers</h2>
			<p>
				<span>Hamburger</span>
				<span>$3</span>
			</p>
			<p>
				<span>Cheeseburger</span>
				<span>$3.50</span>
			</p>
			<p>
				<span>Double Cheese Burger</span>
				<span>$4.50</span>
			</p>
			<p>
				<span>Veggie Burger</span>
				<span>$3</span>
			</p>
		</section>
		<section>
			<h2>Hot Dogs</h2>
			<p><span>Hot Dog</span> <span>$3</span></p>
			<p><span>Chilli Dog</span> <span>$5</span></p>
			<p><span>Veggie Hot Dog</span> <span>$3</span></p>
		</section>
		<section>
			<h2>Chili</h2>
			<p><span>Cup</span> <span>$2</span></p>
			<p><span>Bowl</span> <span>$4</span></p>
			<h2>Sides</h2>
			<p><span>Chips</span> <span>$1</span></p>
			<p><span>Fries</span> <span>$2</span></p>
			<p><span>Sweet Potato Fries</span> <span>$3</span></p>
			<p><span>Onion Rings</span> <span>$3</span></p>
		</section>
		<section>
			<h2>Drinks</h2>
			<p><span>Soda</span> <span>$1</span></p>
			<p><span>Iced Tea</span> <span>$1</span></p>
			<p><span>Fresh Squeezed Lemonade</span> <span>$2</span></p>
		</section>
	</div>
</div>

script.js

import Splitting from "https://cdn.skypack.dev/splitting";

Splitting().forEach((s) => {
	// For every character in our sentences
	s.chars.forEach((char) => {
		// Assign a random number to an attached CSS variable
		char.style.setProperty("--random", Math.random());
	});
});

style.scss

@import url("https://fonts.googleapis.com/css2?family=Miriam+Libre:wght@400;700&display=swap");

body,
html {
	font-family: "Miriam Libre", sans-serif;
	display: grid;
	text-transform: uppercase;
	height: 100%;
	font-size: 40px;
	line-height: 1em;
	text-shadow: 0px 5px 5px #000;
}

.frame {
	width: 85vw;
	height: 80vh;
	margin: auto;
	padding: 2vw 2vh;
	background-color: rgb(180, 117, 21);
	background: url("https://source.unsplash.com/e6frrz-kh-0/1600x900");
	background-size: cover;
	display: grid;
	box-shadow: inset 0px 0px 10px #000, 0px 50px 50px #00000099;
	border-radius: 16px;
}
.menu {
	border-radius: 8px;
	box-shadow: inset 0px 10px 100px #000;
	color: white;
	padding: 1em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 2vw;
	background: rgb(0, 0, 0);
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 5px,
		rgba(42, 42, 42, 1) 10px,
		rgba(42, 42, 42, 1) 15px,
		rgba(96, 96, 96, 1) 20px
	);
	overflow-y: scroll;
	.char {
		display: inline-block;
		// Randomise letter positions / rotations
		transform: rotate(calc((var(--random) - 0.5) * 10deg))
			translate(calc((var(--random) - 0.5) * 0.1em));
		&[data-char="$"] {
			margin-left: 20px;
		}
		/* Remove every 7th letter! */
		&:nth-child(7) {
			opacity: 0;
		}
	}
}

h2 {
	font-weight: bold;
}