.page
	article
		header.header
		h1
			span.jumbo 6 
			span.sign
				span.sign__text brands 
			span.subjumbo for the summer
		
		section.section
			h2.section__title 
				span.section__innertitle The inner workings
			p 
				| The first step was to find a font which had a number ‘6’ that was almost perfectly circular. The font of choice in this case is Lato. 
				| The next step is to make the image fit inside the number. The trick is to pick an image and add it as a background-image of the number. The sizing is relatively easy by setting the background-size in em value. The positioning is trial–and–error, but doable. 
				| Another trick is to give the <h1> a viewport-relative font-size and style the inner elements (the ‘6’, ‘brands’ and ‘for the summer’) with relative units, like ems, so they will always scale with the size of the title. 
				| (The font-sizes aren't bullet proof on large screens, but you get the idea)
				
		footer.footer
			small 
				| Another 
				a href='https://codepen.io/search/pens?q=magazine+layout&limit=all&type=type-pens' magazine layout
				|  brought to you by 
				a href='https://codepen.io/bartveneman' a dude who likes to bring magazine layouts to the web
				| . Image taken from 
				a href="https://unsplash.com/photos/RunDjvjvtoI" Unsplash

// SETTINGS

$primary: #333
$secondary: #fff
$cta: tomato

=mq
	@media (min-width: 48em)
		@content


// TYPOGRAPHY

@import 'https://fonts.googleapis.com/css?family=Lato:300,400,700'

html
	font: 400 1em/1.4 'Lato', sans-serif
	color: $primary
	-webkit-font-smoothing: antialiased

h1
	margin: 0 0 16rem
	text-transform: uppercase
	text-align: center
	// Set a viewport-relative font-size once for the whole
	// <h1>. Child elements will be sized using em's, so they
	// will scale with this element regardlessof it's font-size
	font-size: calc(55vh + 55vw)

.jumbo
	display: block
	margin: -0.25em 0 0 // move up a little
	line-height: 0.875
	font-weight: 300
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/photo-1452117774045-dfd7a5e9718c.jpeg')
	background-repeat: no-repeat
	// Trial-and error positioning and sizing
	background-size: 0.39em auto
	background-position: 53% 87.5%

.sign
	display: block
	font-size: 0.125em
	margin: -3.2em 0 0 // tweak position to it's inside the '6'

.sign__text
	background-color: $primary
	color: $secondary
	display: inline-block
	padding: 0 0.3em 0.1em
	line-height: 1
	position: relative
	margin: 0 0 0.45em
	// Generate the bottom border which is slightly wider
	// than the text
	&::before
		content: ''
		position: absolute
		bottom: 0.08em
		border-top: 0.04em solid
		left: 0.2em
		right: 0.2em

// Had a hard time coming up with proper classnames here...
.subjumbo
	display: block
	text-decoration: underline
	font-size: 0.03em
	text-shadow: 0.07em 0.05em 0 $secondary

.section
	p
		line-height: 1.5
		+mq
			column-count: 2
			column-gap: 1em
			line-height: 1.33 // shorter lines of text, so lower line-height
	
	
// Not too happy with this technique: place an inline-block
// element inside a block element to get the bottom-border
// to be the right width (like an underline)
.section__title
	text-align: center
	font-size: 1.15em

.section__innertitle
	text-transform: uppercase
	font-weight: 400
	border-bottom: 0.15em solid

a
	color: $cta


// LAYOUT

html
	background: $secondary

body
	margin: 0
	+mq
		padding: 1em

.page
	padding: 1em
	margin: 1em
	border: 1px solid
	max-width: 44em
	+mq
		padding: 3em 5em
		margin-right: auto
		margin-left: auto
	
.footer
	margin-top: 3em
	text-align: center