Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                    <!--
    Follow me on Twitter - @imperativeideas

    One of my favorite things to do with UX research is to examine traditional media, which hasn't translated well to the web. Of all the written forms, the display of poetry on the web has had the hardest time adapting. Let's see what we can do to improve the reader's experience.

    In this demo I have used several CSS/JS techniques to aid the reader. For starters, I'm using the Zurb Foundation responsive CSS framework, which allows me to easily adapt teh page to mobile with visibility classes. I've used a basic nth-of-type selector to number every fifth line after the first. Because my astigmatism sometimes makes reading long text blocks tricky, I've created a CSS gradient-based line hi-light on hover. Clicking a line adds a place marker. Finally, because poems like T.S. Eliot's "The Waste Land" are so darn long, I've added a jQuery radial progress wheel in the upper-right hand corner and tied it to the scroll height through the JavaScript.

    There's two pieces that I didn't do in the interest of time. At 80% complete, I'd normally add a "next post" layer fly-in from the bottom right. Neither did I add the OL index number on the click-mark text.

    In a PHP implementation, I'd also allow the user to save line bookmarks (click-marsk), along with notes, to their user ID. Now we're ahead of ourselves though.
-->

<div id="wrap">  
  <div class="row entry-content">
    <header class="large-12 columns">
      <h1>Ulysses</h1>
      <p>by <a href="http://en.wikipedia.org/wiki/Alfred,_Lord_Tennyson" target="_blank" title="Research Lord Alfred Tennyson on Wikipedia">Alfred, Lord Tennyson</a> (1809–1892)</p>
  </header>
  
  <section class="large-12 columns intro">
      <p>In this poem, written in 1833 and revised for publication in 1842, Tennyson reworks the figure of Ulysses by drawing on the ancient hero of Homer’s Odyssey (“Ulysses” is the Roman form of the Greek “Odysseus”) and the medieval hero of Dante’s Inferno. Homer’s Ulysses, as described in Scroll XI of the Odyssey, learns from a prophecy that he will take a final sea voyage after killing the suitors of his wife Penelope. <br />-- <a href="http://www.sparknotes.com/poetry/tennyson/section4.rhtml" target="_blank">SparkNotes</a></p>
  </section>
  <!-- We'll hide the image element on small screens -->
  <aside class="illustration large-4 columns hide-for-medium-down">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/claude_lorrain_embarcation_std.jpg" alt="Claude Lorrain - Embarcation of the Queen Sheba" />
      <div class="followme">
          <a href="https://twitter.com/ImperativeIdeas" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @ImperativeIdeas</a>
          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </div>
  </aside>
  <!-- We're leaving ourselves a full column of wiggle room, since I've modified the padding a bit on the page elements -->
  
  <section class="poem large-7 columns">
    <!-- An ordered list allows for the numbering of stanzas -->
    <ol>
        <li class="first">It little profits that an idle king,</li>
        <li>By this still hearth, among these barren crags,</li>
        <li class="stick">Match'd with an aged wife, I mete and dole</li>
        <li>Unequal laws unto a savage race,</li>
        <li>That hoard, and sleep, and feed, and know not me.</li>
        <li>I cannot rest from travel: I will drink</li>
        <li>Life to the lees: All times I have enjoy'd</li>
        <li>Greatly, have suffer'd greatly, both with those</li>
        <li>That loved me, and alone, on shore, and when</li>
        <li>Thro' scudding drifts the rainy Hyades</li>
        <li>Vext the dim sea: I am become a name;</li>
        <li>For always roaming with a hungry heart</li>
        <li>Much have I seen and known; cities of men</li>
        <li>And manners, climates, councils, governments,</li>
        <li>Myself not least, but honour'd of them all;</li>
        <li>And drunk delight of battle with my peers,</li>
        <li>Far on the ringing plains of windy Troy.</li>
        <li>I am a part of all that I have met;</li>
        <li>Yet all experience is an arch wherethro'</li>
        <li>Gleams that untravell'd world whose margin fades</li>
        <li>Forever and forever when I move.</li>
        <li>How dull it is to pause, to make an end,</li>
        <li>To rust unburnish'd, not to shine in use!</li>
        <li>As tho' to breathe were life! Life piled on life</li>
        <li>Were all too little, and of one to me</li>
        <li>Little remains: but every hour is saved</li>
        <li>From that eternal silence, something more,</li>
        <li>A bringer of new things; and vile it were</li>
        <li>For some three suns to store and hoard myself,</li>
        <li>And this gray spirit yearning in desire</li>
        <li>To follow knowledge like a sinking star,</li>
        <li>Beyond the utmost bound of human thought.</li>

        <li class="first">This is my son, mine own Telemachus,</li>
        <li>To whom I leave the sceptre and the isle,—</li>
        <li>Well-loved of me, discerning to fulfil</li>
        <li>This labour, by slow prudence to make mild</li>
        <li>A rugged people, and thro' soft degrees</li>
        <li>Subdue them to the useful and the good.</li>
        <li>Most blameless is he, centred in the sphere</li>
        <li>Of common duties, decent not to fail</li>
        <li>In offices of tenderness, and pay</li>
        <li>Meet adoration to my household gods,</li>
        <li>When I am gone. He works his work, I mine.</li>

        <li class="first">There lies the port; the vessel puffs her sail:</li>
        <li>There gloom the dark, broad seas. My mariners,</li>
        <li>Souls that have toil'd, and wrought, and thought with me—</li>
        <li>That ever with a frolic welcome took</li>
        <li>The thunder and the sunshine, and opposed</li>
        <li>Free hearts, free foreheads—you and I are old;</li>
        <li>Old age hath yet his honour and his toil;</li>
        <li>Death closes all: but something ere the end,</li>
        <li>Some work of noble note, may yet be done,</li>
        <li>Not unbecoming men that strove with Gods.</li>
        <li>The lights begin to twinkle from the rocks:</li>
        <li>The long day wanes: the slow moon climbs: the deep</li>
        <li>Moans round with many voices. Come, my friends,</li>
        <li>'Tis not too late to seek a newer world.</li>
        <li>Push off, and sitting well in order smite</li>
        <li>The sounding furrows; for my purpose holds</li>
        <li>To sail beyond the sunset, and the baths</li>
        <li>Of all the western stars, until I die.</li>
        <li>It may be that the gulfs will wash us down:</li>
        <li>It may be we shall touch the Happy Isles,</li>
        <li>And see the great Achilles, whom we knew.</li>
        <li>Tho' much is taken, much abides; and tho'</li>
        <li>We are not now that strength which in old days</li>
        <li>Moved earth and heaven, that which we are, we are;</li>
        <li>One equal temper of heroic hearts,</li>
        <li>Made weak by time and fate, but strong in will</li>
        <li>To strive, to seek, to find, and not to yield.</li>
    </ol>
