Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                // This pen uses only system fonts--Georgia and Trebuchet MS, to be specific.
// The point of this exercise is to show that using system fonts
// can be a legitimate choice for a modern website. Why trigger
// unnecessary HTTP requests using Google fonts or go through the 
// hassle of serving local fonts through a @font-face declaration?
// There are a number of system fonts that will display the same
// across operating systems.


nav.site-nav
  a.site-title(href="") Site Title
  .main-nav
    ul
      li Pages
      | | 
      li
        a(href="") Link1
      li
        a(href="") Link2
      li
        a(href="") Link3
      li
        a(href="") Link4
article.main-article
  header
    h3.byline Posted by 
      a(href="") Author Name
      |  |  
      a(href="") October 11, 2016
      |  |  
      a(href="") category1
      | , 
      a(href="") category2
    h1.article__headline Article headline lorem ipsum dolor sit amet, consectetur adipisicing elit
    h2.lead Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sunt placeat, omnis provident eius sapiente fugiat sequi officiis laboriosam dolor

  article
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deserunt odio soluta tenetur doloribus eligendi sint, delectus sunt recusandae id maxime praesentium consectetur incidunt quam omnis officia, voluptatem nostrum in!
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur corporis harum quaerat. Qui aliquam nostrum laborum dicta et, soluta suscipit autem, mollitia, eveniet blanditiis ipsa! Cum beatae aspernatur iure laborum quibusdam, facere natus odit ex, inventore illo laboriosam tempora asperiores. Harum illo odit, nostrum veritatis, voluptate ea deleniti ipsa alias!
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa perferendis provident ducimus aliquam esse tenetur ex eveniet animi in.
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa perferendis provident ducimus aliquam esse tenetur ex eveniet animi in.
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid praesentium similique soluta in facilis quidem dicta inventore odio. Nisi debitis, itaque at in suscipit quisquam iusto veritatis officia doloremque praesentium harum voluptas ducimus animi, aspernatur repellendus dolor delectus expedita esse minus laborum? Consequatur veniam magni expedita tempore aperiam iste, culpa? &nbsp;&spades;

  aside.author-bio  
    img.profile-pic(src="http://fillmurray.com/120/120")
    .author-bio-text
      p.author-bio-name Author Name
      p.author-bio-info Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam saepe ab aliquam. Illo consectetur, eaque consequatur atque quod impedit adipisci.
    .social-icons
      a(href="")
        p <i class="fa fa-facebook-square" aria-hidden="true"></i>
      a(href="")
        p <i class="fa fa-linkedin-square" aria-hidden="true"></i>
      a(href="")
        p <i class="fa fa-twitter-square" aria-hidden="true"></i>

  section.comments
     h3.section-heading Comments
     .comments__meta
       p <i class="fa fa-comment-o" aria-hidden="true"></i>&nbsp; <span>Comments:</span> 8
       span 
         | &nbsp; | &nbsp;
       p <i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; <span>Favorites:</span> 3
       span 
         | &nbsp; | &nbsp;
       p <i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; <span>Up votes:</span> 12

     // comment 1
     .comment__group
       .comment__author-image
         img.profile-pic(src="http://fillmurray.com/100/100")
       .comment
         .comment__author-name
           a(href="")
             h5 Comment Author
         .comment__text
           p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.
         .comment__text--meta
           a(href="")
             p <i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; 1
           a(href="")
             p <i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; 3
     // comment 1 reply
     .comment__group.comment__indented
       .comment__author-image
         img.profile-pic(src="http://fillmurray.com/100/100")
       .comment
         .comment__author-name
           a(href="")
             h5 Comment Author
         .comment__text
           p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.
           p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.
         .comment__text--meta
           a(href="")
             p <i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; 0
           a(href="")
             p <i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; 1
     // comment 2
     .comment__group
       .comment__author-image
         img.profile-pic(src="http://fillmurray.com/100/100")
       .comment
         .comment__author-name
           a(href="")
             h5 Comment Author
         .comment__text
           p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.
         .comment__text--meta
           a(href="")
             p <i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; 2
           a(href="")
             p <i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; 1

              
            
!

CSS

              
                $serif: 'Georgia', serif
$sans: 'Trebuchet MS', Trebuchet MS, sans-serif

body
  font-family: $serif
  color: #222
  font-size: 20px
  // padding: 20px
  position: relative
  
.main-article
  max-width: 800px
  margin: auto
  
h1
  font-weight: normal
  font-size: 3em
  text-transform: capitalize
  color: #444
  
h2
  font-weight: normal
  font-size: 2em
  
