A Pen by jakob-e.

A-Pen-by-jakob-e.markdown

A Pen by jakob-e

A Pen by jakob-e on CodePen.

License.

index.html

<article class="article">
    <header class="article-header">
        	<h1>Scale & Ryhthm</h1>

        <div class="byline">by Lorem Ipsum  
            <time datetime="2013-06-10">October 6'th</time>
        </div>
    </header>
    <p class="intro">This is where a post about hiking trails would live. I'm not going to write an article about hiking trails. That would take a lot of time.</p>
    <p><a href="#">This is a link, possibly to an external resource.</a> In a post about hiking trails, there would probably be talk about how to get to featured trails, what to pack, where to camp, and so on and so forth. I don't have any expertise in this subject matter so I'm not going to attempt to write about it.</p>
  <img src="http://farm4.staticflickr.com/3128/2304536121_76a92f4eef_b.jpg" alt="Blackcomb" />
    <p>If I were to write about it, I'd probably do some research on the topic first. But even then, I probably Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
    <blockquote>This trail is amazing. I've never seen anything like it.</blockquote>
    <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
    <div class="text">
        <ul>
            <li>This is a list item in an unordered list</li>
            <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
            <li>Lists can be nested inside of each other
                <ul>
                    <li>This is a nested list item</li>
                    <li>This is another nested list item in an unordered list</li>
                </ul>
            </li>
            <li>This is the last list item</li>
        </ul>
    </div>
    <div class="text">
        <ol>
            <li>This is a list item in an ordered list</li>
            <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
            <li>Lists can be nested inside of each other
                <ol>
                    <li>This is a nested list item</li>
                    <li>This is another nested list item in an ordered list</li>
                </ol>
            </li>
            <li>This is the last list item</li>
        </ol>
    </div>
    <p>Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.</p>
    <blockquote class="pullquote">
        <p>A pull quote is a quotation or excerpt from an article 
           A pull quote is a quotation or excerpt from an article
           A pull quote is a quotation or excerpt from an article
           A pull quote is a quotation or excerpt from an article
           A pull quote is a quotation or excerpt from an article          
        </p>
        <p>A pull quote is a quotation or excerpt from an article</p>      
    </blockquote>
    <p>Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>
      <h2>Blackcomb</h2> 
<p>Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>      
</article>

script.js

// Change to aspect ratio focal crop 
$(window).on('resize',function(){
  var $img=$('img');
  // height in pixels
  var h=$img.height()
  var t=Math.ceil(h/24)*24+24;
  
  $img.css({'margin-bottom':t-h})
})

style.scss

@import "compass";
// ==================================================================== 
// Config defaults
$base-font-scale:100% !default;// HTML font size 100% = 16px 
$base-font-size:16    !default;   // Ideal font size in pixels
$sign-font-size:14    !default;   // Significant font size in pixels
$base-line-height:24  !default; // Base line in pixels
$base-font-unit:1rem  !default; // TODO - define default output unit


// Note!
// base-font-size and basefont-scale are separated 
// to allow scaling without having to change base
// and sign font size.


// ==================================================================== 
// Unit Conversion
// ==================================================================== 
// Functions:
// --------------------------------------------------------------------  
// 
//  NUMBER:
//  
//  isNaN($value)  - returns true or false if type-of($value)==number
// 
//  number($value) - returns a unitless number.
// 
//  int($value)    - returns a unitless integer. 
// 
//  uint($value)   - returns a unitless unsigned integer. 
//
// 
//  UNITS: 
// 
//  px($value)     - converts a number or unit to px.
//                     
//  em($args...)   - converts a number or unit to em. 
// 
//                    To adjust for em compounds you can add
//                    aditional arguments to calculate the 
//                    visual em size. em(visual-size,....)
//                               
//                    Example:  em(2, 2em, 2em) => 0.5em
//
//  rem($value)    - converts a number or unit to rem. 
// 
//  pt($value)     - converts a number or unit to pt. 
// 
//  pc($value)     - converts a number or unit to pc. 
// 
//  in($value)     - converts a number or unit to in. 
// 
//  cm($value)     - converts a number or unit to cm. 
//
// 
// PERCENTAGE:
// 
//  pct($value,$base:100)   - similar to precentage, but takes a base
//                            value (100%) to be used for calculating 
//                            the precent value returned
//                            
//                            Example:  pct(1,100)     => 1%   
//                                      pct(1,1)       => 100%
//                                      pct(50,250)    => 20%
//                                      pct(10px,16px) => 62.5%
//                                      pct(1em,16px)  => 100%
//   
// ANGLE:
// 
//  deg($value)     - converts a number or angle unit to deg.  
// 
//  grad($value)    - converts a number or angle unit to grad.
//
//  turn($value)    - converts a number or angle unit to turn.
//
//  rad($value)     - converts a number or angle unit to rad.  
// 
// 
// ==================================================================== 
// Unit Conversion Table
// http://www.translatorscafe.com/cafe/units-converter/typography/
//      1px = 0.0625pc;
//      1px = 0.75pt;  
//      1px = 0.010416667in;    
//      1px = 0.264583333mm;
//      1px = 0.026458333cm;
//
// Angles
// http://www.w3.org/TR/css3-values/#angles
//      Full circle = 360deg = 400grad =  1turn = 2πrad
//      1deg =  1.111111111grad  (400/360)
//      1deg =  0.002777778turn  (1/360)
//      1deg =  0.017453293rad   (180/π) 
// 
// ====================================================================
// 
// Base font scale in percent (http://pxtoem.com/)
// - used when calculating em and rem
$base-font-scale:100% !default;

