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

Adjust layout to be more responsive

Browse source
This commit is contained in:
Wesley Moore 2013-07-28 17:27:22 +10:00
parent f077fe79f0
commit 3274b1c88a
9 changed files with 255 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Guardfile Normal file
View file

@ -0,0 +1,8 @@
# A sample Guardfile
# More info at https://github.com/guard/guard#readme
guard 'nanoc' do
watch('nanoc.yaml') # Change this to config.yaml if you use the old config file name
watch('Rules')
watch(%r{^(content|layouts|lib)/.*$})
end

70
content/mobile.sass
View file

@ -1,70 +0,0 @@
body.home
min-width: 0
body > header span
float: right
display: inline
cursor: pointer
#menu
display: none
float: none
padding: 0.5em 0 0 0
line-height: 2
li
margin: 0 1em 0 0
#technical div, #personal div
padding: 0 1em
.column
float: none
width: auto
min-width: 0
#content
min-width: 0
margin-right: 0
padding: 0 10px
h1
font-size: 30px
ul.articles li
margin: 0
padding-top: 0
height: auto
nav.search
li
display: list-item
margin: 1em 0 0 0
font-size: large
#search
float: none
#flickr
header
margin-left: 1em
ul
height: auto
li, li:first-child
margin: 0 0 1em 1em
#respond
li.short
margin: 0.5em 0 0 0
float: none
display: block

3
content/mobile.yaml
View file

@ -1,3 +0,0 @@
---
title: Stylesheet for mobile devices
is_hidden: true

14
content/personal/2013/01/tarra-valley-and-wilsons-prom.mkdn
View file

@ -16,16 +16,16 @@ Below are some of my favourite photos from the trip.
[flickr]: http://www.flickr.com/photos/wezm/sets/72157632405621933/ [flickr]: http://www.flickr.com/photos/wezm/sets/72157632405621933/
<figure><a href="http://www.flickr.com/photos/wezm/8335447321/" title="The Gang by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8351/8335447321_f54cab5ac7.jpg" width="500" height="333" alt="The Gang"></a></figure> <figure><a href="http://www.flickr.com/photos/wezm/8335447321/" title="The Gang by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8351/8335447321_f54cab5ac7_b.jpg" alt="The Gang"></a></figure>
<figure><a href="http://www.flickr.com/photos/wezm/8335449191/" title="_MG_2560 by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8219/8335449191_1864e2015b.jpg" width="333" height="500" alt="_MG_2560"></a></figure> <figure><a href="http://www.flickr.com/photos/wezm/8335449191/" title="_MG_2560 by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8219/8335449191_1864e2015b_b.jpg" alt="_MG_2560"></a></figure>
<figure><a href="http://www.flickr.com/photos/wezm/8335468571/" title="Wet Leaf by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8493/8335468571_65d445b2f0.jpg" width="500" height="333" alt="Wet Leaf"></a></figure> <figure><a href="http://www.flickr.com/photos/wezm/8335468571/" title="Wet Leaf by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8493/8335468571_65d445b2f0_b.jpg" alt="Wet Leaf"></a></figure>
<figure><a href="http://www.flickr.com/photos/wezm/8336509904/" title="Corrigan Suspension Bridge by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8221/8336509904_f91110bd7e.jpg" width="500" height="333" alt="Corrigan Suspension Bridge"></a></figure> <figure><a href="http://www.flickr.com/photos/wezm/8336509904/" title="Corrigan Suspension Bridge by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8221/8336509904_f91110bd7e_b.jpg" alt="Corrigan Suspension Bridge"></a></figure>
<figure><a href="http://www.flickr.com/photos/wezm/8336530324/" title="_MG_2736 by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8352/8336530324_9ea598a818.jpg" width="333" height="500" alt="_MG_2736"></a></figure> <figure><a href="http://www.flickr.com/photos/wezm/8336530324/" title="_MG_2736 by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8352/8336530324_9ea598a818_b.jpg" alt="_MG_2736"></a></figure>
<figure><a href="http://www.flickr.com/photos/wezm/8335479675/" title="Tidal River by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8211/8335479675_4f3fb4a105.jpg" width="500" height="375" alt="Tidal River"></a></figure> <figure><a href="http://www.flickr.com/photos/wezm/8335479675/" title="Tidal River by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8211/8335479675_4f3fb4a105_b.jpg" alt="Tidal River"></a></figure>
<figure><a href="http://www.flickr.com/photos/wezm/8335482115/" title="Squeaky Beach by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8078/8335482115_04fbf1c43b.jpg" width="500" height="158" alt="Squeaky Beach"></a></figure> <figure><a href="http://www.flickr.com/photos/wezm/8335482115/" title="Squeaky Beach by wezm, on Flickr"><img src="http://farm9.staticflickr.com/8078/8335482115_04fbf1c43b_b.jpg" alt="Squeaky Beach"></a></figure>

141
content/screen.sass
View file

