From 3274b1c88a7bb808bced7e730eaa7d46d3c26908 Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Sun, 28 Jul 2013 17:27:22 +1000 Subject: [PATCH] Adjust layout to be more responsive --- Guardfile | 8 + content/mobile.sass | 70 --------- content/mobile.yaml | 3 - .../01/tarra-valley-and-wilsons-prom.mkdn | 14 +- content/screen.sass | 141 +++++++++++++++--- ...peed-up-slow-ios-downloads-with-proxy.mkdn | 8 +- content/weather.html | 4 +- layouts/_head.html | 2 +- lib/webink.rb | 114 ++++++++++++++ 9 files changed, 255 insertions(+), 109 deletions(-) create mode 100644 Guardfile delete mode 100644 content/mobile.sass delete mode 100644 content/mobile.yaml create mode 100644 lib/webink.rb diff --git a/Guardfile b/Guardfile new file mode 100644 index 0000000..1279cd9 --- /dev/null +++ b/Guardfile @@ -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 diff --git a/content/mobile.sass b/content/mobile.sass deleted file mode 100644 index 82cdb7d..0000000 --- a/content/mobile.sass +++ /dev/null @@ -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 diff --git a/content/mobile.yaml b/content/mobile.yaml deleted file mode 100644 index 7cdf7da..0000000 --- a/content/mobile.yaml +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: Stylesheet for mobile devices -is_hidden: true diff --git a/content/personal/2013/01/tarra-valley-and-wilsons-prom.mkdn b/content/personal/2013/01/tarra-valley-and-wilsons-prom.mkdn index 8cf5e00..fbc423f 100644 --- a/content/personal/2013/01/tarra-valley-and-wilsons-prom.mkdn +++ b/content/personal/2013/01/tarra-valley-and-wilsons-prom.mkdn @@ -16,16 +16,16 @@ Below are some of my favourite photos from the trip. [flickr]: http://www.flickr.com/photos/wezm/sets/72157632405621933/ -
The Gang
+
The Gang
-
_MG_2560
+
_MG_2560
-
Wet Leaf
+
Wet Leaf
-
Corrigan Suspension Bridge
+
Corrigan Suspension Bridge
-
_MG_2736
+
_MG_2736
-
Tidal River
+
Tidal River
-
Squeaky Beach
+
Squeaky Beach
diff --git a/content/screen.sass b/content/screen.sass index f7c9d4e..47b4c9d 100644 --- a/content/screen.sass +++ b/content/screen.sass @@ -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 - 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-weight: 300 background: #fff color: #223 - &.home - min-width: 960px - // HTML5 expectations - should go in reset perhaps header, footer, nav, article, figure, figcaption @@ -48,7 +46,7 @@ h1, h2, h3, h4, h5, h6 font-family: $ans-serif margin: 0.6em 0 0.5em 0 color: #111 - font-weight: 200 + font-weight: 500 h1 @@ -102,12 +100,14 @@ sup 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 - font-size: 13px overflow-x: auto + padding-bottom: 0.25em blockquote @@ -119,19 +119,26 @@ figure margin: 1em auto text-align: center + &.screenshot + img + max-width: 50% + figcaption - font-size: small + font-size: smaller text-align: center font-style: italic .label - font-weight: bold + font-weight: 500 +img + max-width: 100% body > header font-family: $ans-serif font-size: 18px + font-weight: 400 color: white padding: 0.5em background: #1C1C1C @@ -159,21 +166,18 @@ body > header #content - padding: 0 20px + margin: 0 auto clear: both - min-width: 600px - margin-right: 40% + max-width: 728px + font-size: 18px + font-weight: 300 -body.articles #content, body.weather #content - min-width: 0 - margin-right: 0 - footer color: #999 border-top: 1px solid #999 - margin: 1em + margin: 20px clear: both .copyright @@ -228,11 +232,10 @@ ul.articles strong font-family: $ans-serif margin: 0 - font-weight: 200 + font-weight: 400 display: block font-size: 18px - a &.more display: block @@ -290,6 +293,7 @@ a img -webkit-transition: opacity 500ms ease-out position: absolute + max-width: none &:hover opacity: 0 @@ -456,12 +460,16 @@ table // Weather body.weather + #content + max-width: 100% + margin: 0 20px + #current > .temperature - + .temperature font-family: $ans-serif font-weight: 200 - + .current font-size: 36px @@ -499,3 +507,92 @@ body.weather font-size: smaller margin-top: 1em 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% + diff --git a/content/technical/2013/01/speed-up-slow-ios-downloads-with-proxy.mkdn b/content/technical/2013/01/speed-up-slow-ios-downloads-with-proxy.mkdn index 7671daf..99cd2c0 100644 --- a/content/technical/2013/01/speed-up-slow-ios-downloads-with-proxy.mkdn +++ b/content/technical/2013/01/speed-up-slow-ios-downloads-with-proxy.mkdn @@ -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 -
- Podcast download without proxy +
+ Podcast download without proxy
Podcast download without proxy, 53 kb/sec
-
- Podcast download with proxy +
+ Podcast download with proxy
Podcast download with proxy, 491 kb/sec
diff --git a/content/weather.html b/content/weather.html index eeabb8f..290d8e4 100644 --- a/content/weather.html +++ b/content/weather.html @@ -4,8 +4,8 @@
Loading Loading
-

History

- +

History

+
diff --git a/layouts/_head.html b/layouts/_head.html index e88600e..f3f5eae 100644 --- a/layouts/_head.html +++ b/layouts/_head.html @@ -6,9 +6,9 @@ +<%= Webink.link %> - diff --git a/lib/webink.rb b/lib/webink.rb new file mode 100644 index 0000000..221d6db --- /dev/null +++ b/lib/webink.rb @@ -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{} + 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 +