Goodbye web fonts, hello SVG icons

This commit is contained in:
Wesley Moore 2015-08-28 19:18:55 +10:00
parent 022a040ae6
commit d4a78dd8f8
11 changed files with 62 additions and 144 deletions

View file

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

View file

@ -1,12 +1,11 @@
<meta charset="utf-8" /> <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> <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[:extra] %><meta name="description" content="<%=h @item[:extra] %>"><% end %>
<% if @item[:keywords] %><meta name="keywords" content="<%=h @item[:keywords].join(',') %>"><% end %> <% if @item[:keywords] %><meta name="keywords" content="<%=h @item[:keywords].join(',') %>"><% end %>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="/js/html5.js"></script> <script src="/js/html5.js"></script>
<![endif]--> <![endif]-->
<%= Webink.link %>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" /> <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/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" /> <link rel="stylesheet" href="/css/prettyPhoto.css?v=3.0.1" type="text/css" media="screen" charset="utf-8" />

View file

@ -6,7 +6,7 @@
<li><a href="/about/">About</a></li> <li><a href="/about/">About</a></li>
<li><a href="/projects/">Projects</a></li> <li><a href="/projects/">Projects</a></li>
<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> </li>
</nav> </nav>
</header> </header>

View file

@ -11,7 +11,12 @@
</div> </div>
<%= yield %> <%= yield %>
<div id="respond"> <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 <p>Contact me by email or Twitter if you have a comment, correction
or just want to get in touch.</p> or just want to get in touch.</p>
<ul class="inline"> <ul class="inline">

View file

@ -10,7 +10,7 @@
<section id="technical" class="column"> <section id="technical" class="column">
<div> <div>
<h1><a href="/technical/articles/">Technical</a> <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> </h1>
<ul class="articles"> <ul class="articles">
<% technical_articles[0..4].each do |article| %> <% technical_articles[0..4].each do |article| %>
@ -24,7 +24,7 @@
<section id="personal" class="column"> <section id="personal" class="column">
<div> <div>
<h1><a href="/personal/articles/">Personal</a> <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> </h1>
<ul class="articles"> <ul class="articles">
<% personal_articles[0..4].each do |article| %> <% personal_articles[0..4].each do |article| %>
@ -38,7 +38,7 @@
<section id="flickr"> <section id="flickr">
<header> <header>
<h1><a href="http://www.flickr.com/photos/wezm/">Photos</a> <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> </h1>
</header> </header>
<ul class="inline"></ul> <ul class="inline"></ul>

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 482 B

10
output/images/comment.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 693 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 302 B

17
output/images/feed-icon.svg Executable file
View file

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

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 456 B