1
0
Fork 0
forked from wezm/wezm.net

Styling adjustments primarily for mobile browsers

This commit is contained in:
Wesley Moore 2010-06-30 12:26:30 +10:00
parent c0fd9c0935
commit af340d9efe
6 changed files with 69 additions and 19 deletions

View file

@ -1,10 +1,58 @@
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 #technical div, #personal div
padding: 0 1em padding: 0 1em
.column .column
min-width: 600px float: none
width: auto
min-width: 0
#content #content
min-width: 320px min-width: 0
margin-right: 0
padding: 0 10px
h1
font-size: 30px
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

View file

@ -5,7 +5,7 @@ body
color: #223 color: #223
&.home &.home
min-width: 520px min-width: 960px
p, li, blockquote p, li, blockquote
@ -95,11 +95,11 @@ sup
pre, code, tt pre, code, tt
font-size: 13px font-family: Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", monospace
font-family: Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", fixed
pre pre
font-size: 13px
overflow-x: auto overflow-x: auto
@ -126,6 +126,9 @@ body > header
&:hover &:hover
border-bottom-color: rgba(255, 255, 255, 1.0) border-bottom-color: rgba(255, 255, 255, 1.0)
span
display: none
#menu #menu
float: right float: right
@ -143,7 +146,7 @@ body > header
body.articles #content body.articles #content
min-width: auto min-width: 0
margin-right: 0 margin-right: 0
@ -161,19 +164,11 @@ footer
font-weight: 200 font-weight: 200
.pagination
display: none
text-align: center
.newer
visibility: hidden
.column .column
float: left float: left
width: 50% width: 50%
margin: 0 margin: 0
min-width: 500px min-width: 480px
#personal div #personal div

View file

@ -10,3 +10,5 @@
<link rel="alternate" href="http://feeds.feedburner.com/wezm" type="application/atom+xml" title="WezM.net - All Articles" /> <link rel="alternate" href="http://feeds.feedburner.com/wezm" type="application/atom+xml" title="WezM.net - All Articles" />
<link rel="alternate" href="http://feeds.feedburner.com/wezm-technical" type="application/atom+xml" title="WezM.net - Technical Articles" /> <link rel="alternate" href="http://feeds.feedburner.com/wezm-technical" type="application/atom+xml" title="WezM.net - Technical Articles" />
<link rel="alternate" href="http://feeds.feedburner.com/wezm-personal" type="application/atom+xml" title="WezM.net - Personal Articles" /> <link rel="alternate" href="http://feeds.feedburner.com/wezm-personal" type="application/atom+xml" title="WezM.net - Personal Articles" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/application.js" type="text/javascript" charset="utf-8"></script>

View file

@ -1,13 +1,13 @@
<header> <header>
<a href="/">WezM<sup>.net</sup></a>
<span>Menu</span>
<nav id="menu" class="inline"> <nav id="menu" class="inline">
<li><a href="/articles/">Articles</a></li> <li><a href="/articles/">Articles</a></li>
<li><a href="/contact/">Contact</a></li> <li><a href="/contact/">Contact</a></li>
<li><a href="/about/">About</a></li> <li><a href="/about/">About</a></li>
<li><a href="/projects/">Projects</a></li> <li><a href="/projects/">Projects</a></li>
<li> <li>
<a href="http://feeds.feedburner.com/wezm"><img src="/images/white-feed-icon.png" width="12" height="12" alt="White Feed Icon" /></a> <a href="http://feeds.feedburner.com/wezm"><img src="/images/white-feed-icon.png" width="12" height="12" alt="White Feed Icon" /></a>&nbsp;<a href="http://feeds.feedburner.com/wezm">Feed</a>
<a href="http://feeds.feedburner.com/wezm">Feed</a>
</li> </li>
</nav> </nav>
<a href="/">WezM<sup>.net</sup></a>
</header> </header>

View file

@ -10,7 +10,7 @@
</div> </div>
<%= yield %> <%= yield %>
<div id="respond"> <div id="respond">
<h2>Got Something to Add?</h2> <h2>Something to Add?</h2>
<p>Contact me by email or Twitter if you have a comment, correction or just want to get in touch.</p> <p>Contact me by email or Twitter if you have a comment, correction or just want to get in touch.</p>
<ul class="inline"> <ul class="inline">
<li> <li>

View file

@ -115,3 +115,8 @@ var WezM = {
} }
} }
jQuery(function() {
$('body > header span').click(function() {
$('#menu').slideToggle('normal');
})
});