sjs/samhuri.net
1
0
Fork 0
mirror of https://github.com/samsonjs/samhuri.net.git synced 2026-04-17 12:35:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix style for iPhone and iPad, separate mobile stylesheet

Browse source
This commit is contained in:
Sami Samhuri 2010-12-20 00:51:02 -08:00
parent 05feec0133
commit 7073eb7b96
10 changed files with 166 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/blog.css
View file

@ -1,12 +1,13 @@
body { background-color: #f7f7f7
; font-family: 'DejaVu Serif', 'xHoefler Text', Georgia, serif
; margin: 0
; padding: 0
}
body > header { display: block
; background-color: #a6bcdf
; border-bottom: solid 1em #eee
/* some browsers have trouble with 100% for the height so use em units :/ */
/* some browsers have trouble with 100% for the height so use em units :/ */
; -moz-border-bottom-left-radius: 500px 7em
; -webkit-border-bottom-left-radius: 500px 7em
; border-bottom-left-radius: 500px 7em
@ -224,23 +225,3 @@ footer a { border-bottom: none
; font-size: 1.3em
; text-decoration: none
}
/* iPhone */
@media only screen and (max-device-width:480px) {
h1 { font-size: 2em
; margin-top: 1em
}
h2 { font-size: 1em }
#breadcrumbs { font-size: 0.8em }
article { width: 80%
; min-width: 100px
; max-width: 800px
; padding-left: 1em
; padding-bottom: 3em
}
footer { font-size: 1em }
}

12
assets/blog.js
View file

@ -1,11 +1,17 @@
;(function() {
if (typeof console === 'undefined')
window.console = {}
if (typeof console.log !== 'function')
window.console.log = function(){}
if (typeof console.dir !== 'function')
window.console.dir = function(){}
var server = 'http://bohodev.net:8000/'
, getCommentsURL = function(post) { return server + 'comments/' + post }
, postCommentURL = function() { return server + 'comment' }
, countCommentsURL = function(post) { return server + 'count/' + post }
function getComments() {
console.log('*** getComments()')
SJS.request({uri: getCommentsURL(SJS.filename)}, function(err, request, body) {
if (err) {
$('#comments').text('derp')
@ -17,7 +23,7 @@
try {
data = JSON.parse(body)
} catch (e) {
console && console.log && console.log('not json -> ' + body)
console.log('not json -> ' + body)
}
comments = data.comments
if (comments.length) {
@ -38,7 +44,7 @@
try {
data = JSON.parse(body)
} catch (e) {
console && console.log && console.log('not json -> ' + body)
console.log('not json -> ' + body)
}
n = data.count
$('#sd').text(n > 0 ? 'show the discussion (' + n + ')' : 'start the discussion')

145
assets/mobile.css Normal file
View file

@ -0,0 +1,145 @@
/* iPhone and iPad */
@media only screen and (orientation:portrait) and (device-height:1024px),
only screen and (max-device-width:480px)
{
ul.nav { padding: 0.5em
; width: 80%
; max-width: 400px
}
ul.nav li { display: block
; font-size: 1.5em
; line-height: 1.6em
}
ul.nav li:after { content: '' }
ul#projects { width: 60%
; max-width: 600px
}
ul#projects li { display: block
; line-height: 1.8em
}
#browse { display: none }
}
/* iPhone */
@media only screen and (max-device-width:480px) {
/* common */
h1 { font-size: 2em
; margin-top: 1em
}
h2 { font-size: 1em }
#breadcrumbs { font-size: 0.8em }
#forkme { display: none }
ul.nav li { font-size: 1.2em }
td { font-size: 1em
; line-height: 1.1em
}
footer { font-size: 1em }
/* blog*/
#blog > header { border-bottom: solid 2px #eee
/* some browsers have trouble with 100% for the height so use em units :/ */
; -moz-border-bottom-left-radius: 200px 4em
; -webkit-border-bottom-left-radius: 200px 4em
; border-bottom-left-radius: 200px 4em
}
#blog > header > h1 { margin-top: 0 }
#blog img { max-width: 100% }
nav#index { width: 90%
; margin: 0.3em auto
; padding-bottom: 0.3em
}
nav#index ul { font-size: 0.8em }
nav#index li > span { display: none }
#blog article h1 { font-size: 1.2em }
#posts { min-width: 300px
; max-width: 900px
; margin: 0
; padding: 0
; border-left: none
; padding-left: 10px
}
article { width: 100%
; min-width: 100px
; max-width: 800px
; font-size: 0.8em
; margin: 0
; padding: 0
}
time { font-size: 1.1em }
.sep { font-size: 1em }
#around { min-width: 300px
; max-width: 900px
; margin: 0 auto
; padding: 0 0.2em
}
#prev, #next { padding: 0.3em 0
; font-size: 0.95em
}
#comment-stuff { padding: 0
; margin-top: 2em
}
#comments { width: 100% }
#comment-form { width: 90%
; margin: 0 auto
}
input[type=text],
textarea { font-size: 1.2em
; width: 95%
}
input[type=submit] { font-size: 1em }
/* proj */
#info { width: 70%
; padding: 0 1em
}
#info > div { clear: left
; width: 100%
; max-width: 100%
; padding: 0.5em 0.2em 1em
; border-left: none
; font-size: 1em
}
}
/* iPhone and iPad landscape */
@media only screen and (orientation: landscape) {
body { font-size: 0.7em }
}
/* iPad portrait */
@media only screen and (orientation:portrait) and (device-height:1024px) {
article > header > h1 { font-size: 1.8em }
}

