diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/mobile.css | 46 | ||||
-rw-r--r-- | css/reset.css | 62 | ||||
-rw-r--r-- | css/screen.css | 296 |
3 files changed, 404 insertions, 0 deletions
diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 0000000..532c573 --- /dev/null +++ b/css/mobile.css @@ -0,0 +1,46 @@ +@media only screen and (max-device-width: 480px) { + div#aside { + display: none; + position: relative; + height: auto; } + + div#mobilemenu { + display: block; + clear: both; + overflow: auto; + vertical-align: center; + background: #eee; + border-bottom: 3px solid #333333; + margin-bottom: 1em; } + div#mobilemenu a { + background: #fff; + font-size: 1.2em; + width: 25%; + padding: 10px; + margin: 5px; + float: left; + -moz-border-radius: 10px; + border-radius: 10px; + text-align: center; } + + div#page { + display: block; + float: none; + clear: both; + padding: 1em; } + div#page p { + width: auto; } + + div#frame { + width: auto; } + + div#logo { + display: none; } + + ul.archive li { + margin-bottom: 0.5em; } + ul.archive li a { + padding: 10px; } + + p.back a { + padding: 5px; } } diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..bf12609 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,62 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0b1 | 201101 + NOTE: WORK IN PROGRESS + USE WITH CAUTION AND TEST WITH ABANDON */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define visible focus styles! +:focus { + outline: ?????; +} */ + +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 0000000..b5ca818 --- /dev/null +++ b/css/screen.css @@ -0,0 +1,296 @@ +html, body { + font-family: "droid serif", Georgia, Gentium, Palatino, Goudy, "Book Antiqua", "Palatino Linotype", "Linux Libertine", "Times New Roman", serif; + font-size: 100%; + line-height: 1.3em; + color: #333; + background: #eeede5; } + +body { + margin: 0 auto; } + body .elephly { + background: #bdc0ac; } + +#page ul { + list-style: square outside; + margin-top: 1em; + margin-bottom: 1em; } + +div.time { + color: #9ba0a7; + margin-top: -0.6em; + margin-bottom: 0.6em; + font-size: 0.9em; + font-weight: normal; } + +img#logo { + border-radius: 1em; + width: 100%; + margin-bottom: 0.5em; } + +div#navigation { + position: fixed; + top: 0; + padding: 0.5em; + height: 100%; + width: 8em; + background: #fff; + border-left: 1px solid #cccccc; + border-right: 1px solid #cccccc; + font-family: "Droid Sans", Arial, sans-serif; } + div#navigation ul ul { + margin-left: 1em; + margin-bottom: 0.4em; } + div#navigation li { + width: 100%; + margin: 0; } + div#navigation li a { + padding: 4px; + display: block; + color: #389; + text-decoration: none; + border: none; } + div#navigation li a:visited { + color: #167; } + div#navigation li a:hover { + color: #fff; + background: #666; } + +div.figure { + float: right; + text-align: center; + background: #fff; + box-shadow: 0 0 0.4em 0 #888; + padding: 1em; + margin: 0.5em -4em 0.5em 1em; } + div#page div.figure p.caption { + width: auto; + text-align: center; + font-size: 0.8em; } + +h1 { + color: #000; + margin-bottom: .2em; + line-height: 1.5em; + display: block; + font-size: 1.9em; + font-weight: 300; + font-family: Georgia; } + +h1:first-child { + margin-top: 14px; } + +* + h1, * + h2 { + margin-top: .5em; } + +h2, h3 { + color: #333; + margin-bottom: 0.5em; + line-height: 1.05em; + clear: both; + letter-spacing: -0.04em; + font-size: 1.3em; + font-weight: 700; + font-family: "Droid Sans", Arial, sans-serif; } + +h3 { + font-size: 1.2em; } + +a { + color: #389; + text-decoration: none; + border-bottom: 1px dotted #eeede5; } + a:visited { + color: #167; } + a:hover { + background: #eeede5; } + +strong { + font-weight: bold; } + +div#page { + width: 590px; + overflow: visible; + padding-left: 2em; + margin-bottom: 100px; + margin-left: 9em; } + div#page ul { + width: 36em; } + div#page p { + margin-bottom: 0; + text-align: justify; + width: 36em; + font-size: 1em; } + div#page p img, div#page p video { + display: inline; + float: right; + margin-left: 0.8em; + -moz-border-radius: 15px; + border-radius: 15px; } + div#page p.back { + margin-top: 1.5em; + width: 20%; } + div#page blockquote { + margin-left: 3em; + margin-top: 1em; + margin-bottom: 1em; + font-size: 0.9em; + font-style: italic; } + div#page blockquote p { + width: 80%; } + div#page img.full { + margin-top: 0.5em; + margin-bottom: 1em; + margin-left: 0; + margin-right: 0; + position: static; + float: none; + clear: both; + padding: 0; + display: block; + -moz-border-radius: 15px; + border-radius: 15px; } + div#page img.stretch { + width: 100%; } + div#page div.fineprint { + font-size: .7em; + text-indent: 0; + line-height: 1em; + margin-top: 1em; + padding-top: 1em; + border-top: 1px dotted #aaaaaa; + width: 100%; + color: #666; + clear: both; + display: block; } + div#page div.fineprint license { + display: block; + clear: both; } + div#page div.fineprint img { + display: block; + float: left; + margin-right: .5em; } + +p + p, div.figure + p { + text-indent: .5em; + margin-top: 0.2em; } + +img.flickr { + position: relative; + display: block; + margin: 0 auto; + width: 100%; } + +img.undecorated { + margin: 0; + padding: 0; } + +img.headline { + margin: 0; + margin-right: 1em; + padding: 0; + vertical-align: text-bottom; } + +div#columns { + margin-bottom: 1em; } + div#columns ul { + list-style: none outside none; + margin: 0; + float: left; + width: 32%; } + +span.code { + font-family: "Envy Code R", "Inconsolata", "Consolas", "Courier New", monospace; + font-size: 0.85em; + color: #111; + background: #dedede; + border-bottom: #888; + padding: .15em; } + +br { + clear: left; } + +em { + font-style: italic; } + +.item + .item { + margin-top: 1em; } + +ul.list { + list-style-type: square; } + ul.list li { + margin-bottom: .4em; } + ul.list li .description { + font-size: .8em; } + +table { + font-size: .8em; + line-height: 1em; + border-collapse: collapse; + margin-bottom: 1em; + clear: both; } + table th { + color: #999; + font-weight: 400; + padding-right: 1em; + border-right: 1px solid #ffaa00; + text-align: right; } + table td { + color: #777; + margin: 0; + padding: 0; + padding-left: 1em; + text-align: left; } + +div.download { + float: left; + width: 35%; + margin-right: 10%; + margin-bottom: 1.5em; } + div.download a { + display: block; + width: 100%; + text-align: center; + padding: 0.5em 0; + font-family: sans-serif; + background: #fff; + color: #888; + border-radius: 2em; + -moz-border-radius: 2em; } + div.download a:hover { + background: #888; + color: #fff; } + +h1.year { + border-bottom: 4px solid #eeede5; + width: 50%; } + +h2.month { + font-weight: normal; } + +ul.archive { + margin-left: 1em; } + +/* DISQUS */ +h1.disqus { + margin-top: 1em; + float: left; } + +div#disqus_thread { + border-top: 5px solid #999999; + padding: 0 1em 1em; + background: #eeede5; + margin-top: 1em; + -moz-border-radius: 0 0 15px 15px; + border-radius: 0 0 15px 15px; + font-size: 14px; } + div#disqus_thread ul { + width: auto; } + div#disqus_thread #dsq-global-toolbar { + margin: 0.5em 0; } + div#disqus_thread #dsq-reply { + margin-top: 0.5em; } + div#disqus_thread h3 { + clear: none; } + +#mobilemenu { + display: none; } |