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

// ----
// 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

- 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

<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

$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

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

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

$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

<div class="flex flex-center">
  <img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
  <img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
  <img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
  <img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
  <img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
  <img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
</div>

allanwhite

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