samhuri.net/assets/mobile.css

155 lines
3.4 KiB
CSS

/* iPhone and iPad */
@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
}
ul.nav li:after { content: '' }
#browse { display: none }
}
@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
; margin-top: 1em
}
h2 { font-size: 1em }
#breadcrumbs { font-size: 0.8em }
#show-posts { margin-top: 1em
; font-size: 0.8em
}
#forkme { display: none }
ul.nav li { font-size: 1.4em }
td { font-size: 1em
; line-height: 1.1em
}
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
; margin: 0.3em auto
; padding-bottom: 0.3em
}
nav#index ul { font-size: 0.8em
; padding-left: 2em
}
nav#index li { list-style-type: disc }
nav#index li > span.date { display: none }
#blog article h1 { font-size: 1.2em }
div#posts { width: 100%
; margin: 0
; padding: 0
; border-left: none
; padding-left: 10px
}
article { margin: 0
; padding: 0
; font-size: 0.8em
}
.tags { margin: 0
; padding: 0
; display: none
}
.tags li { padding: 0.2em 0.3em }
time { font-size: 1.1em }
pre, .gist { font-size: 0.8em }
.sep { font-size: 1em }
#around { width: 100%
; min-width: auto
; max-width: auto
; 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
}
#stats { font-size: 0.8em }
}
/* iPhone and iPad landscape */
@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 (min-device-width: 768px) and (max-device-width: 1024px)
{
article > header > h1 { font-size: 1.8em }
}