mirror of
https://github.com/wezm/wezm.net.git
synced 2024-11-18 12:52:47 +00:00
Adjust layout to be more responsive
This commit is contained in:
parent
f077fe79f0
commit
3274b1c88a
9 changed files with 255 additions and 109 deletions
8
Guardfile
Normal file
8
Guardfile
Normal 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
|
||||
|
|
@ -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
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
---
|
||||
title: Stylesheet for mobile devices
|
||||
is_hidden: true
|
||||
|
|
@ -16,16 +16,16 @@ Below are some of my favourite photos from the trip.
|
|||
|
||||
[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>
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
<figure>
|
||||
<img src="/images/2013/01/podcast-download-without-proxy.png" width="320" height="480" alt="Podcast download without proxy" />
|
||||
<figure class="screenshot">
|
||||
<img src="/images/2013/01/podcast-download-without-proxy.png" alt="Podcast download without proxy" />
|
||||
<figcaption>Podcast download without proxy, 53 kb/sec</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="/images/2013/01/podcast-download-with-proxy.png" width="320" height="480" alt="Podcast download with proxy" />
|
||||
<figure class="screenshot">
|
||||
<img src="/images/2013/01/podcast-download-with-proxy.png" alt="Podcast download with proxy" />
|
||||
<figcaption>Podcast download with proxy, 491 kb/sec</figcaption>
|
||||
</figure>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
|
||||
|
||||
<div class="temperature">
|
||||
<h3>History</h3>
|
||||
<button id="today">Today</button>
|
||||
<h3>History <button id="today">Today</button></h3>
|
||||
|
||||
<div class="chart"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<!--[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/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="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" />
|
||||
|
|
|
|||
114
lib/webink.rb
Normal file
114
lib/webink.rb
Normal 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
|
||||
|
||||
Loading…
Reference in a new issue