</section>
<img src="http://imperativeideas.com/ga/clear.png?id=pen-poem" />
</div>
</div>
<!-- The progress bar is rendered using HTML5 canvas and jQuery Knob -->
<div class="progress-bar hide-for-small">
  <input type="text" class="dial"  />
</div>

<!-- Non functional social media buttons -->
<div class="socialsider socialsider_left_top socialsider_fixed socialsider_bgdark_white socialsider_colorize socialsider_radius socialsider_spacer socialsider_opacity socialsider_hidden" id="socialsider">
    <ul>
        <li>
            <a data-socialsider="facebook" href="#" title="Facebook"></a>
        </li>

        <li>
            <a data-socialsider="pinterest" href="#" title="Pinterest"></a>
        </li>

        <li>
            <a data-socialsider="vimeo" href="#" title="Vimeo"></a>
        </li>

        <li>
            <a data-socialsider="lastfm" href="#" title="Last.fm"></a>
        </li>

        <li>
            <a data-socialsider="youtube" href="#" title="YouTube"></a>
        </li>

        <li>
            <a data-socialsider="dailymotion" href="#" title=
            "Dailymotion"></a>
        </li>

        <li>
            <a data-socialsider="envato" href="#" title="Envato"></a>
        </li>
    </ul>
</div>
              
            
!

