benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Goodbye web fonts, hello SVG icons

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

57
content/screen.sass
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
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%

3
layouts/_head.html
View file

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

2
layouts/_header.html
View file

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

7
layouts/article.html
View file

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

6
layouts/home.html
View file

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

104
lib/webink.rb
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

BIN
output/images/black-feed-icon.png
View file

Binary file not shown.
Side by side

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>
Side by side

After

Width:  |  Height:  |  Size: 693 B

BIN
output/images/comment32.png
View file

Binary file not shown.
Side by side

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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
output/images/white-feed-icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 456 B