:ruby
text = '
So here we are again — back with more placeholder text for another example.
You’re sticking around to read it, too.
Fascinating.
We’re paused for a moment here, reading and learning together.
Relaxing, isn’t it?
'
text2 = '
Now we’re on the second paragraph.
Feel free to stop reading and look at the indentation.
That’s why we’re both here after all.
'
.mhc.mw3
.mb1l.mw05
%p= text
%p.ti05= text2
.mb1l.mw1
%p= text
%p.ti1= text2
.mb1l.mw2
%p= text
%p.ti2= text2
.mhc.mw3
%p= text
%p.ti3= text2
View Compiled
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400')
html
background: #f7f7f6
font-family: 'Source Serif Pro', serif
font-size: 17px
line-height: 1.35
padding: 37.5px
.mhc
margin-left: auto
margin-right: auto
.mw05
max-width: 460 / 19 * 1em
.mw1
max-width: 620 / 19 * 1em
.mw2
max-width: 750 / 19 * 1em
.mw3
max-width: 900 / 19 * 1em
p
margin: 0
+ p
&.ti05
text-indent: 0.5em
&.ti1
text-indent: 1em
&.ti2
text-indent: 2em
&.ti3
text-indent: 3em
.mb1l
margin-bottom: 17px * 1.35
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.