cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              / 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'
            
          
!
            
              @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
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console