speed dial

by phloe

HTML

<link href="https://www.dr.dk/assets/css/007/webfonts/woff.css" rel="stylesheet" />
<script src="https://www.dr.dk/global-navigation/topbarbundle.js"></script>
<div class="speed-dial">
	<ul>
	  <li>Hør P4 Live</li>
	  <li>Offentlige overenskomst&shy;forhandlinger</li>
	  <li>Medie&shy;forhandlinger</li>
	  <li>De perfekte piger</li>
	  <li></li>
	  <li></li>
	</ul>
	<hr/>
</div>

	
<div class="dummy-content"></div>

SCSS

body {
	margin: 0;
}
.speed-dial {
	max-width: 940px;
	margin: 0 auto 20px;
	text-align: center;
	
	hr {
		border: 0;
		border-bottom: 5px solid #000;
		margin: 0 10px;
	}
	ul {
		white-space: nowrap;
		font-size: 0;
		padding: 0 10px;
		box-sizing: border-box;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	li {
		margin: 0 5px;
		padding: 5px 0 10px;
		list-style: none;
		display: inline-block;
		vertical-align: top;
		font-size: 14px;
		white-space: normal;
		width: 110px;
		transition: .2s ease-in-out width, .2s ease-in-out font-size;
		box-sizing: border-box;
		font-family: "Gibson";
		
		@media (max-width: 720px) {
			width: calc((100% / 6)  - 10px);
			min-width: 70px;
			font-size: 12px;
		}

		@media (max-width: 540px) {
			width: calc(((100% + 10px)  / 5.5) - 10px);
		}


		@media (max-width: 440px) {
			width: calc(((100% + 10px) / 4.5) - 10px);
		}


		@media (max-width: 340px) {
			width: calc(((100% + 10px) / 3.5) - 10px);
		}
		
		&:before {
			content: "";
			display: block;
			width: 80px;
			height: 80px;
			margin: 0 auto 5px;
			border-radius: 50%;
			background-color: #CCC;
			transition: .2s ease-in-out width, .2s ease-in-out height;

			@media (max-width: 720px) {
				width: 60px;
				height: 60px;
			}
		}
	}
}

.dummy-content {
	max-width: 920px;
	margin: 20px auto 20px;
	background-color: #CCC;
	min-height: 100vh;
	
	@media (max-width: 940px) {
		margin-left: 10px;
		margin-right: 10px;
	}
}