From d4a78dd8f8a18c6971542c393ef1bcfe11bee26e Mon Sep 17 00:00:00 2001
From: Wesley Moore <wes@wezm.net>
Date: Fri, 28 Aug 2015 19:18:55 +1000
Subject: [PATCH] Goodbye web fonts, hello SVG icons

---
 content/screen.sass               |  57 +++++++---------
 layouts/_head.html                |   3 +-
 layouts/_header.html              |   2 +-
 layouts/article.html              |   7 +-
 layouts/home.html                 |   6 +-
 lib/webink.rb                     | 104 ------------------------------
 output/images/black-feed-icon.png | Bin 482 -> 0 bytes
 output/images/comment.svg         |  10 +++
 output/images/comment32.png       | Bin 302 -> 0 bytes
 output/images/feed-icon.svg       |  17 +++++
 output/images/white-feed-icon.png | Bin 456 -> 0 bytes
 11 files changed, 62 insertions(+), 144 deletions(-)
 delete mode 100644 lib/webink.rb
 delete mode 100644 output/images/black-feed-icon.png
 create mode 100644 output/images/comment.svg
 delete mode 100755 output/images/comment32.png
 create mode 100755 output/images/feed-icon.svg
 delete mode 100644 output/images/white-feed-icon.png

diff --git a/content/screen.sass b/content/screen.sass
index 3f61e13..ac254c8 100644
--- a/content/screen.sass
+++ b/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-size: 16px
-  font-weight: 300
-  background: #fff
-  color: #223
+  font-family: $ans-serif
 
+  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%
diff --git a/layouts/_head.html b/layouts/_head.html
index f3f5eae..7137156 100644
--- a/layouts/_head.html
+++ b/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" />
diff --git a/layouts/_header.html b/layouts/_header.html
index 6680668..e08f61a 100644
--- a/layouts/_header.html
+++ b/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>
diff --git a/layouts/article.html b/layouts/article.html
index 951fa8d..5bea54d 100644
--- a/layouts/article.html
+++ b/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">
diff --git a/layouts/home.html b/layouts/home.html
index d01b557..4e74379 100644
--- a/layouts/home.html
+++ b/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>
diff --git a/lib/webink.rb b/lib/webink.rb
deleted file mode 100644
index 584a4c5..0000000
--- a/lib/webink.rb
+++ /dev/null
@@ -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
-
diff --git a/output/images/black-feed-icon.png b/output/images/black-feed-icon.png
deleted file mode 100644
index dfd4b1c77246af8e4732a8edb32f6266ea726ad4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 482
zcmV<80UiE{P)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzgh@m}RCwB4QoD-6P!K&y6hu^lg&-(`
zpolgr7J}H=iG`KQf_{Zo3PL_Wf50!Wv=X-3&PK6au(0vfnV_N|;@vv~Hw!y(m`O5o
z&&ipq8HVv;n&x*X6f!*?4+y%hyP5EQzi~dFo&A1aF~Z^S4*;`REW&XdJRT1SAs7^z
zrtwf95b(+RQ;SBU{N;E&a)Uetv)K&O=@j?--DP<`pPUUjU=ihVxy0#oLM#?TtyV*|
zTE%+3hHcy2OrX$}?oz3Q)oO)StA%d23;9o&OeRPslkULl^#XFaoJgfoLdD^55WQYc
zwA*cQy<Wv`w-fn%Uc}>Z?sFN+<uWYGV%pJYgh(WU!C=4=>-D<JqALqCnG82~IvqBE
zWX<PuHlfjI{7EVl3QS4#6vN?A^!t6To6V*ekH=gGgF!)#>S{ro%?6jt1&hUkL6J_U
zvE6RD&StZ0vzACCY^m2&8vlc2DER$;$GF{YU$jB5*Xxtl#N8}qdY13iHF0Eb<yU|K
Y0HuoJMtO)41poj507*qoM6N<$f~P3jF8}}l

diff --git a/output/images/comment.svg b/output/images/comment.svg
new file mode 100644
index 0000000..6b92088
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/output/images/comment32.png b/output/images/comment32.png
deleted file mode 100755
index 906b77eb81192d7f94214f4a77cedd2e84a57243..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 302
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8wRq
zxP?HN@zUM8KR`jT64!_l=c3falFa-(g^<kLR0abJeM1X<1Ism50w5JKAQi#+X(i=}
zMX3yqDfvmM3T~N2spa`a*~JRZ!6s~*E-wJ8Yx8t*42fucJ3Wx=fC7*6<%dsgHXdIc
zf5>b?rg(Vb+2!(Qjg@j;Lm#d@e6^OnfrY{H`T6?`rzjoJ<1{f{HFekWxAPnrSRkmu
z`oL1zX!gl*(()^}>oi_Gt#ZJw<BQL^=l)w?a-NxSnKA9`N(QlFsfMd_*b+>aGey)3
iu|7C!r?~%qpY~-5lk}>W2Gf8pV(@hJb6Mw<&;$Tfv1btg

diff --git a/output/images/feed-icon.svg b/output/images/feed-icon.svg
new file mode 100755
index 0000000..92319c3
--- /dev/null
+++ b/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>
diff --git a/output/images/white-feed-icon.png b/output/images/white-feed-icon.png
deleted file mode 100644
index 7d9496b70aac4e5cb53545a9a5dba25a01efcd41..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 456
zcmV;(0XP1MP)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzYDq*vRCwB4Qn8A{KoET{K}1A?Ww5fa
zzQW4RHdU(N7g(hdKR_(3#L7<)i(uss*oajKDT0WFh=_&F1rZAo_htsN$KAl&orRfs
zZ)Udee!su6EL-32cbj}LKA(@d8A>VCYPGChuXhv&1F(}M!Rz%xsZ>I-SQJ>6CBd9@
zyWQ;T^|~(5p(z25<M0Kl0?+f%?RHTvmkkRS5VptTA@qyI0znX<QmJ4zo5A;e?Du;U
zY#4Lh+wB&uRtsSmVmh6IdP1+)!|{0hlYlf$_2F<}Spt%#CzFYu&*z%hG)dHP9P9J>
zEOCZmv)N!c97-R9!GN2@cs$1Ca=~h~GAt?|A?szM$}#|!<+`p6VYyuXN{XULD4Cum
zjYcC)mBpuibidyhpL)_fQI#*K*=(X(t)ks-3)o0A8jXhdyWLL4TsWOh-@KGu<A1P>
y9M9)7vt->$nXkc?FN@#2X%433jAVCy1Q-D6oa>!<Op>nv0000<MNUMnLSTZLQO|$?