Goodbye web fonts, hello SVG icons

content/screen.sass

@@ -1,12 +1,11 @@
-$ans-serif:  'CamingoWeb', "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
+$ans-serif:  Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif
 
 body
-  font-family: 'CamingoWeb', Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif
+  font-family: $ans-serif
-  font-size: 16px
-  font-weight: 300
-  background: #fff
-  color: #223
 
+  font-size: 16px
+  background: #fff
+  color: #464646
 
 // HTML5 expectations - should go in reset perhaps
 header, footer, nav, article, figure, figcaption
@@ -14,7 +13,7 @@ header, footer, nav, article, figure, figcaption
 
 
 p, li, blockquote
-  line-height: 1.2
+  line-height: 1.3
 
 
 p, pre
@@ -88,6 +87,7 @@ h1 a
 
 body.home h1 > a
   -webkit-transition: border-bottom-color 500ms ease-out
+  transition: border-bottom-color 500ms ease-out
   border-bottom: 2px solid rgba(17, 17, 17, 0.0)
 
   &:hover
@@ -100,7 +100,7 @@ sup
 
 
 pre, code, tt
-  font-family: 'SourceCodePro', Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", monospace
+  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace
 
 code, tt
   font-size: smaller
@@ -128,9 +128,6 @@ figcaption
   text-align: center
   font-style: italic
 
-  .label
-    font-weight: 500
-
 img
   max-width: 100%
 
@@ -141,13 +138,13 @@ img.cover-photo
 body > header
   font-family: $ans-serif
   font-size: 18px
-  font-weight: 400
   color: white
   padding: 0.5em
   background: #1C1C1C
 
   a
     -webkit-transition: border-bottom-color 500ms ease-out
+    transition: border-bottom-color 500ms ease-out
     border-bottom: 2px solid rgba(255, 255, 255, 0.0)
     &:link, &:visited
       text-decoration: none
@@ -173,9 +170,6 @@ body > header
   clear: both
   max-width: 728px
   font-size: 18px
-  font-weight: 300
-
-
 
 footer
   color: #999
@@ -188,8 +182,6 @@ footer
     font-size: 14px
     padding-top: 1em
     display: block
-    font-weight: 200
-
 
 .column
   float: left
@@ -197,6 +189,8 @@ footer
   margin: 0
   min-width: 480px
 
+.align-top
+  vertical-align: top
 
 #personal div
   padding-right: 2em
@@ -235,9 +229,9 @@ ul.articles
   strong
     font-family: $ans-serif
     margin: 0
-    font-weight: 400
+    font-weight: normal
     display: block
-    font-size: 18px
+    font-size: 21px
 
 a
   &.more
@@ -295,6 +289,7 @@ a
 
     img
       -webkit-transition: opacity 500ms ease-out
+      transition: opacity 500ms ease-out
       position: absolute
       max-width: none
 
@@ -337,9 +332,6 @@ body.articles #content nav
   clear: both
 
   h2
-    padding-left: 42px
-    line-height: 32px
-    background: url(/images/comment32.png) no-repeat top left
     margin-top: 0
 
   li.short
@@ -359,7 +351,6 @@ body.articles #content nav
   .keyboard-shortcut
     font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
     font-size: 1.5ex
-    font-weight: 400
 
 img.alignleft
   float: left
@@ -368,10 +359,14 @@ img.alignleft
 
 img.feed-icon
   -webkit-transition: opacity 500ms ease-out
-  opacity: 0.5
+  transition: opacity 500ms ease-out
+  opacity: 1.0
 
   &:hover
-    opacity: 1.0
+    opacity: 0.75
+
+img.comment
+  padding-top: 1px
 
 #content .alignright, img.alignright
   float: right
@@ -462,8 +457,6 @@ table
   margin: 0 1em 1em 0
 
 
-
-
 // Weather
 body.weather
 
@@ -475,7 +468,6 @@ body.weather
 
     .temperature
       font-family: $ans-serif
-      font-weight: 200
 
     .current
       font-size: 36px
@@ -525,15 +517,12 @@ body.weather
 
 
 @media screen and (max-width: 768px)
-  body
-    font-size: 18px
-
   #technical div, #personal div
     padding: 0 1em
 
   #content
     margin: 0 20px
-
+    font-size: 20px
 
 @media screen and (max-width: 680px)
 
@@ -549,6 +538,9 @@ body.weather
 
 @media screen and (max-width: 515px)
 
