Nafuda

by Ricardo Zambon

HTML

<script src="https://fonts.googleapis.com/css2?family=Schoolbell&amp;display=swap"></script>

<div class="nafuda-content" onresize="resize_check()">
	
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size: 22px;">
				<span>守狼</span>
			</div>
			<div class="romaji">
				Wenzel<br />
				Böhm
			</div>
		</div>
	
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size: 22px;">
				<span>守狼</span>
			</div>
			<div class="romaji">
				Wenzel<br />
				Böhm
			</div>
		</div>
		
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size: 22px;">
				<span>守狼</span>
			</div>
			<div class="romaji">
				Wenzel<br />
				Böhm
			</div>
		</div>
		
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size: 22px;">
				<span>守狼</span>
			</div>
			<div class="romaji">
				Wenzel<br />
				Böhm
			</div>
		</div>
		
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size: 22px;">
				<span>守狼</span>
			</div>
			<div class="romaji">
				Wenzel<br />
				Böhm
			</div>
		</div>
		
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size: 22px;">
				<span>守狼</span>
			</div>
			<div class="romaji">
				Wenzel<br />
				Böhm
			</div>
		</div>
		
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size: 22px;">
				<span>守狼</span>
			</div>
			<div class="romaji">
				Wenzel<br />
				Böhm
			</div>
		</div>
		
		<div class="nafuda">
			<div class="guerra" style="font-size: 18px">
				ヴェンゼル
			</div>
			<div class="kanji" style="font-size:...

SCSS

@import url('//fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;700&display=swap');
@import url('//fonts.googleapis.com/css2?family=Roboto&display=swap');

.nafuda-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 1.45rem;
	row-gap: 24px;
	
	padding: 22px 1rem;
	width: 540px;
	overflow: hidden;
	
	margin: 0 auto;
	
	border: 1px solid;
}

.nafuda {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 70px;
	height: 140px;
	
	border-radius: 3px;
	background-image: url('http://www.niten.org.br/imagens/nafuda/nafuda-modelo-1.png');
	
	.romaji {
		grid-column: span 2 / span 2;
	}
	
	.guerra, .kanji {
		display: flex;
		align-items: center;
		justify-content: start;
		padding-top: 5px;
		
		font-family: 'Shippori Mincho B1', serif;
		writing-mode: tb-rl;
		font-weight: 700;
		
		color: white;
	}
	
	.romaji {
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		text-align: center;
		color: white;
	}
}

.row::before, .nafuda-content > .nafuda:last-child::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 20px;
	background-color: darkgray;
}

.row::before {
	margin-top: -22px;
}

.nafuda-content > .nafuda:last-child::after {
	margin-top: 142px;
}

JavaScript

function resize_check() {
	var nafudas = [...document.querySelectorAll('.nafuda-content .nafuda')];
	
	var top = 0;
	nafudas.forEach(nafuda => {
		var nafudaTop = nafuda.getBoundingClientRect().top + window.scrollY;
		if (nafudaTop > top) {
			top = nafudaTop;
			if (!nafuda.classList.contains('row')) {
				nafuda.classList.add('row');
			}
		}
		else if (nafuda.classList.contains('row')) {
			nafuda.classList.remove('row');
		}
	});
}

resize_check();

window.addEventListener("resize", resize_check);