123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!--link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" /-->

<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Playfair+Display:700,400,900,400italic,700italic,900italic|Merriweather:400,300,700,900,300italic,400italic,700italic,900italic|Anonymous+Pro:400,700,400italic,700italic|Roboto:400,700,300,300italic,400italic,500,500italic,700italic,900,900italic|Open+Sans:400,600,700,800,300italic,400italic,600italic,700italic,800italic,300' />
<link rel='stylesheet' type='text/css' href='https://cdn.rawgit.com/google/code-prettify/master/styles/desert.css' />
<link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' />

<div id="columns">
  
  <!-- The "entry" div is the main format -->
  <div id="entry">   
    <div id="image"> <!-- Image -->
      <img src="http://www.zemwallpapers.com/wp-content/uploads/2015/08/Free-Stock-Photography-4.jpg" />
    </div>
    <div id="title">
      <h1>Don’t Lose Track of High Performers Who Take a Hiatus</h1>
      <div class="entry-info">
        <span class="topic">Managing Yourself</span>
        <span class="byline">by Sverrir Sigmundarson</span>
      </div>
    </div>
    <div id="summary"> <!-- Article summary -->
      Why you should track employees’ feelings over time.
    </div>
    <div id="actions"> <!-- Action bar --> 
      <ul>
        <li><a id="BtnShare" href="#" title="Share"><i class="fa fa-share-alt"></i><span>Share</span></a></li>
        <li><a id="BtnSave" title="Save to Pocket" href="https://getpocket.com/save" data-lang="en" data-save-url="{Permalink}"  data-pocket-count="none" data-pocket-align="left"><i class="fa fa-get-pocket"></i><span>Save</span></a></li>
        <li><time>29 November 2013</time></li>
      </ul>
    </div>    
  </div>
  
  
  <!--  Ignore everything below,
        this rest of this code is just to add filler contents during development to test different layout flows -->
  <div id="entry">   
    <div id="image"> <!-- Image -->
      <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA4LzIxLzcxL0FwcGxlU3RvY2tJLjA2NDg2LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/9bb44b37/858/Apple-Stock-Is-Up-22.jpg" />
    </div>
    <div id="title">
      <h1>Your Algorithms Are Not Safe from Hackers</h1>
      <div class="entry-info">
        <span class="topic">Technology</span>
        <span class="byline">by Sverrir Sigmundarson</span>
      </div>
    </div>
    <div id="summary"> <!-- Article summary -->
      Why you should track employees’ feelings over time.conferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career breakconferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career breakconferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career breakconferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career breakconferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career breakconferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career breakconferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career breakconferences–there’s one source they should never overlook
    </div>
    <div id="actions"> <!-- Action bar --> 
      <ul>
        <li><a id="BtnShare" href="#" title="Share"><i class="fa fa-share-alt"></i><span>Share</span></a></li>
        <li><a id="BtnSave" title="Save to Pocket" href="https://getpocket.com/save" data-lang="en" data-save-url="{Permalink}"  data-pocket-count="none" data-pocket-align="left"><i class="fa fa-get-pocket"></i><span>Save</span></a></li>
        <li><time>12 March 2013</time></li>
      </ul>
    </div>    
  </div>
  
  <div id="entry" class="highlight">   
    <div id="image"> <!-- Image -->
      <img src="http://www.raindance.org/wp-content/uploads/Emotion.jpg" />
    </div>
    <div id="title">
      <h1>To Stay Relevant, Professional Associations Must Rebrand</h1>
      <div class="entry-info">
        <span class="topic">Xbox 360 Controllers</span>
        <span class="byline">by Sverrir Sigmundarson</span>
      </div>
    </div>
    <div id="summary"> <!-- Article summary -->
      Why you should track employees’ feelings over time. conferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career break
    </div>
    <div id="actions"> <!-- Action bar --> 
      <ul>
        <li><a id="BtnShare" href="#" title="Share"><i class="fa fa-share-alt"></i><span>Share</span></a></li>
        <li><a id="BtnSave" title="Save to Pocket" href="https://getpocket.com/save" data-lang="en" data-save-url="{Permalink}"  data-pocket-count="none" data-pocket-align="left"><i class="fa fa-get-pocket"></i><span>Save</span></a></li>
        <li><time>5 August 2013</time></li>
      </ul>
    </div>    
  </div>
  
  <div id="entry">   
    <div id="image"> <!-- Image -->
      <img src="http://theculinarycook.com/wp-content/uploads/2012/04/beef-stock.jpg" />
    </div>
    <div id="title">
      <h1>When You Should Worry About Failure, and When You Shouldn’t</h1>
      <div class="entry-info">
        <span class="topic">Managing Yourself</span>
        <span class="byline">by Sverrir Sigmundarson</span>
      </div>
    </div>
    <div id="summary"> <!-- Article summary -->
      While there are multiple sources employers can use to locate returnees–university alumni career services offices, referrals from current employees, and return-to-work conferences–there’s one source they should never overlook: Their own “regrettable losses,” meaning high performers who’ve left to go on career break.
    </div>
    <div id="actions"> <!-- Action bar --> 
      <ul>
        <li><a id="BtnShare" href="#" title="Share"><i class="fa fa-share-alt"></i><span>Share</span></a></li>
        <li><a id="BtnSave" title="Save to Pocket" href="https://getpocket.com/save" data-lang="en" data-save-url="{Permalink}"  data-pocket-count="none" data-pocket-align="left"><i class="fa fa-get-pocket"></i><span>Save</span></a></li>
        <li><time>1 December 2013</time></li>
      </ul>
    </div>    
  </div>
  