+  body
+    font-size: 20px
+
   body > header span
     float: right
     display: inline
@@ -598,7 +590,6 @@ body.weather
   footer
     margin: 20px 10px
 
-@media screen and (max-width: 320px)
   figure.screenshot
     img
       max-width: 100%

layouts/_head.html

@@ -1,12 +1,11 @@
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
+<meta name="viewport" content="initial-scale=1.0" />
 <title><%=h [@item[:title], 'WezM.net by Wesley Moore'].compact.join(' - ') %></title>
 <% if @item[:extra] %><meta name="description" content="<%=h @item[:extra] %>"><% end %>
 <% if @item[:keywords] %><meta name="keywords" content="<%=h @item[:keywords].join(',') %>"><% end %>
 <!--[if lt IE 9]>
 <script src="/js/html5.js"></script>
 <![endif]-->
-<%= Webink.link %>
 <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
 <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen,projection" />
 <link rel="stylesheet" href="/css/prettyPhoto.css?v=3.0.1" type="text/css" media="screen" charset="utf-8" />

layouts/_header.html

@@ -6,7 +6,7 @@
     <li><a href="/about/">About</a></li>
     <li><a href="/projects/">Projects</a></li>
     <li>
-      <a href="/feed/"><img src="/images/white-feed-icon.png" width="12" height="12" alt="White Feed Icon" /></a>&nbsp;<a href="/feed/">Feed</a>
+      <a href="/feed/"><img src="/images/feed-icon.svg" width="12" height="12" alt="White Feed Icon" /></a>&nbsp;<a href="/feed/">Feed</a>
     </li>
   </nav>
 </header>

layouts/article.html

@@ -11,7 +11,12 @@
 </div>
 <%= yield %>
 <div id="respond">
-  <h2>Something to Add?</h2>
+  <h2>
+    <span class="align-top">
+      <img src="/images/comment.svg" width="32" height="32" alt="Comment icon" class="comment" />
+      Something to Add?
+    </span>
+  </h2>
   <p>Contact me by email or Twitter if you have a comment, correction
   or just want to get in touch.</p>
   <ul class="inline">

layouts/home.html

@@ -10,7 +10,7 @@
   <section id="technical" class="column">
     <div>
       <h1><a href="/technical/articles/">Technical</a>
-        <sup><a href="/technical/feed/"><img src="/images/black-feed-icon.png" class="feed-icon" width="12" height="12" alt="Black Feed Icon" /></a></sup>
+        <sup><a href="/technical/feed/"><img src="/images/feed-icon.svg" class="feed-icon" width="12" height="12" alt="Feed Icon" /></a></sup>
       </h1>
       <ul class="articles">
       <% technical_articles[0..4].each do |article| %>
@@ -24,7 +24,7 @@
   <section id="personal" class="column">
     <div>
       <h1><a href="/personal/articles/">Personal</a>
-        <sup><a href="/personal/feed/"><img src="/images/black-feed-icon.png" class="feed-icon" width="12" height="12" /></a></sup>
+        <sup><a href="/personal/feed/"><img src="/images/feed-icon.svg" class="feed-icon" width="12" height="12" alt="Feed Icon" /></a></sup>
       </h1>
       <ul class="articles">
       <% personal_articles[0..4].each do |article| %>
@@ -38,7 +38,7 @@
   <section id="flickr">
     <header>
       <h1><a href="http://www.flickr.com/photos/wezm/">Photos</a>
-        <sup><a href="http://api.flickr.com/services/feeds/photos_public.gne?id=40215689@N00&lang=en-us&format=atom"><img src="/images/black-feed-icon.png" class="feed-icon" width="12" height="12" alt="Black Feed Icon" /></a></sup>
+        <sup><a href="http://api.flickr.com/services/feeds/photos_public.gne?id=40215689@N00&lang=en-us&format=atom"><img src="/images/feed-icon.svg" class="feed-icon" width="12" height="12" alt="Feed Icon" /></a></sup>
       </h1>
     </header>
     <ul class="inline"></ul>

lib/webink.rb