h3
  font-weight: normal
  font-size: 2em
  
p
  line-height: 1.5em
  
.lead
  font-style: italic
  font-size: 1.5em
  color: #888
  line-height: 1.3em
  margin: 1.5em 0
  
.byline
  font-size: .7em
  margin-bottom: 4em
  font-family: $sans
  text-transform: uppercase
  line-height: 1.7
  
  a
    color: #999
    
    &:hover
      color: #777
    

    
.section-heading
  border-bottom: 1px solid
  padding-bottom: 10px
  margin: 30px 0
  
  
.site-nav
  display: flex
  justify-content: space-between
  align-items: center
  flex-wrap: wrap
  background:
    color: #f9f9f9
  width: 100%
  margin-top: 0
  margin-bottom: 60px
  color: #444
  
  .site-title
    margin: 0
    font-size: 1.5em
    
  li:first-child 
    text-transform: uppercase
    // color: #777
    
  a
    color: #444
    text-decoration: none
    
    &:hover
      color: #777
    
@media screen and (min-width: 475px)
  .site-title
    margin: 0
    font-size: 2.5em
    padding-left: 20px

.main-nav
  
  font-size: .7em
  ul
    list-style: none
    padding: 0
    display: flex
    
    li
      margin: 0 7px
      
      &:first-child
        margin-left: 0

@media screen and (min-width: 475px)
  .main-nav
    font-size: 1em
    padding: 0 20px
    ul
      li
        margin: 0 10px

        
@media screen and (max-width: 475px)
  .main-article
    h1
      font-size: 2em

    h2
      font-size: 1.2em
    
  
// circled, bordered profile picture  
.profile-pic
  border-radius: 50%
  margin-right: 20px
  padding: 5px
  border: 1px solid #ddd
  margin-bottom: 15px
  
@media screen and (min-width: 475px)
  .profile-pic
    margin-bottom: 0
    
  
// author section

.author-bio
  display: flex
  flex-direction: column
  align-items: center
  background:
    color: #f9f9f9
  padding: 15px 10px
  border: 1px solid #eee
  margin: 60px 0 80px
  font-family: $sans
  text-align: center
  

@media screen and (min-width: 475px)
  .author-bio
    flex-direction: row
    text-align: left
    
.author-bio-text
  color: #777
  flex: 2
  font-size: .8em
  
  p
    padding: 0 0 10px
    margin: 0
    
  .author-bio-name
    font-weight: bold

    
.social-icons
  display: flex
  font-size: 1.5em
  
  p 
    padding: 10px 20px
    margin: 0
    
  a
    color: #999
    
    &:hover
      color: #777
    
@media screen and (min-width: 475px)
  .social-icons
    flex-direction: column
    flex: 0 1 50px
    border-left: 1px solid #ddd
    margin-left: 10px
    font-size: inherit

    p 
      padding: 10px
      margin: 0
      text-align: center

    a
      color: #999

      &:hover
        color: #777
    
    
// comments section

// comments meta information

.comments__meta
  display: flex
  justify-content: space-around
  align-items: flex-start
  font-family: $sans
  font-size: .8em
  color: #999
  
  span
    display: none

  p
    margin: 0

@media screen and (min-width: 475px)
  .comments__meta
    justify-content: flex-start
    
    span
      display: inline-block

      
.comment__group
  font-size: .9em
  margin: 60px 0
  color: #777
  font-weight: normal
  text-align: center
      
@media screen and (min-width: 475px)
  .comment__group
    display: flex
    text-align: left
  
 
.comment__author-name
  
  a
    color: #444
    text-decoration: none
    
    &:hover
      text-decoration: underline
    
  h5
    padding: 0
    margin: 0
    font-weight: normal
    font-size: 1em
      
.comment__text
  margin-top: 10px
  font-size: .9em
  p
    margin: 0
    padding: 0
    line-height: 1.4
    word-spacing: 1px
    margin-bottom: 1em
    
    &:last-child
      margin-bottom: 0

@media screen and (min-width: 475px)
  .comment__text
    text-align: left
    
.comment__text--meta
  display: flex
  justify-content: center
  align-items: center
  font-size: .8em
  font-family: $sans
  
  p
    margin-right: 15px
      
  a
    color: #999
    text-decoration: none
    
    &:hover
      color: #444
    
@media screen and (min-width: 475px)
  .comment__text--meta
    justify-content: flex-start
    
@media screen and (min-width: 475px)    
  .comment__indented
    margin-left: 7%
    margin-top: -10px
  

              
            
!

JS

              
                
              
            
!
999px

Console