No Room For Squares

Talkin' Points

Type info

Code

	<div class="wrapper">
		<div class="sleeve">
			<h1>No Room <span>For</span> Squares</h1>
			<div class="musicians">
				<h2>Hank Mobley</h2>
				<ul>
					<li>Lee Morgan</li>
					<li>Donald Byrd</li>
					<li>Andrew Hill</li>
					<li>Herbie Hancock</li>
					<li>John Ore</li>
					<li>Butch Warren</li>
					<li>Philly Joe Jones</li>
				</ul>
			</div>
			<footer class="logo">
				<span class="rectangle"></span>
				<span class="elipse"></span>
				<span class="label">Blue Note</span>
			</footer>
		</div>
	</div>

	/* ------------- fonts -------------- */

	@font-face {
		font-family: 'Trade Gothic Bold';
	    src: url('fonts/trade-gothic/TradeGothicLTStd-Bd2.woff2') format('woff2'),
	         url('fonts/trade-gothic/TradeGothicLTStd-Bd2.woff') format('woff');
	    font-weight: bold;
	    font-style: normal;
	}

	@font-face {
		font-family: 'Trade Gothic';
	    src: url('fonts/trade-gothic/TradeGothicLTStd.woff2') format('woff2'),
	         url('fonts/trade-gothic/TradeGothicLTStd.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
		font-family: 'Trade Gothic Light';
	    src: url('fonts/trade-gothic/TradeGothicLTStd-Light.woff2') format('woff2'),
	         url('fonts/trad-egothic/TradeGothicLTStd-Light.woff') format('woff');
	    font-weight: lighter;
	    font-style: normal;
	}

	/* reset
	--------------------------------------------------------------------- */

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	:root {
		--pale-yellow: #d2be8f;
		--pale-yellow: #c3aa6e;
		--hot-pink: #f1188c;
		--gold: #c6872f;
		--off-white: #eeede5;
		--text-dark-primary: #170e04;
		--text-dark-secondary: #170e04;
	}

	html {
		font-size: 1vw;
	}

	ul {
		list-style-type: none;
	}

	/* layout
	--------------------------------------------------------------------- */

	body {
		background-color: #fff;
	}

	.wrapper {
		width: 100%;
  		max-width: 600px;
		border: 5px solid #fff;
  		margin: 1rem auto;
	}

	.sleeve {
		height: 0;
		padding-top: 2.5%;
  		padding-bottom: 97.5%;
  		background: url('no-room-for-squares.jpg');
  		background-size: cover;
	}

	.musicians {
		margin-right: 1%;
	}

	/* type
	--------------------------------------------------------------------- */

	h1, h2, li {
		text-transform: uppercase;
	}

	h1 {
		max-width: 20%;
		padding: 3% 0;
		border: 8px solid var(--off-white);
		margin-left: 1%;
		font-family: 'Trade Gothic Bold';
		font-size: 3.3391em;
		line-height: 1;
		color: var(--hot-pink);
		text-align: center;
	}

	h2 {
		margin-top: 11%;
		margin-left: 29.1186%;
		font-family: 'Trade Gothic';
		font-size: 4.5075em;
		font-weight: 200;
		line-height: 1.2;
		color: var(--off-white);
	}

	li {
		font-family: 'Trade Gothic Light';
		font-size: 2.67128em;
		font-weight: 200;
		letter-spacing: -0.5px;
		color: var(--pale-yellow);
	}

	li:nth-of-type(1) {
		margin-left: 23%;
	}


	li:nth-of-type(2) {
		margin-left: 29%;
	}


	li:nth-of-type(3) {
		margin-left: 22.5%;
	}


	li:nth-of-type(4) {
		margin-left: 17.45%;
	}

	li:nth-of-type(5) {
		margin-left: 17%;
	}

	li:nth-of-type(6) {
		margin-left: 9.4%;
	}


	li:nth-of-type(7) {
		margin-left: 7.8%;
	}

	/* logo
	--------------------------------------------------------------------- */

	footer {
		position: absolute;
		top: 60%;
		left: 9.9%;
		width: 19%;
		height: 6.3333%;
		color: #e3a013;
	}

	.rectangle {
		position: relative;
		display: block;
		width: 63.6363%;
		height: 47.3684%; /* 18px / 38px */
		border: 1px solid var(--pale-yellow);
		background: var(--pale-yellow);
		float: right;
	}

	.rectangle:after {
		position: absolute;
		content: 'The Finest in Jazz';
		bottom: 0;
		padding-left: 2%;
		font-size: 2px;
		color: var(--text-dark-primary);
	}

	.elipse {
		display: block;
		width: 36.3636%;
		height: 52.6315%;
		border-radius: 20px / 10px;
		border: 1px solid var(--pale-yellow);
		margin-top: 15%;
		margin-right: 0.01%;
		margin-bottom: 8px;
		background: var(--pale-yellow);
		float: left;
	}

	.elipse:after {
		content: '';
		padding: 2%;
	}

	.label {
		padding-top: 3%;
		padding-left: 5%;
		font-family: 'Trade Gothic';
		text-transform: uppercase;
		font-size: 2px;
		font-weight: 400;
		color: var(--pale-yellow);
		float: left;
	}

	/* media queries and locks
	--------------------------------------------------------------------- */
	
	@media (min-width: 180px) {
		.label {
			font-size: calc(0.0238 * 100vw + -2.28px);
		}
		.rectangle:after {
			font-size: calc(0.0166 * 100vw + -0.988px);
		}
	}

	@media (min-width: 600px) {
		h1 {
			font-size: 20px;
		}

		h2 {
			font-size: 27px;
		}

		li {
			font-size: 16px;
		}

		.label {
			font-size: 12px;
		}
		.rectangle:after {
			font-size: 9px;
		}
	}