CSS

              
                @import "compass/css3";

  /*!
   * I'm not going to go into a ton of detail on the SCSS portion.
   * If you have questions, ask them in the comments area and I'll
   * ba happy to answer. Important bits are called out though
   */

   // Fetch the document fonts from Google
   @import url(https://fonts.googleapis.com/css?family=family=Noto+Serif:400,700,400italic,700italic|Cutive);

   // Set palette colors as needed
   $text-color: rgb(68,60,43);
   $hi-color: rgba(188, 189, 186,.4);
   $link-color: rgb(186, 0, 0);

   // Set some breakpoints for inline media queries
   @mixin breakpoint($point) {
    @if $point == phone {
      @media screen and (max-width: 600px) { @content; }
    }
    @elseif $point == noedge {
      @media screen and (max-width: 1070px) { @content; }
    }
  }

  // Set hi-light color to a better offset than robin's egg blue
  ::selection {
    background: rgb(253,195,112);
    color: rgb(30,30,30);
  }
  ::-moz-selection {
    background: rgb(253,195,112);
    color: rgb(30,30,30);
  }

  // Image hi-lighting should be transparent though!
  img::selection {
    background: transparent;
  }
  img::-moz-selection {
    background: transparent;
  }

  // Set our body background attributes and default text color
  body {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/old-paper.jpg') center center;
    background-attachment: fixed;
    background-size: cover;
    color: $text-color;
    a {
      color: $link-color;
      &:hover {
        color: $link-color;
        text-decoration: underline;
      }
    }
  }

  // Begin the main content DIV
  .entry-content {
    padding: 20px 0;
    background-color: rgba(255,255,255,.5);
    @include box-shadow(rgba(0, 0, 0, .25) 3px 0px 7px -1px, rgba(0, 0, 0, .25) -3px 0px 7px -1px);
    header {
      padding-bottom: 20px;
      padding-left: 20px;
      h1, p {
        display: inline-block;
        font-family: 'Cutive', serif;
      }
      h1 {
        margin-right: .3em;
      }
    }
    
    section.intro {
      p {
        margin: 0;
        text-align: justify;
      }
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid lighten($text-color, 40%);
    }
    
    section.poem {
      float: left !important;
      margin-left: 15px;
      ol {
        li {
          padding-left: 3px;
          list-style-type: none;
          font-family: 'Noto Serif', serif;
          font-size: 18px;
          // On the first item, then every 5th item, make the number visible
          &:first-child,
          &:nth-of-type(5n) {
            list-style-type: decimal;
          }
          // Create space above each stanza
          &.first {
            margin-top: 1em;
            // But not on the first line!
            &:first-of-type {
              margin-top: 0;
            }
          }
          // Create a hi-light of each line on mouseover for easier reading
          &:hover {
            cursor: pointer;
            @include border-radius(5px);
            @include background-image(linear-gradient(
              left,  
              rgba(254,255,255,0.7) 0%,
              rgba(234,234,234,0.7) 95%,
              rgba(131, 154, 185,1) 96%
              ));

          }
          // Define the click-mark sticky line behavior here
          &.stick {
            border-bottom: 1px solid $text-color;
            line-height: 26px;
            padding-top: 1px;
            // This gets jumbled on small screens, remove it
            // Aternatively, turn it into a hi-light and touch-enable the app
            @include breakpoint(phone) {
              display: none;
            }
            &:after {
              content: "click-marked";
              float: right;
              border-right: 3px solid $text-color;
              padding: 0 5px;
              font-family: Arial, sans-serif;
              text-transform: uppercase;
              font-size: 10px;
              line-height: 26px;
              color: rgb(145, 110, 48);
              background: rgba(255, 255, 255, 0.4);
              -webkit-border-top-left-radius: 4px;
              -moz-border-radius-topleft: 4px;
              border-top-left-radius: 4px;
              // More inline media queries with Compass
              @include breakpoint(phone) {
                display: none;
              }
            }
          }
          
        }
      }
    }
    aside.illustration {
      position: relative;
      padding: 0;
      margin-left:25px;
      img {
        width: 100%;
      }
      // Add a vignette to the image
      &:after {
        -moz-box-shadow: inset 0 0 40px rgba(0,0,0,.85);
        -webkit-box-shadow: inset 0 0 40px rgba(0,0,0,.85);
        box-shadow: inset 0 0 40px rgba(0,0,0,.85);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        content: "";
      }
    }
  }

  // Set up the floating progress bar
  .progress-bar {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(199, 194, 185, 0.63);
    @include border-radius(5px);
    position: fixed;
    top: 24px;
    right: 15px;
    text-align: right;
    padding: 5px 5px 0 0;
    &:after {
      content: "progress";
      position: absolute;
      top:60px;
      left:0;
      padding: 2px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 8px;
      text-transform: uppercase;
      width: 100%;
      text-align: center;
      background: rgba(255,255,255,.6);
      @include border-radius(3px);
      border: 1px solid rgba(199, 194, 185, 0.63);
    }
  }

  .followme {
    display: none;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -50px;
  }

@include breakpoint(noedge) {
  .socialsider {display: none;}
}

              
            
!

JS

              
                  jQuery(function($) { // Document Ready
    
    // When a line is clicked, we want to drop/remove a place marker
    $('li').click(function() {
      $(this).toggleClass('stick'); // the rest of this is in the CSS
    });
    
    // Declare a variable for our progress dial
    var thedial = $(".dial");
    
    // Initialize the progress dial
    thedial.knob({
      'min' : 0,
      'max' : 100,
      'width' : 50,
      'height' : 50,
      'fgColor' : 'rgb(77, 91, 109)',
      'skin' : 'tron',
      'thickness' : .2,
      'displayInput' : false,
      'displayPreview' : false,
      'readOnly' : true
    });
    
    // Get the window position and set it to a variale
    $(window).scroll(function () {
      var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();
      scrollPercent = (s / (d-c)) * 100;
      var position = scrollPercent;

      // Bind the window position to the progress dial
      $('.dial').val(position).trigger('change');

    });
  });
              
            
!
999px

Console