/ Design source: https://dribbble.com/shots/3011347-Luminous-Magazine
/ Image source: https://unsplash.com/search/palm?photo=ItGkpXAr8gk

header.site-header
	.split
		.site-title
			.title Luminous
			.sub-title A magazine for Finer Things
		.nr
			span Nr. 
			span.digit 001

article.article
	.title Article
	h1.article-title
		| New person,
		br
		| same old mistakes
	a.article-continue href='https://dribbble.com/shots/3011347-Luminous-Magazine' Read
	img.article-img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-palm-trees.jpg'
View Compiled
@import 'https://fonts.googleapis.com/css?family=Cormorant+Garamond'

// Base unit for sizing and spacing
$u: 1.4em

=bp-tabloid
	@media (min-width: 33em)
		@content
	
=bp-broadsheet
	@media (min-width: 62em)
		@content

html
	background: #ECDDE7
	color: mix(#F9F8F9, black, 15%)
	font-size: 1.1em
	line-height: 1
	font-family: 'Cormorant Garamond', serif
	transition: font-size 0.1s
	+bp-broadsheet
		font-size: 1.2em

html,
body
	min-height: 100%
	
body
	margin: 0
	+bp-broadsheet
		display: flex

.site-header,
.article
	padding: 1em
	transition: padding 0.2s
	+bp-tabloid
		padding: (2 * $u)
	
.site-header
	background: #F9F8F9

.site-title
	margin-bottom: 1em
	+bp-broadsheet
		margin-bottom: (18 * $u)

.title
	font-size: $u
	margin-bottom: 0.4em
	white-space: nowrap
	&::after
		content: ''
		display: inline-block
		vertical-align: middle
		width: (2 * $u)
		border-top: 0.06em solid
		margin-left: 0.6em
	
.nr
	font-size: $u
	.digit
		font-size: $u
		+bp-tabloid
			display: block
			font-size: (4 * $u)
			line-height: 0.8
			margin-top: -0.2em

.split
	display: flex
	justify-content: space-between
	+bp-broadsheet
		display: block
	
.article
	+bp-broadsheet
		padding-left: (4 * $u)

.article-title
	font-weight: 400
	font-size: (2 * $u)
	line-height: 0.85
	text-transform: capitalize
	+bp-tabloid
		font-size: calc(#{(2 * $u)} + 1vw)
	+bp-broadsheet
		font-size: (2.5 * $u)
		font-size: calc(#{(1.5 * $u)} + 2.5vw)
		margin-bottom: 0.66em
	
.article-continue
	display: inline-block
	color: inherit
	text-decoration: none
	border: 0.08em solid
	padding: 0.7em 2em
	text-transform: uppercase
	font-family: sans-serif
	font-size: 0.7em
	letter-spacing: 0.5em
	&:hover
		text-decoration: underline

img
	max-width: 100%
	height: auto
	display: block

.article-img
	margin-top: -(4 * $u)
	margin-left: (2 * $u) // undo right padding
	position: relative
	z-index: -1
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.