mirror of
https://github.com/wezm/wezm.net.git
synced 2024-11-10 01:42:32 +00:00
Goodbye web fonts, hello SVG icons
This commit is contained in:
parent
022a040ae6
commit
d4a78dd8f8
11 changed files with 62 additions and 144 deletions
|
|
@ -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%
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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> <a href="/feed/">Feed</a>
|
||||
<a href="/feed/"><img src="/images/feed-icon.svg" width="12" height="12" alt="White Feed Icon" /></a> <a href="/feed/">Feed</a>
|
||||
</li>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
104
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
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 482 B |
10
output/images/comment.svg
Normal file
10
output/images/comment.svg
Normal 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
17
output/images/feed-icon.svg
Executable 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 |
Loading…
Reference in a new issue