fix mobile blog style

This commit is contained in:
Sami Samhuri 2011-11-27 20:11:45 -08:00
parent 9c4b0d7d09
commit c67c9ba682
5 changed files with 28 additions and 28 deletions

View file

@ -18,7 +18,7 @@ h1 { margin: 0
.hidden { display: none }
#index { width: 80%
; min-width: 200px
; min-width: 300px
; max-width: 800px
; border: solid 1px #999
; -moz-border-radius: 10px
@ -37,7 +37,7 @@ h1 { margin: 0
article { width: 80%
; min-width: 400px
; max-width: 680px
; max-width: 1000px
; margin: 2em auto 1em
; font-size: 1.2em
; line-height: 1.4em
@ -55,12 +55,12 @@ article h1 { text-align: left
article h1 a { color: #222
; text-decoration: underline
; border-bottom: none
; text-shadow: #999 1px 1px 5px
; text-shadow: #ccc 1px 1px 5px
; -webkit-transition: text-shadow 0.4s ease-in
}
article h1 a:hover { text-shadow: #990 1px 1px 8px
; color: #222
article h1 a:hover { text-shadow: #cc0 1px 1px 8px
; color: #000
}
article h2 { font-size: 1.8em
@ -90,6 +90,7 @@ time { color: #444
#prev { float: left }
#next { float: right }
#around br { clear: both }
.sep { text-align: center
; font-size: 2em

View file

@ -15,8 +15,6 @@
}
ul.nav li:after { content: '' }
#browse { display: none }
}
/* phones */
@ -26,7 +24,7 @@
/* common */
h1 { font-size: 2em
; margin-top: 1em
; margin-top: 0
}
h2 { font-size: 1em }
@ -46,13 +44,10 @@
footer { font-size: 1em }
#blog > header > h1 { margin-top: 0 }
#blog img { max-width: 100% }
nav#index { width: 90%
; min-width: auto
; max-width: auto
; min-width: 310px
; margin: 0.3em auto
; padding-bottom: 0.3em
}
@ -64,12 +59,13 @@
nav#index li { list-style-type: disc }
nav#index li > span.date { display: none }
#blog article h1 { font-size: 1.2em }
#blog article h1 { font-size: 1.6em
; margin-top: 0
}
article { width: 95%
; padding-left: 10px
; margin: 0 auto
; padding: 0 0 0 10px
article { min-width: 310px
; margin: 0
; padding: 1em 0.4em
; font-size: 0.8em
}
@ -79,11 +75,10 @@
.sep { font-size: 1em }
#around { width: 100%
; min-width: auto
; max-width: auto
; margin: 0 auto
#around { min-width: 310px
; margin: 0
; padding: 0 0.2em
; font-size: 0.8em
}
#prev, #next { padding: 0.3em 0
@ -122,6 +117,10 @@
#stats { font-size: 0.8em }
footer { margin: 0
; padding: 0.5em 0
}
}
/* landscape */

View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width">
<title>samhuri.net</title>
<link rel="icon" type="image/gif" href="assets/s.gif">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/style.min.css">
<!-- minifying CSS breaks the @media queries for iPhone and iPad, hrmph -->
<link rel="stylesheet" media="screen" href="assets/mobile.min.css">
<!--[if lt IE 7]>

View file

@ -23,12 +23,12 @@
{{{article}}}
<div id="around">
{{#previous}}
<a id="prev" href="{{url}}">&larr; {{title}}</a>
<a id="prev" href="{{filename}}">&larr; {{title}}</a>
{{/previous}}
{{#next}}
<a id="next" href="{{url}}">{{title}} &rarr;</a>
<a id="next" href="{{filename}}">{{title}} &rarr;</a>
{{/next}}
<br style="clear:both">
<br>
</div>
{{#comments}}
<p id="need-js" align="center"><strong>(discussion requires JavaScript)</strong></p>

View file

@ -16,12 +16,12 @@
{{{article}}}
<div id="around">
{{#previous}}
<a id="prev" href="{{url}}">&larr; {{title}}</a>
<a id="prev" href="{{filename}}">&larr; {{title}}</a>
{{/previous}}
{{#next}}
<a id="next" href="{{url}}">{{title}} &rarr;</a>
<a id="next" href="{{filename}}">{{title}} &rarr;</a>
{{/next}}
<br style="clear:both">
<br>
</div>
{{#comments}}
<p id="need-js" align="center"><strong>(discussion requires JavaScript)</strong></p>