@ -1,14 +1,12 @@
$ans-serif: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif $ans-serif: 'CamingoWeb', "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
body body
font-family: Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif font-family: 'CamingoWeb', Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif
font-size: 16px font-size: 16px
font-weight: 300
background: #fff background: #fff
color: #223 color: #223
&.home
min-width: 960px
// 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
@ -48,7 +46,7 @@ h1, h2, h3, h4, h5, h6
font-family: $ans-serif font-family: $ans-serif
margin: 0.6em 0 0.5em 0 margin: 0.6em 0 0.5em 0
color: #111 color: #111
font-weight: 200 font-weight: 500
h1 h1
@ -102,12 +100,14 @@ sup
pre, code, tt pre, code, tt
font-family: Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", monospace font-family: 'SourceCodePro', Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", monospace
code, tt
font-size: smaller
pre pre
font-size: 13px
overflow-x: auto overflow-x: auto
padding-bottom: 0.25em
blockquote blockquote
@ -119,19 +119,26 @@ figure
margin: 1em auto margin: 1em auto
text-align: center text-align: center
&.screenshot
img
max-width: 50%
figcaption figcaption
font-size: small font-size: smaller
text-align: center text-align: center
font-style: italic font-style: italic
.label .label
font-weight: bold font-weight: 500
img
max-width: 100%
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
@ -159,21 +166,18 @@ body > header
#content #content
padding: 0 20px margin: 0 auto
clear: both clear: both
min-width: 600px max-width: 728px
margin-right: 40% font-size: 18px
font-weight: 300
body.articles #content, body.weather #content
min-width: 0
margin-right: 0
footer footer
color: #999 color: #999
border-top: 1px solid #999 border-top: 1px solid #999
margin: 1em margin: 20px
clear: both clear: both
.copyright .copyright
@ -228,11 +232,10 @@ ul.articles
strong strong
font-family: $ans-serif font-family: $ans-serif
margin: 0 margin: 0
font-weight: 200 font-weight: 400
display: block display: block
font-size: 18px font-size: 18px
a a
&.more &.more
display: block display: block
@ -290,6 +293,7 @@ a
img img
-webkit-transition: opacity 500ms ease-out -webkit-transition: opacity 500ms ease-out
position: absolute position: absolute
max-width: none
&:hover &:hover
opacity: 0 opacity: 0
@ -456,12 +460,16 @@ table
// Weather // Weather
body.weather body.weather
#content
max-width: 100%
margin: 0 20px
#current > .temperature #current > .temperature
.temperature .temperature
font-family: $ans-serif font-family: $ans-serif
font-weight: 200 font-weight: 200
.current .current
font-size: 36px font-size: 36px
@ -499,3 +507,92 @@ body.weather
font-size: smaller font-size: smaller
margin-top: 1em margin-top: 1em
color: #999 color: #999
@media screen and (max-width: 960px)
.column
float: none
width: auto
min-width: 0
max-width: 728px
@media screen and (max-width: 768px)
body
font-size: 18px
#technical div, #personal div
padding: 0 1em
#content
margin: 0 20px
@media screen and (max-width: 680px)
nav.search
li
display: list-item
margin: 1em 0 0 0
font-size: large
#search
float: none
@media screen and (max-width: 515px)
body > header span
float: right
display: inline
cursor: pointer
#menu
display: none
float: none
padding: 0.5em 0 0 0
line-height: 2
li
margin: 0 1em 0 0
#content
min-width: 0
margin: 0 10px
h1
font-size: 30px
body.weather #content
margin: 0 10px
ul.articles li
margin: 0
padding-top: 0
height: auto
#flickr
header
margin-left: 1em
ul
height: auto
li, li:first-child
margin: 0 0 1em 1em
#respond
li.short
margin: 0.5em 0 0 0
float: none
display: block
footer
margin: 20px 10px
@media screen and (max-width: 320px)
figure.screenshot
img
max-width: 100%

8
content/technical/2013/01/speed-up-slow-ios-downloads-with-proxy.mkdn
View file

@ -58,13 +58,13 @@ time to complete the remaining 143.8 Mb is now only 5 mins (491 kb/sec)
[slow-start]: https://en.wikipedia.org/wiki/Slow-start [slow-start]: https://en.wikipedia.org/wiki/Slow-start
<figure> <figure class="screenshot">
<img src="/images/2013/01/podcast-download-without-proxy.png" width="320" height="480" alt="Podcast download without proxy" /> <img src="/images/2013/01/podcast-download-without-proxy.png" alt="Podcast download without proxy" />
<figcaption>Podcast download without proxy, 53 kb/sec</figcaption> <figcaption>Podcast download without proxy, 53 kb/sec</figcaption>
</figure> </figure>
<figure> <figure class="screenshot">
<img src="/images/2013/01/podcast-download-with-proxy.png" width="320" height="480" alt="Podcast download with proxy" /> <img src="/images/2013/01/podcast-download-with-proxy.png" alt="Podcast download with proxy" />
<figcaption>Podcast download with proxy, 491 kb/sec</figcaption> <figcaption>Podcast download with proxy, 491 kb/sec</figcaption>
</figure> </figure>

4
content/weather.html
View file

@ -4,8 +4,8 @@
<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div> <div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
<div class="temperature"> <div class="temperature">
<h3>History</h3> <h3>History <button id="today">Today</button></h3>
<button id="today">Today</button>
<div class="chart"></div> <div class="chart"></div>
</div> </div>

2
layouts/_head.html
View file

@ -6,9 +6,9 @@
<!--[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/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />
<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" />
<link rel="alternate" href="/feed/" type="application/atom+xml" title="WezM.net - All Articles" /> <link rel="alternate" href="/feed/" type="application/atom+xml" title="WezM.net - All Articles" />
<link rel="alternate" href="/technical/feed/" type="application/atom+xml" title="WezM.net - Technical Articles" /> <link rel="alternate" href="/technical/feed/" type="application/atom+xml" title="WezM.net - Technical Articles" />

114
lib/webink.rb Normal file
View file

@ -0,0 +1,114 @@
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',
},
'D6A4893B-07F2-0B53-29D3-E16D016F5BB6' => {
:family => 'MonoCondensed',
#:style => :italic
#:weight => 'normal',
},
'BE4B6AFF-B77A-F436-7983-AD9D47F266E3' => {
:family => 'MonoCondensed',
#:style => :italic
:weight => '700',
},
'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