// Number 
@function isNaN($val){  @return type-of($val)!=number; }
@function number($val){ @return if(isNaN($val), null, if(unitless($val), $val, $val/($val*0+1))); }
@function int($val){ 
  @if(isNaN($val)){@return null;}
$val:number($val); 
@return if($val<0,ceil($val),floor($val)); 
}
@function uint($val){ @return if(isNaN($val), null, abs(int($val))); }   
// Aliases  
@function num($val){@return number($val);}
@function parseFloat($val){@return number($val);} // Really a math thing
@function parseInt($val){@return int($val);}      // Really a math thing

// Conversion using pixel as base
@function px($val){
  @if(isNaN($val)){@return null;}
$u:unit($val);
$u:if($u==px,1,
    if($u==em,0.0625 * 100/number($base-font-scale),
    if($u==rem,0.0625 * 100/number($base-font-scale),   
    if($u==pt,0.75, 
      if($u==pc,0.0625,
        if($u==in,0.010416667,
          if($u==mm,0.264583333, 
            if($u==cm,0.026458333, 
              1))))))));
@return number($val) / $u * 1px;
}
@function em($args...){
  $val:nth($args,1);
  @if(isNaN($val)){@return null; }
$em:if(unitless($val),$val * 1em,number(px($val)) * 0.0625em * 100/number($base-font-scale));
@for $i from 2 through length($args){$em:$em / number(em(nth($args,$i)))}
@return $em;
}
@function rem($val){ @return if(isNaN($val), null, if(unitless($val), $val * 1rem, number(px($val)) * 0.0625rem * 100/number($base-font-scale) )); }
@function pt($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1pt,  number(px($val)) * 0.75pt)); }
@function pc($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1pc,  number(px($val)) * 0.0625pc)); }
@function in($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1in,  number(px($val)) * 0.010416667in)); }
@function mm($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1mm,  number(px($val)) * 0.264583333mm)); }
@function cm($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1cm,  number(px($val)) * 0.026458333cm)); }
@function pct($val,$base:1){ @return if(isNaN($val), null, percentage(number(px($val))/number(px($base)))); }

// Angle conversion using deg as base
@function deg($val){
  @if(isNaN($val)){@return null;}
$u:unit($val);
$u:if($u==deg ,1,
    if($u==grad,1.111111111,
      if($u==turn,0.002777778, 
        if($u==rad, 0.017453293, 
          1))));
@return number($val) / $u * 1deg;
}
@function grad($val){ @return if(isNaN($val),null,if(unitless($val),$val * 1grad,number(deg($val)) * 1.11111111grad)); } 
@function turn($val){ @return if(isNaN($val),null,if(unitless($val),$val * 1turn,number(deg($val)) * 0.002777778turn)); } 
@function rad($val) { @return if(isNaN($val),null,if(unitless($val),$val * 1rad ,number(deg($val)) * 0.017453293rad)); }




//===========================
// Modular Scale 
// based on Tim Browns - ModularScale.com
// 
// Ratios:
$MS_MINOR_SECOND:  1.067;
$MS_MAJOR_SECOND:  1.125;
$MS_MINOR_THIRD:   1.200;
$MS_MAJOR_THIRD:   1.250;
$MS_PERFECT_FOURTH:1.333;
$MS_PERFECT_FIFTH: 1.500;
$MS_MINOR_SIXTH:   1.600;
$MS_MAJOR_SIXTH:   1.667;
$MS_MINOR_SEVENTH: 1.778;
$MS_MAJOR_SEVENTH: 1.875;
$MS_OCTAVE:        2.000;
$MS_MAJOR_TENTH:   2.500;
$MS_MAJOR_ELEVENTH:2.667;
$MS_MAJOR_TWELFTH: 3.000;
$MS_DOUBLE_OCTAVE: 4.000;
$MS_GOLDEN_RATIO:  1.618;
$MS_ARGUMENTED_FOURTH:1.414;
$MS_DEMINISHED_FIFTH:$MS_ARGUMENTED_FOURTH;

