sjs/samhuri.net
1
0
Fork 0
mirror of https://github.com/samsonjs/samhuri.net.git synced 2026-04-26 14:47:44 +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 ; list-style-type: none
} }
#index li { height: 1.4em }
.date { float: right } .date { float: right }
div#posts { width: 80% div#posts { width: 80%
@ -56,7 +54,6 @@ article:last-child { padding-bottom: 0
article h1 { text-align: left article h1 { text-align: left
; font-size: 2em ; font-size: 2em
; line-height: 1.1em
; font-weight: normal ; font-weight: normal
; color: #222 ; color: #222
; margin: 1em 0 ; margin: 1em 0
@ -89,17 +86,18 @@ time { color: #444
; font-size: 1.2em ; font-size: 1.2em
} }
ul#tags { width: 100% .tags { width: 100%
; padding-top: 1em ; padding-top: 1em
; border-top: solid 1px #ccc ; border-top: solid 1px #ccc
; text-align: center ; text-align: center
; display: none
} }
ul#tags li { display: inline .tags li { display: inline
; padding: 0.3em 1em ; padding: 0.3em 1em
} }
ul#tags a { color: #999 } .tags a { color: #999 }
.gist { font-size: 0.8em } .gist { font-size: 0.8em }

61
assets/mobile.css
View file

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

3
assets/style.css
View file

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