@@ -1,104 +0,0 @@
-class Webink
-
-  CONFIG = {
-    :project => 'C5BD26AA-1512-4AB5-9747-5B1AFB64DFDA',
-    :fonts => {
-      'FB1E928A-046A-0390-A052-593A536E0BEF' => {
-        :family => 'CamingoWeb',
-        :style  => :italic,
-        :weight => 300,
-      },
-      'C67B3481-FFC9-D963-DE85-A940D8C283F0' => {
-        :family => 'CamingoWeb',
-        :weight => 900,
-        :enabled => false,
-      },
-      '424444D2-FE05-E607-206A-78F66DD6295A' => {
-        :family => 'CamingoWeb',
-        :style  => :italic,
-        :weight => 800,
-        :enabled => false,
-      },
-      '9C441ADD-B49A-E1A3-33A7-F379C630021E' => {
-        :family => 'CamingoWeb',
-        :style  => :italic,
-        :weight => 400,
-      },
-      'BDB31855-922B-4214-CF34-B35893938F0A' => {
-        :family => 'CamingoWeb',
-        :weight => 200,
-      },
-      '0E16AB2A-5E12-085F-01E7-69EBCA83E970' => {
-        :family => 'CamingoWeb',
-        :weight => 800,
-        :enabled => false,
-      },
-      '0A9EDF84-3C0F-6CED-850E-5B1D6F2BD03D' => {
-        :family => 'CamingoWeb',
-        #:weight => 'normal',
-      },
-      'A443627D-EB8E-E917-6820-8D149D2EF81C' => {
-        :family => 'CamingoWeb',
-        :weight => 200,
-      },
-      '21065B86-3136-64EB-905A-327D8C8DE895' => {
-        :family => 'CamingoWeb',
-        :style  => :italic,
-        :weight => 500,
-      },
-      'F224F5AC-F7FD-B23E-27F2-CBCBD9930478' => {
-        :family => 'CamingoWeb',
-        :weight => 300,
-      },
-      'DB94427D-4D01-C0D9-6FCE-2E4ADA71BC8D' => {
-        :family => 'CamingoWeb',
-        :style  => :italic,
-        :weight => 900,
-        :enabled => false,
-      },
-      'B68F1E61-ABEE-3C89-621B-641468656DBB' => {
-        :family => 'CamingoWeb',
-        :weight => 500,
-      },
-      '65407FCC-B52C-DF4A-EC8E-0EC19DDFDD44' => {
-        :family => 'CamingoWeb',
-        :weight => 700,
-      },
-      '337196A3-1754-5AE5-72E9-B73F92CE156A' => {
-        :family => 'CamingoWeb',
-        :style  => :italic
-        #:weight => 'normal',
-      },
-      'C4C06B6C-3C52-04FA-05D8-0837158487C0' => {
-        :family => 'SourceCodePro',
-        #:style  => :italic
-        #:weight => 'normal',
-      },
-      '3C6EEDC2-A56B-77E4-2B41-C34ACBAA0499' => {
-        :family => 'SourceCodePro',
-        #:style  => :italic
-        :weight => '700',
-      },
-    }
-  }
-
-
-  def self.link
-    %Q{<link href="#{href}" rel="stylesheet" type="text/css" />}
-  end
-
-  def self.href
-    "//fnt.webink.com/wfs/webink.css?".tap do |s|
-      s << "project=#{CONFIG[:project]}&fonts="
-      s << CONFIG[:fonts].select { |_, f| f.fetch(:enabled, true) }.map do |id, font|
-        "#{id}:#{font(font)}"
-      end.join(',')
-    end
-  end
-
-  def self.font(font)
-    font.to_a.map { |pair| pair.join('=') }.join(':')
-  end
-
-end
-

output/images/comment.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>comment</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M2,3 L29,3 L29,20 L24,20 L16,28 L16,20 L2,20 L2,3 Z" id="comment" stroke="#484848" stroke-width="2" sketch:type="MSShapeGroup"></path>
+    </g>
+</svg>

output/images/feed-icon.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
+<defs>
+<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
+<stop  offset="0.0" stop-color="#808080"/><stop  offset="0.2785" stop-color="#929292"/>
+<stop  offset="0.5" stop-color="#9B9B9B"/><stop  offset="0.5871" stop-color="#919191"/>
+<stop  offset="0.8427" stop-color="#797979"/><stop  offset="1.0" stop-color="#707070"/>
+</linearGradient>
+</defs>
+<rect width="256" height="256" rx="55" ry="55" x="0"  y="0"  fill="#777777"/>
+<rect width="246" height="246" rx="50" ry="50" x="5"  y="5"  fill="#999999"/>
+<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
+<circle cx="68" cy="189" r="24" fill="#FFF"/>
+<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
+<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
+</svg>