allanwhite

$gray-1:  hsl(225, 4%, 8%);
$gray-2:  hsl(225, 4%, 16%);
$gray-3:  hsl(225, 4%, 25%);
$gray-4:  hsl(225, 4%, 33%);
$gray-5:  hsl(225, 4%, 41%);
$gray-6:  hsl(225, 4%, 50%);
$gray-7:  hsl(225, 4%, 58%);
$gray-8:  hsl(225, 4%, 66%);
$gray-9:  hsl(225, 4%, 75%);
$gray-10: hsl(225, 4%, 83%);

allanwhite

- for (var c = 1; c < 500; c++)
  if c < 10
    div 00#{c}
  else if c <100
    div 0#{c}
  else
    div #{c}

allanwhite

$gray-1:  hsl(30, 4%, 8%);
$gray-2:  hsl(30, 4%, 16%);
$gray-3:  hsl(30, 4%, 25%);
$gray-4:  hsl(30, 4%, 33%);
$gray-5:  hsl(30, 4%, 41%);
$gray-6:  hsl(30, 4%, 50%);
$gray-7:  hsl(30, 4%, 58%);
$gray-8:  hsl(30, 4%, 66%);
$gray-9:  hsl(30, 4%, 75%);
$gray-10: hsl(30, 4%, 83%);

allanwhite

<h2 class="subhead">Share this!</h2>
    <p class="icons"><!-- there's some styling for icons here; lots of ways to solve this. See font-awesome for icons -->
      <a href="https://twitter.com/intent/tweet?text={{ site_name }}: {{ title|truncate:100 }}&url={{ permalink }}&related={{ twitteruser }}" target="_blank"><i class="icon-twitter"></i> </a>
      <a href="http://www.facebook.com/sharer.php?s=100
          &p[url]={{ permalink }}
          {{ if image_featured_thumb }}&p[images][0]={{ image_featured_thumb }}{{ endif }}
          &p[title]={{ site_name }}: {{ title }}
          &p[summary]={{ summary|truncate:200 }}"><i class="icon-facebook"></i> </a>
      <a href="https://plus.google.com/share?url={{ permalink }}"><i class="icon-google-plus"></i></a>
      <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ permalink }}&title={{ title }}|{{ site_name }}&summary={{ summary|truncate:100 }}" title="_blank"><i class="icon-linkedin"></i> </a>

allanwhite

- var fontlist = [{name: 'Black', style: 'normal', weight: 900},{name: 'BlackItalic', style: 'italic', weight: 900},{name: 'Heavy', style: 'normal', weight: 800},{name: 'HeavyItalic', style: 'italic', weight: 800},{name: 'Bold', style: 'normal', weight: 700},{name: 'BoldItalic', style: 'italic', weight: 700},{name: 'Semibold', style: 'normal', weight: 600},{name: 'SemiboldItalic', style: 'italic', weight: 600},{name: 'Medium', style: 'normal', weight: 500},{name: 'MediumItalic', style: 'italic', weight: 500},{name: 'Regular', style: 'normal', weight: 400},{name: 'Italic', style: 'italic', weight: 400},{name: 'Light', style: 'normal', weight: 300},{name: 'LightItalic', style: 'italic', weight: 300},{name: 'Thin', style: 'normal', weight: 100},{name: 'ThinItalic', style: 'italic', weight: 100},{name: 'Hairline', style: 'normal', weight: 100},{name: 'HairlineItalic', style: 'italic', weight: 100}]
each font, n in fontlist
  p(class='Lato-'+fontlist[n].name) #{fontlist[n].name} #{fontlist[n].weight}

allanwhite

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$gray-base: hsl(30, 7%, 0%);
$steps: 12;
@for $c from 1 through $steps{
  $theColor: adjust-color($gray-base, $lightness: ($c * (100 / $steps)));
  // can we generate global variables at this stage?

allanwhite

HSQ Brand colors, 2015

Current as of Dec. 29 2014. These colors are going to drive the new healthsparq.com, which will be launched in early 2015.

A Pen by Allan White on CodePen.

License.

allanwhite

function sfwPNG24(saveFile){
  var pngOpts = new ExportOptionsSaveForWeb; 
  pngOpts.format = SaveDocumentType.PNG
  pngOpts.PNG8 = false; 
  pngOpts.transparency = true; 
  pngOpts.interlaced = false; 
  pngOpts.quality = 100;
  activeDocument.exportDocument(new File(saveFile),ExportType.SAVEFORWEB,pngOpts); 
}

allanwhite

- var site = {title: 'site name', url: 'http:site.com', image: '/images/thumbnail-site-square.jpg', favicon: '/favicon.ico', description: 'Site Description'}

each val, key in site // Open Graph metadata
  meta(property='og:'+'#{key}', content='#{val}')