samhuri.net/style.css
2010-11-28 23:10:13 -08:00

150 lines
3 KiB
CSS

body { background-color: #f7f7f7
; color: #222
; font-family: 'DejaVu Serif', 'Hoefler Text', Georgia, serif
}
h1 { text-align: center
; vertical-align: center
; font-size: 4em
; font-weight: normal
; margin: 0.8em 0 0.4em
; padding: 0
}
h2 { text-align: center
; vertical-align: center
; font-size: 2em
; font-weight: normal
; margin: 0.2em 0 1em
; padding: 0
}
a { color: #22a
; text-decoration: none
; border-bottom: dashed 1px #22a
}
a.img { border: none }
#breadcrumbs { font-size: 1.5em
; color: #222
; position: absolute
; top: 0.3em
; left: 0.3em
}
#breadcrumbs a { text-shadow: none
; color: #222
; border: none
; text-decoration: underline
}
ul { text-align: center
; margin: 0 auto
; padding: 1em
; border: solid 1px #ccc
; width: 90%
; max-width: 950px
; background-color: #fff
; -moz-border-radius: 20px
; -webkit-border-radius: 20px
; border-radius: 20px
/* ie searches for this path relative to the referencing file,
* not this file as any sane implementation would do.
*
* fuck ie
*/
; behavior: url(border-radius.htc)
; behavior: url(../border-radius.htc)
}
li { display: inline
; font-size: 1.6em
; margin: 0
; padding: 0
}
li:after { content: ' •' }
li:last-child:after { content: '' }
li.last:after { content: '' } /* fuck ie */
li a { padding: 5px
; text-shadow: #999 5px 5px 5px
}
li a:visited { color: #227 }
li a:hover,
li a:active { color: #000
; text-shadow: #aa7 5px 5px 5px
; border-bottom: dashed 1px #000
}
#sjs { text-align: center
; font-size: 1.2em
}
#sjs a { border-bottom: none }
#forkme { position: absolute
; top: 0
; right: 0
; border: none
}
#promote-js { margin-top: 3em
; text-align: center
}
#promote-js img { border: none }
td { font-size: 1.5em
; line-height: 1.6em
}
td:nth-child(2) { padding: 0 10px }
.highlight { background-image: -webkit-gradient(radial, 50% 50%, 5, 50% 50%, 15, from(#ffa), to(#f7f7f7))
; 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 { padding: 0.5em
; width: 70%
; max-width: 400px
}
li { display: block
; margin: 0.7em 0.7em 1em
; font-size: 1.5em
}
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 }
li { font-size: 1.2em }
td { font-size: 1em
; line-height: 1.1em
}
#sjs { font-size: 1em }
#forkme { display: none }
}