// Create scales
$__modular-scales:();
@mixin ModularScale($scale,$base-font-size:16,$sign-font-size:14){

  // Maybe add conversion of units before 
  
  $list:();
  $scale:1/$scale;  
  $b:$base-font-size;
  $s:$sign-font-size;
  // $p:$b; @while($p < 2560){ $list:append($list,round($p/$b*1000)/1000); $p:$p/$scale; }  
  // $p:$b; @while($p >=1){    $list:append($list,round($p/$b*1000)/1000); $p:$p*$scale; }
  // $p:$s; @while($p < 2560){ $list:append($list,round($p/$b*1000)/1000); $p:$p/$scale; }  
  // $p:$s; @while($p >=1){    $list:append($list,round($p/$b*1000)/1000); $p:$p*$scale; }

  $p:$b; @while($p < 2560){ $list:append($list, $p/$b); $p:$p/$scale; }  
  $p:$b; @while($p >=1){    $list:append($list, $p/$b); $p:$p*$scale; }
  $p:$s; @while($p < 2560){ $list:append($list, $p/$b); $p:$p/$scale; }  
  $p:$s; @while($p >=1){    $list:append($list, $p/$b); $p:$p*$scale; }
  $ms:();
  $temp:$list;
  $min:0;
  @for $i from 1 through length($list){
    @if(length($temp)>0){ 
      $min:min($temp...);   // Find lowest value
      $ms:append($ms,$min); // Add lowest value
      $temp:(); // Clear temp for next comparison
    }
    // Re-populate temp ( > removes dublicate entries)
    @for $k from 1 through length($list){
      @if(nth($list,$k) > $min){ $temp:append($temp,nth($list, $k)); }
    }
  }
  $__modular-scales:$ms;
  /**
   * Scales list:
   * #{$ms};
   */
}
@function ms($size){
    // Maybe add base-font argument to allow 
    // targeting base or sign scale 
    $index:index($__modular-scales,1) + $size;
    @return rem(nth($__modular-scales,$index));
}
@function bl($lines,$size:null){
  @if($size==null){
    @return rem(($base-line-height/$base-font-size) * $lines)
  } @else {
    $lines:$lines+0.025; 
    // Fit pixels rounding - look into this
    // Maybe move rounding to scale
    @return (($base-line-height/$base-font-size) * $lines) /number(ms($size));
  }  
  // /($base-line-height/$base-font-size) * $lines;
}


//===========================
// Draw baselines 
@mixin draw-base-lines(){
    background-image:linear-gradient(#ddd 1px, transparent 0);
    background-size:100% rem(px($base-line-height * $base-font-scale/100%));
    // background-position:0 rem(px($base-line-height));
}


@mixin font($scale,$rhythm:null){
  // Rhythm can also be round, ceil or floor
  // calculating 
  font-size:ms($scale);
  line-height:bl($rhythm,$scale);
}


//============================================================================================================
// In document SCSS
// 
@include ModularScale($MS_GOLDEN_RATIO,$base-font-size,$sign-font-size);
// $base-line-height:number(ms(1)) * $base-font-size;

@import url(http://fonts.googleapis.com/css?family=Poiret+One);
@import url('http://fonts.googleapis.com/css?family=Bilbo+Swash+Caps');
@import url('http://fonts.googleapis.com/css?family=Raleway:400, 300, 600, 500');
@import url('http://fonts.googleapis.com/css?family=Merriweather+Sans:400, 300, 700, 400italic');

*, *:before, *:after { 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin:0; padding:0; 
    text-decoration:none; outline:none;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    line-height:100%;
    vertical-align:baseline;
    background:transparent;
}




html { font-size:$base-font-scale; line-height:100%; }
body { font-size:100%; line-height:100%; // 
    // font-size:rem(px($base-font-size)); // line-height:rem(px($base-line-height));  
    // line-height:150%; 
    @include draw-base-lines();
    padding:rem(px($base-line-height * $base-font-scale/100%));
}
* {
//   line-height:1.5; 
}
article { margin:0 auto; 
   max-width:px(0.4471875 * ($base-font-size) * 76); 
}




h1 { 
  font-family:'Poiret One', cursive;
  @include font(6,4);
  margin-bottom:bl(1);
  //background:rgba(255,0,255,0.5);
}
h2 { 
  font-family:Raleway;
  @include font(3,2);
  margin-bottom:bl(1);
  // padding-top:20px;
  //background:rgba(255,0,255,0.6);
}
p,li { 
  font-family:Helvetica; 
  @include font(0,1);
  margin-bottom:bl(1);
  //background:rgba(255,0,255,0.4);
}
//.byline { background:purple;}
.byline { 
  font-style:italic;   font-family:Helvetica; 
  @include font(-1,1);
  margin-bottom:bl(1);}
time {  display:inline-block; margin-bottom:0; color:#aaa; }

ul,ol { margin-bottom:bl(1); margin-top:0; }
li > ul,
li > ol { margin-bottom:0; }
li { margin-bottom:0; margin-left:1.5em; }

blockquote { 
  @include font(1,1);
  margin-bottom:bl(1);
  padding-left:bl(1);
  display:block;
  position:relative;
  &:before{content:'“'; color:#aaa; position:absolute; left:0; @include font(4,1); }
}
blockquote.pullquote {
  font-family:Raleway;
  &:before{content:''; }
  border-left:6px solid #aaa; 
  p:last-child {padding-bottom:0; }
}

img {
  max-width:100%; 
  // height:15rem; 
  display:block;
  margin-bottom:1.5rem; 
}

//h1,h2 { background:rgba(255,0,255,0.3);}
//p     { background:rgba(255,0,255,0.2);}
//li    { background:rgba(255,0,255,0.3);}