14
assets/proj.css
View file

@ -43,20 +43,6 @@ h4 { margin: 0.5em 0 0.7em }
#info > br.clear { clear: both }
@media only screen and (max-device-width:480px) {
#info { width: 70%
; padding: 0 1em
}
#info > div { clear: left
; width: 100%
; max-width: 100%
; padding: 0.5em 0.2em 1em
; border-left: none
; font-size: 1em
}
}
#contributors-box a { line-height: 1.8em }

40
assets/style.css
View file

@ -117,43 +117,3 @@ td:nth-child(2) { padding: 0 10px }
; background-image: -moz-radial-gradient(center 45deg, circle contain, #ffa 0%, #f7f7f7 100%)
; font-size: 1.2em
}
/* iPhone and iPad */
@media only screen and (orientation:portrait) and (device-height:1024px),
only screen and (max-device-width:480px)
{
ul.nav ul { padding: 0.5em
; width: 70%
; max-width: 400px
}
ul.nav li { display: block
; font-size: 1.5em
; line-height: 1.6em
}
ul.nav li:after { content: '' }
}
/* iPhone */
@media only screen and (max-device-width:480px) {
h1 { font-size: 2em
; margin-top: 1em
}
h2 { font-size: 1em }
#breadcrumbs { font-size: 0.8em }
ul.nav li { font-size: 1.2em }
td { font-size: 1em
; line-height: 1.1em
}
footer { font-size: 1em }
#forkme { display: none }
}

2
index.html
View file

@ -5,6 +5,8 @@
<title>samhuri.net</title>
<link rel=icon type=image/gif href=assets/s.gif>
<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.css>
<!--[if lt IE 7]>
<link rel=stylesheet href=assets/ie6.min.css>
<![endif]-->

3
templates/blog/index.html
View file

@ -4,6 +4,7 @@
<title>sjs' blog</title>
<link rel=icon type=image/gif href=../assets/s.gif>
<link rel=stylesheet href=../assets/blog.min.css>
<link rel=stylesheet media=screen href=../assets/mobile.css>
<link rel=alternate type=application/rss+xml href=http://samhuri.net/blog/sjs.rss title="sjs' blog">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
<script>
@ -35,6 +36,7 @@ SJS.filename = "{{filename}}"
</script>
<script src=../assets/blog-all.min.js></script>
{{/comments}}
<body id=blog>
<header>
<h1><a href=index.html>sjs' blog</a></h1>
</header>
@ -102,3 +104,4 @@ SJS.filename = "{{filename}}"
<footer>
<a href=https://twitter.com/_sjs>@_sjs</a>
</footer>
</body>

3
templates/blog/post.html
View file

@ -4,6 +4,7 @@
<title>{{title}} :: samhuri.net</title>
<link rel=icon type=image/gif href=../assets/s.gif>
<link rel=stylesheet href=../assets/blog.min.css>
<link rel=stylesheet media=screen href=../assets/mobile.css>
<link rel=alternate type=application/rss+xml href=http://samhuri.net/blog/sjs.rss title="sjs' blog">
<script>
var _gaq = _gaq || [];
@ -25,6 +26,7 @@ SJS.filename = "{{filename}}"
</script>
<script src=../assets/blog-all.min.js></script>
{{/comments}}
<body id=blog>
<header>
<h1><a href=index.html>sjs' blog</a></h1>
</header>
@ -84,3 +86,4 @@ SJS.filename = "{{filename}}"
<footer>
<a href=https://twitter.com/_sjs>@_sjs</a>
</footer>
</body>

1
templates/proj/index.html
View file

@ -5,6 +5,7 @@
<title>projects :: samhuri.net</title>
<link rel=icon type=image/gif href=../assets/s.gif>
<link rel=stylesheet href=../assets/style.min.css>
<link rel=stylesheet media=screen href=../assets/mobile.css>
<!--[if IE 6]>
<link rel=stylesheet href=../assets/ie6.min.css>
<![endif]-->

1
templates/proj/proj/index.html
View file

@ -5,6 +5,7 @@
<title>{{name}} :: samhuri.net</title>
<link rel=icon type=image/gif href=../../assets/s.gif>
<link rel=stylesheet href=../../assets/proj-all.min.css>
<link rel=stylesheet media=screen href=../../assets/mobile.css>
<script>
var _gaq = _gaq || [];
_gaq.push( ['_setAccount', 'UA-214054-5']