sjs/samhuri.net
1
0
Fork 0
mirror of https://github.com/samsonjs/samhuri.net.git synced 2026-03-25 09:05:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tweak mobile styles, somewhat support the nexus one

Browse source
This commit is contained in:
Sami Samhuri 2011-11-26 19:13:17 -08:00
parent 490c56c5ad
commit 116fdff80b
3 changed files with 47 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/blog.css
View file

@ -33,8 +33,6 @@ h1 { margin: 0
; list-style-type: none
}
#index li { height: 1.4em }
.date { float: right }
div#posts { width: 80%
@ -56,7 +54,6 @@ article:last-child { padding-bottom: 0
article h1 { text-align: left
; font-size: 2em
; line-height: 1.1em
; font-weight: normal
; color: #222
; margin: 1em 0
@ -89,17 +86,18 @@ time { color: #444
; font-size: 1.2em
}
ul#tags { width: 100%
.tags { width: 100%
; padding-top: 1em
; border-top: solid 1px #ccc
; text-align: center
; display: none
}
ul#tags li { display: inline
.tags li { display: inline
; padding: 0.3em 1em
}
ul#tags a { color: #999 }
.tags a { color: #999 }
.gist { font-size: 0.8em }

61
assets/mobile.css
View file

@ -1,13 +1,15 @@
/* iPhone and iPad */
@media only screen and (orientation:portrait) and (device-height:1024px),
only screen and (device-width:320px)
@media only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px),
only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (max-device-width: 800px)
{
ul.nav { padding: 0.5em
; width: 60%
; max-width: 600px
}
ul.nav li { display: block
; font-size: 1.5em
; line-height: 1.8em
@ -18,9 +20,10 @@
#browse { display: none }
}
/* iPhone */
@media only screen and (max-device-width:480px) {
@media only screen and (max-device-width: 480px), /* iPhone */
only screen and (min-device-pixel-ratio: 1.5), /* iPhone (retina) */
only screen and (max-device-width: 800px) /* Nexus One */
{
/* common */
h1 { font-size: 2em
@ -30,9 +33,13 @@
#breadcrumbs { font-size: 0.8em }
#forkme { display: none }
#show-posts { margin-top: 1em
; font-size: 0.8em
}
ul.nav li { font-size: 1.2em }
#forkme { display: none }
ul.nav li { font-size: 1.4em }
td { font-size: 1em
; line-height: 1.1em
@ -45,17 +52,23 @@
#blog img { max-width: 100% }
nav#index { width: 90%
; min-width: auto
; max-width: auto
; margin: 0.3em auto
; padding-bottom: 0.3em
}
nav#index ul { font-size: 0.8em }
nav#index ul { font-size: 0.8em
; padding-left: 2em
}
nav#index li > span { display: none }
nav#index li { list-style-type: disc }
nav#index li > span.date { display: none }
#blog article h1 { font-size: 1.2em }
div#posts { margin: 0
div#posts { width: 100%
; margin: 0
; padding: 0
; border-left: none
; padding-left: 10px
@ -66,19 +79,22 @@
; font-size: 0.8em
}
ul#tags { margin: 0
.tags { margin: 0
; padding: 0
; display: none
; display: none
}
ul#tags li { padding: 0.2em 0.3em }
.tags li { padding: 0.2em 0.3em }
time { font-size: 1.1em }
pre, .gist { font-size: 0.8em }
.sep { font-size: 1em }
#around { min-width: 300px
; max-width: 400px
#around { width: 100%
; min-width: auto
; max-width: auto
; margin: 0 auto
; padding: 0 0.2em
}
@ -116,17 +132,24 @@
; border-left: none
; font-size: 1em
}
#stats { font-size: 0.8em }
}
/* iPhone and iPad landscape */
@media only screen and (orientation: landscape) and (device-width:768px),
only screen and (orientation: landscape) and (device-width:320px) {
@media only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px),
only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (orientation: landscape) and (min-device-pixel-ratio: 1.5),
only screen and (orientation: landscape) and (max-device-width: 800px)
{
body { font-size: 0.7em }
}
/* iPad portrait */
@media only screen and (orientation:portrait) and (device-height:1024px) {
@media only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px)
{
article > header > h1 { font-size: 1.8em }
}

3
assets/style.css
View file

@ -1,6 +1,6 @@
body { background-color: #f7f7f7
; color: #222
; font-family: 'DejaVu Serif', 'Hoefler Text', Georgia, serif
; font-family: 'Hoefler Text', Georgia, 'Roboto', serif
}
h1 { text-align: center
@ -62,7 +62,6 @@ ul.nav li a { padding: 5px
; text-decoration: none
; border-bottom: dashed 1px #0E539C
; text-shadow: #999 5px 5px 5px
; -webkit-transition: all 0.5s ease-out
}
ul.nav li a:visited { color: #227 }