</div>
            
          
!
            
              @import "compass/reset";
@import "compass";
@import "compass/css3";

$font_text: 'Merriweather', serif; // The closest to Guardian font I found
$font_title: 'Open Sans', sans-serif; //'Playfair Display', serif; // Playfair doesn't work well in smaller sizes this is the best smaller one closest to the National font I found
$font_clear: 'Roboto', sans-serif; // Used for clear display of numbers (e.g. dates) and clickable "button" type elements

$color_highlight: #c82502; // Highlight color in the template, this case dark red
$color_faded: #888;  // Un-emphasis color, grayish, e.g. used for date and button labels 

// Controls responive design constraints for modern mobile devices
// See: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
// And: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
$media_mobile_phone_width: 500px;
$media_mobile_tablet_width: 800px;
$media_display_ultra_wide: 1800px;

body {
  //font: font-style font-variant font-weight font-size/line-height font-family
  
}

// Sets up a multi column arrangement for the page, degrades to a single column on smallest devices
#columns {
  font: normal normal 400 1em $font_text;
  @include column-count(2);
  //@include column-gap(10em);
  
  // Constraints for ultra-wide devices
  @media (min-width: $media_display_ultra_wide) {
     @include column-count(3);
  }
  
  // Constraints for tablet devices
  @media (max-width: $media_mobile_tablet_width) {
   @include column-count(1);
  }
  
  // Constraints for phone devices
  @media (max-width: $media_mobile_phone_width) {
   @include column-count(1);
  }  
}

#entry {
  display: block; // Ensure that the div fills the parent space
  width: auto!important; // 'auto' is important, otherwise the div elements will be to large and clipped by the column layout
  min-width: 360px;
  padding: .5em;
  overflow: hidden; // Necessary to ensure that the associated images don't overlap ajacent posts
  
  // Avoid entries breaking between columns within an entry
  // from: http://stackoverflow.com/a/7785711/779521
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  -moz-column-break-inside:avoid;     /* Theoretically FF 20+ */
  -moz-page-break-inside:avoid;       /* Theoretically FF 20+ */
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column;         /* IE 11 */
    
  // class="" for entry div, creates a highlighted version of the box
  &.highlight
  {
    background: rgba(0,0,0,.85);
    color: #fff;
    padding: 2em;
    
    h1 { color: #fff; }
  }
  
  #image {
    float: right;
    display: inline-block;
    margin-top: .5em;
    margin-left: .5em;
    
    img {
      max-width: 15em;
      min-width: 12em;
    }
  }
  
  #title{
    h1 {
      font: normal normal 800 1.5em/1em $font_title;
      letter-spacing: -0.06em;
      margin-bottom: 0.25em;
    }    
    .topic{
      font: normal normal 900 .8em $font_text;
      text-transform: uppercase;
      color: $color_highlight;
      margin-bottom: 1em;
    }
    .byline {
      font: normal normal 800 .8em $font_text;
      color: $color_faded;
      margin-bottom: 1em;
      letter-spacing: -0.04em;
      display: inline-block;
    }
  }
  
  #summary
  {
    font: normal normal 400 .9em/1.5em $font_text;
    margin-right: 2em;
  }
  
  #actions{
    font-family: $font_clear;
    padding: 0.5em;
    margin: 0em;
    margin-bottom: 3em; // Used for spacing between entries, doing this works best when using flowing column layouts
    
    a {
      font-size: 0.8em;
      text-transform: uppercase;
      text-decoration:none;
      @include transition(color 300ms ease-out);
      line-height: inherit;
      color: $color_faded;

      &:hover { color: black; }
    }
      // The icons
    .fa{
      font-size: 1.3em;
      color: $color_highlight;
    }

    li{
      vertical-align: middle;
      display:inline-block;
      //padding: 0.2em .5em;
      padding-right: 1em;
      text-align: center!important;

      // Breaks the text to a new line
      span{ 
        margin-left: 0.5em;
      }
      
      time
      {
        font-size: 0.8em;
        text-transform: uppercase;
        color: #239caa;
      }
    }
  }
  
  // Constraints for tablet devices
  @media (max-width: $media_mobile_tablet_width) {
    #title { h1{font-size: 1.3em;}
            .topic, .byline{font-size: .7em; margin-bottom: .6em;} }
    #summary { font-size: .9em; }
    #actions{ margin-bottom: 2em;  padding-top: .2em;
              li{ font-size: .9em; } 
              .fa{ font-size: 1.2em; } } 
    #image { img { max-width: 10em; min-width: 8em; } }
  }

  // Constraints for phone devices
  @media (max-width: $media_mobile_phone_width) {
    &.highlight{ padding: 0.5em; }
    #title { h1{ font-size: 1em; margin-bottom: .1em;}
            .topic, .byline{font-size: .6em; margin-bottom: .5em;} }
    #summary{ font-size: .7em; }
    #actions{ margin-bottom: 1em; padding-top: 0em;
              li{ font-size: .9em; padding-right: .7em; span{ display:none;} } 
              .fa{ font-size: 1.1em; } }  
    #image { img { max-width: 7em; min-width: 4em; } }
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console