diff --git a/images/checker.png b/images/checker.png new file mode 100644 index 0000000..7a65b23 Binary files /dev/null and b/images/checker.png differ diff --git a/index.html b/index.html index c210153..4561525 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + @@ -16,18 +17,14 @@
-

statebins

-

U.S. State Cartogram Heatmaps in R; an alternative to choropleths of US States ala http://bit.ly/statebins

- +

statebins

+

U.S. State Cartogram Heatmaps in R; an alternative to choropleths of US States ala http://bit.ly/statebins

+

View the Project on GitHub hrbrmstr/statebins

- -

This project is maintained by hrbrmstr

- -

statebins is an alternative to choropleth maps for USA States

@@ -37,90 +34,89 @@

-TODO

+ + +

+TODO

-News

+ + +

+News

-Installation

+ + +

+Installation

-
devtools::install_github("hrbrmstr/statebins")
-
+
devtools::install_github("hrbrmstr/statebins")

-Usage

+Usage

All of the following examples use the WaPo data. It looks like the columns they use are scaled data and I didn't take the time to figure out what they did, so the final figure just mimics their output (including the non-annotated legend).

-
library(statebins)
+
library(statebins)
 
-# current verison
-packageVersion("statebins")
-
+# current verison +packageVersion("statebins")
## [1] '1.0'
 
-
# the original wapo data
+
# the original wapo data
 
-dat <- read.csv("http://www.washingtonpost.com/wp-srv/special/business/states-most-threatened-by-trade/states.csv?cache=1", stringsAsFactors=FALSE)
+dat <- read.csv("http://www.washingtonpost.com/wp-srv/special/business/states-most-threatened-by-trade/states.csv?cache=1", stringsAsFactors=FALSE)
 
-gg <- statebins(dat, "state", "avgshare94_00", breaks=4, 
-                labels=c("0-1", "1-2", "2-3", "3-4"),
-                legend_title="Share of workforce with jobs lost or threatened by trade", font_size=3, 
-                brewer_pal="Blues", text_color="black", 
-                plot_title="1994-2000", title_position="bottom")
+gg <- statebins(dat, "state", "avgshare94_00", breaks=4, 
+                labels=c("0-1", "1-2", "2-3", "3-4"),
+                legend_title="Share of workforce with jobs lost or threatened by trade", font_size=3, 
+                brewer_pal="Blues", text_color="black", 
+                plot_title="1994-2000", title_position="bottom")
 
-gg
-
+gg
-

plot of chunk unnamed-chunk-3

+

plot of chunk unnamed-chunk-3

-
# continuous scale, legend on top
+
# continuous scale, legend on top
 
-gg2 <- statebins_continuous(dat, "state", "avgshare01_07",
-                            legend_title="Share of workforce with jobs lost or threatened by trade", legend_position="top",
-                            brewer_pal="OrRd", text_color="black", font_size=3, 
-                            plot_title="2001-2007", title_position="bottom")
+gg2 <- statebins_continuous(dat, "state", "avgshare01_07",
+                            legend_title="Share of workforce with jobs lost or threatened by trade", legend_position="top",
+                            brewer_pal="OrRd", text_color="black", font_size=3, 
+                            plot_title="2001-2007", title_position="bottom")
 
-gg2
-
+gg2
-

plot of chunk unnamed-chunk-3

+

plot of chunk unnamed-chunk-3

-
# continuous scale, no legend
+
# continuous scale, no legend
 
-gg3 <- statebins_continuous(dat, "state", "avgshare08_12",
-                            legend_title="States", legend_position="none",
-                            brewer_pal="Purples", text_color="black", font_size=3, 
-                            plot_title="2008-2012", title_position="bottom")
+gg3 <- statebins_continuous(dat, "state", "avgshare08_12",
+                            legend_title="States", legend_position="none",
+                            brewer_pal="Purples", text_color="black", font_size=3, 
+                            plot_title="2008-2012", title_position="bottom")
 
-gg3
-
+gg3
-

plot of chunk unnamed-chunk-3

+

plot of chunk unnamed-chunk-3

-
# or, more like the one in the WaPo article; i might be picking the wrong columns here. it's just for an example
+
# or, more like the one in the WaPo article; i might be picking the wrong columns here. it's just for an example
 
-sb <- function(col, title) {
-  statebins(dat, "state",col, brewer_pal="Blues", text_color="black", legend_position="none", font_size=3, plot_title=title, breaks=4, labels=1:4)
-}
-
+sb <- function(col, title) { + statebins(dat, "state",col, brewer_pal="Blues", text_color="black", legend_position="none", font_size=3, plot_title=title, breaks=4, labels=1:4) +}
-
# cheating and using <table> to arrange them below and also making a WaPo-like legend, 
-# since mucking with grid graphics margins/padding was not an option time-wise at the moment
+
# cheating and using <table> to arrange them below and also making a WaPo-like legend, 
+# since mucking with grid graphics margins/padding was not an option time-wise at the moment
 
-sb("avgshare94_00", "1994-2000")
-sb("avgshare01_07", "2001-2007")
-sb("avgshare08_12", "2008-2012")
-
+sb("avgshare94_00", "1994-2000") +sb("avgshare01_07", "2001-2007") +sb("avgshare08_12", "2008-2012")
@@ -129,60 +125,64 @@ sb("avgshare08_12"

-img

And, we'll throw in a gratuitous animation for good measure:

+img + -
# data set from StatsAmerica - http://www.statsamerica.org/profiles/sip_index.html
+

And, we'll throw in a gratuitous animation for good measure:

-# median household income from the ACS survey -miacs <- read.csv("http://dds.ec/data/median-income-acs.csv", header=TRUE, stringsAsFactors=FALSE) +
# data set from StatsAmerica - http://www.statsamerica.org/profiles/sip_index.html
 
-# generate frames based on year
-sapply(unique(miacs$year), function(year) {
+# median household income from the ACS survey
+miacs <- read.csv("http://dds.ec/data/median-income-acs.csv", header=TRUE, stringsAsFactors=FALSE)
 
-  png(file=sprintf("tmp/household%d.png", year),
-      type="quartz", antialias="subpixel", width=800, height=600)
+# generate frames based on year
+sapply(unique(miacs$year), function(year) {
 
-  rng <- floor(range(miacs[miacs$year==year,]$mh_inc))
+  png(file=sprintf("tmp/household%d.png", year),
+      type="quartz", antialias="subpixel", width=800, height=600)
 
-  ggtmp <- statebins(miacs[miacs$year==year,], "state", "mh_inc",
-                   legend_title="States", legend_position="none",
-                   brewer_pal="Greens", text_color="black", font_size=3,
-                   plot_title=sprintf("Median Household Income (ACS) %d\n$%s - $%s", year, comma(rng[1]), comma(rng[2])), title_position="top")
+  rng <- floor(range(miacs[miacs$year==year,]$mh_inc))
 
-  print(ggtmp)
+  ggtmp <- statebins(miacs[miacs$year==year,], "state", "mh_inc",
+                   legend_title="States", legend_position="none",
+                   brewer_pal="Greens", text_color="black", font_size=3,
+                   plot_title=sprintf("Median Household Income (ACS) %d\n$%s - $%s", year, comma(rng[1]), comma(rng[2])), title_position="top")
 
-  dev.off()
+  print(ggtmp)
 
-})
+  dev.off()
 
-# animate them with ImageMagick
-system("convert -background white -alpha remove -layers OptimizePlus -delay 150 tmp/*.png -loop 1 tmp/household.gif")
-
+}) + +# animate them with ImageMagick +system("convert -background white -alpha remove -layers OptimizePlus -delay 150 tmp/*.png -loop 1 tmp/household.gif")

-img

-Test Results

+img + + +

+Test Results

-
library(statebins)
-library(testthat)
+
library(statebins)
+library(testthat)
 
-date()
-
+date()
## [1] "Tue Aug 26 17:53:56 2014"
 
-
test_dir("tests/")
-
+
test_dir("tests/")
## basic functionality :
 
-
+ - + - + \ No newline at end of file diff --git a/stylesheets/pygment_trac.css b/stylesheets/pygment_trac.css index c6a6452..1926cfd 100644 --- a/stylesheets/pygment_trac.css +++ b/stylesheets/pygment_trac.css @@ -1,69 +1,60 @@ -.highlight { background: #ffffff; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .hll { background-color: #49483e } +.highlight { background: #3A3C42; color: #f8f8f2 } +.highlight .c { color: #75715e } /* Comment */ +.highlight .err { color: #960050; background-color: #1e0010 } /* Error */ +.highlight .k { color: #66d9ef } /* Keyword */ +.highlight .l { color: #ae81ff } /* Literal */ +.highlight .n { color: #f8f8f2 } /* Name */ +.highlight .o { color: #f92672 } /* Operator */ +.highlight .p { color: #f8f8f2 } /* Punctuation */ +.highlight .cm { color: #75715e } /* Comment.Multiline */ +.highlight .cp { color: #75715e } /* Comment.Preproc */ +.highlight .c1 { color: #75715e } /* Comment.Single */ +.highlight .cs { color: #75715e } /* Comment.Special */ .highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ - -.type-csharp .highlight .k { color: #0000FF } -.type-csharp .highlight .kt { color: #0000FF } -.type-csharp .highlight .nf { color: #000000; font-weight: normal } -.type-csharp .highlight .nc { color: #2B91AF } -.type-csharp .highlight .nn { color: #000000 } -.type-csharp .highlight .s { color: #A31515 } -.type-csharp .highlight .sc { color: #A31515 } +.highlight .kc { color: #66d9ef } /* Keyword.Constant */ +.highlight .kd { color: #66d9ef } /* Keyword.Declaration */ +.highlight .kn { color: #f92672 } /* Keyword.Namespace */ +.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ +.highlight .kr { color: #66d9ef } /* Keyword.Reserved */ +.highlight .kt { color: #66d9ef } /* Keyword.Type */ +.highlight .ld { color: #e6db74 } /* Literal.Date */ +.highlight .m { color: #ae81ff } /* Literal.Number */ +.highlight .s { color: #e6db74 } /* Literal.String */ +.highlight .na { color: #a6e22e } /* Name.Attribute */ +.highlight .nb { color: #f8f8f2 } /* Name.Builtin */ +.highlight .nc { color: #a6e22e } /* Name.Class */ +.highlight .no { color: #66d9ef } /* Name.Constant */ +.highlight .nd { color: #a6e22e } /* Name.Decorator */ +.highlight .ni { color: #f8f8f2 } /* Name.Entity */ +.highlight .ne { color: #a6e22e } /* Name.Exception */ +.highlight .nf { color: #a6e22e } /* Name.Function */ +.highlight .nl { color: #f8f8f2 } /* Name.Label */ +.highlight .nn { color: #f8f8f2 } /* Name.Namespace */ +.highlight .nx { color: #a6e22e } /* Name.Other */ +.highlight .py { color: #f8f8f2 } /* Name.Property */ +.highlight .nt { color: #f92672 } /* Name.Tag */ +.highlight .nv { color: #f8f8f2 } /* Name.Variable */ +.highlight .ow { color: #f92672 } /* Operator.Word */ +.highlight .w { color: #f8f8f2 } /* Text.Whitespace */ +.highlight .mf { color: #ae81ff } /* Literal.Number.Float */ +.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ +.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ +.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ +.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ +.highlight .sc { color: #e6db74 } /* Literal.String.Char */ +.highlight .sd { color: #e6db74 } /* Literal.String.Doc */ +.highlight .s2 { color: #e6db74 } /* Literal.String.Double */ +.highlight .se { color: #ae81ff } /* Literal.String.Escape */ +.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ +.highlight .si { color: #e6db74 } /* Literal.String.Interpol */ +.highlight .sx { color: #e6db74 } /* Literal.String.Other */ +.highlight .sr { color: #e6db74 } /* Literal.String.Regex */ +.highlight .s1 { color: #e6db74 } /* Literal.String.Single */ +.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ +.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ +.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ +.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ +.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/stylesheets/styles.css b/stylesheets/styles.css index c2c94b4..466b9d6 100644 --- a/stylesheets/styles.css +++ b/stylesheets/styles.css @@ -1,421 +1,356 @@ -@import url(https://fonts.googleapis.com/css?family=Arvo:400,700,400italic); - -/* MeyerWeb Reset */ - -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, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - vertical-align: baseline; +@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); +html { + background: #6C7989; + background: #6c7989 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6c7989), color-stop(100%, #434b55)) fixed; + background: #6c7989 -webkit-linear-gradient(#6c7989, #434b55) fixed; + background: #6c7989 -moz-linear-gradient(#6c7989, #434b55) fixed; + background: #6c7989 -o-linear-gradient(#6c7989, #434b55) fixed; + background: #6c7989 -ms-linear-gradient(#6c7989, #434b55) fixed; + background: #6c7989 linear-gradient(#6c7989, #434b55) fixed; } - -/* Base text styles */ - body { - padding:10px 50px 0 0; - font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - color: #232323; - background-color: #FBFAF7; - margin: 0; - line-height: 1.8em; - -webkit-font-smoothing: antialiased; - -} - -h1, h2, h3, h4, h5, h6 { - color:#232323; - margin:36px 0 10px; + padding: 50px 0; + margin: 0; + font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #555; + font-weight: 300; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy82LzEygrTcTAAAAFRJREFUSIljfPDggZRf5RIGGNjUHsNATz6jXmSL1Kb2GLiAX+USBnrymRgGGDCORgFmoNAXjEbBaBSMRsFoFIxGwWgUjEbBaBSMRsFoFIxGwWgUAABYNujumib3wAAAAABJRU5ErkJggg==') fixed; } -p, ul, ol, table, dl { - margin:0 0 22px; +.wrapper { + width: 640px; + margin: 0 auto; + background: #DEDEDE; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -ms-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; } -h1, h2, h3 { - font-family: Arvo, Monaco, serif; - line-height:1.3; - font-weight: normal; +header, section, footer { + display: block; } -h1,h2, h3 { - display: block; - border-bottom: 1px solid #ccc; - padding-bottom: 5px; +a { + color: #069; + text-decoration: none; } -h1 { - font-size: 30px; +p { + margin: 0 0 20px; + padding: 0; } -h2 { - font-size: 24px; +strong { + color: #222; + font-weight: 700; } -h3 { - font-size: 18px; +header { + -webkit-border-radius: 8px 8px 0 0; + -moz-border-radius: 8px 8px 0 0; + -ms-border-radius: 8px 8px 0 0; + -o-border-radius: 8px 8px 0 0; + border-radius: 8px 8px 0 0; + background: #C6EAFA; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ddfbfc), color-stop(100%, #c6eafa)); + background: -webkit-linear-gradient(#ddfbfc, #c6eafa); + background: -moz-linear-gradient(#ddfbfc, #c6eafa); + background: -o-linear-gradient(#ddfbfc, #c6eafa); + background: -ms-linear-gradient(#ddfbfc, #c6eafa); + background: linear-gradient(#ddfbfc, #c6eafa); + position: relative; + padding: 15px 20px; + border-bottom: 1px solid #B2D2E1; } - -h4, h5, h6 { - font-family: Arvo, Monaco, serif; - font-weight: 700; +header h1 { + margin: 0; + padding: 0; + font-size: 24px; + line-height: 1.2; + color: #069; + text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0; } - -a { - color:#C30000; - font-weight:200; - text-decoration:none; +header.without-description h1 { + margin: 10px 0; } - -a:hover { - text-decoration: underline; +header p { + margin: 0; + color: #61778B; + width: 300px; + font-size: 13px; } - -a small { - font-size: 12px; +header p.view { + display: none; + font-weight: 700; + text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0; + -webkit-font-smoothing: antialiased; } - -em { - font-style: italic; +header p.view a { + color: #06c; } - -strong { - font-weight:700; +header p.view small { + font-weight: 400; } - -ul { - list-style: inside; - padding-left: 25px; -} - -ol { - list-style: decimal inside; - padding-left: 20px; -} - -blockquote { +header ul { margin: 0; - padding: 0 0 0 20px; - font-style: italic; -} - -dl, dt, dd, dl p { - font-color: #444; + padding: 0; + list-style: none; + position: absolute; + z-index: 1; + right: 20px; + top: 20px; + height: 38px; + padding: 1px 0; + background: #5198DF; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #77b9fb), color-stop(100%, #3782cd)); + background: -webkit-linear-gradient(#77b9fb, #3782cd); + background: -moz-linear-gradient(#77b9fb, #3782cd); + background: -o-linear-gradient(#77b9fb, #3782cd); + background: -ms-linear-gradient(#77b9fb, #3782cd); + background: linear-gradient(#77b9fb, #3782cd); + border-radius: 5px; + -webkit-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0; + -moz-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0; + box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0; + width: auto; +} +header ul:before { + content: ''; + position: absolute; + z-index: -1; + left: -5px; + top: -4px; + right: -5px; + bottom: -6px; + background: rgba(0, 0, 0, 0.1); + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -ms-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0; + box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0; +} +header ul li { + width: 79px; + float: left; + border-right: 1px solid #3A7CBE; + height: 38px; +} +header ul li.single { + border: none; } - -dl dt { - font-weight: bold; +header ul li + li { + width: 78px; + border-left: 1px solid #8BBEF3; } - -dl dd { - padding-left: 20px; - font-style: italic; +header ul li + li + li { + border-right: none; + width: 79px; } - -dl p { - padding-left: 20px; - font-style: italic; +header ul a { + line-height: 1; + font-size: 11px; + color: #fff; + color: rgba(255, 255, 255, 0.8); + display: block; + text-align: center; + font-weight: 400; + padding-top: 6px; + height: 40px; + text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0; } - -hr { - border:0; - background:#ccc; - height:1px; - margin:0 0 24px; +header ul a strong { + font-size: 14px; + display: block; + color: #fff; + -webkit-font-smoothing: antialiased; } -/* Images */ - -img { +section { + padding: 15px 20px; + font-size: 15px; + border-top: 1px solid #fff; + background: -webkit-gradient(linear, 50% 0%, 50% 700, color-stop(0%, #fafafa), color-stop(100%, #dedede)); + background: -webkit-linear-gradient(#fafafa, #dedede 700px); + background: -moz-linear-gradient(#fafafa, #dedede 700px); + background: -o-linear-gradient(#fafafa, #dedede 700px); + background: -ms-linear-gradient(#fafafa, #dedede 700px); + background: linear-gradient(#fafafa, #dedede 700px); + -webkit-border-radius: 0 0 8px 8px; + -moz-border-radius: 0 0 8px 8px; + -ms-border-radius: 0 0 8px 8px; + -o-border-radius: 0 0 8px 8px; + border-radius: 0 0 8px 8px; position: relative; - margin: 0 auto; - max-width: 650px; - padding: 5px; - margin: 10px 0 32px 0; - border: 1px solid #ccc; } -p img { - display: inline; - margin: 0; +h1, h2, h3, h4, h5, h6 { + color: #222; padding: 0; - vertical-align: middle; - text-align: center; - border: none; + margin: 0 0 20px; + line-height: 1.2; } -/* Code blocks */ - -code, pre { - font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; - color:#000; - font-size:14px; +p, ul, ol, table, pre, dl { + margin: 0 0 20px; } -pre { - padding: 4px 12px; - background: #FDFEFB; - border-radius:4px; - border:1px solid #D7D8C8; - overflow: auto; - overflow-y: hidden; - margin-bottom: 32px; +h1, h2, h3 { + line-height: 1.1; } - -/* Tables */ - -table { - width:100%; +h1 { + font-size: 28px; } -table { - border: 1px solid #ccc; - margin-bottom: 32px; - text-align: left; - } - -th { - font-family: 'Arvo', Helvetica, Arial, sans-serif; - font-size: 18px; - font-weight: normal; - padding: 10px; - background: #232323; - color: #FDFEFB; - } - -td { - padding: 10px; - background: #ccc; - } - - -/* Wrapper */ -.wrapper { - width:960px; +h2 { + color: #393939; } - -/* Header */ - -header { - background-color: #171717; - color: #FDFDFB; - width:170px; - float:left; - position:fixed; - border: 1px solid #000; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-topright: 4px; - -moz-border-radius-bottomright: 4px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - padding: 34px 25px 22px 50px; - margin: 30px 25px 0 0; - -webkit-font-smoothing: antialiased; +h3, h4, h5, h6 { + color: #494949; } -p.header { - font-size: 16px; +blockquote { + margin: 0 -20px 20px; + padding: 15px 20px 1px 40px; + font-style: italic; + background: #ccc; + background: rgba(0, 0, 0, 0.06); + color: #222; } -h1.header { - font-family: Arvo, sans-serif; - font-size: 30px; - font-weight: 300; - line-height: 1.3em; - border-bottom: none; - margin-top: 0; +img { + max-width: 100%; } - -h1.header, a.header, a.name, header a{ - color: #fff; +code, pre { + font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; + color: #333; + font-size: 12px; + overflow-x: auto; } -a.header { - text-decoration: underline; +pre { + padding: 20px; + background: #3A3C42; + color: #f8f8f2; + margin: 0 -20px 20px; } - -a.name { - white-space: nowrap; +pre code { + color: #f8f8f2; } - -header ul { - list-style:none; - padding:0; +li pre { + margin-left: -60px; + padding-left: 60px; } -header li { - list-style-type: none; - width:132px; - height:15px; - margin-bottom: 12px; - line-height: 1em; - padding: 6px 6px 6px 7px; - - background: #AF0011; - background: -moz-linear-gradient(top, #AF0011 0%, #820011 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); - background: -webkit-linear-gradient(top, #AF0011 0%,#820011 100%); - background: -o-linear-gradient(top, #AF0011 0%,#820011 100%); - background: -ms-linear-gradient(top, #AF0011 0%,#820011 100%); - background: linear-gradient(top, #AF0011 0%,#820011 100%); - - border-radius:4px; - border:1px solid #0D0D0D; - - -webkit-box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1); - box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1); - +table { + width: 100%; + border-collapse: collapse; } -header li:hover { - background: #C3001D; - background: -moz-linear-gradient(top, #C3001D 0%, #950119 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); - background: -webkit-linear-gradient(top, #C3001D 0%,#950119 100%); - background: -o-linear-gradient(top, #C3001D 0%,#950119 100%); - background: -ms-linear-gradient(top, #C3001D 0%,#950119 100%); - background: linear-gradient(top, #C3001D 0%,#950119 100%); +th, td { + text-align: left; + padding: 5px 10px; + border-bottom: 1px solid #aaa; } -a.buttons { - -webkit-font-smoothing: antialiased; - background: url(../images/arrow-down.png) no-repeat; - font-weight: normal; - text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0; - padding: 2px 2px 2px 22px; - height: 30px; +dt { + color: #222; + font-weight: 700; } -a.github { - background: url(../images/octocat-small.png) no-repeat 1px; +th { + color: #222; } -a.buttons:hover { - color: #fff; - text-decoration: none; +small { + font-size: 11px; } - -/* Section - for main page content */ - -section { - width:650px; - float:right; - padding-bottom:50px; +hr { + border: 0; + background: #aaa; + height: 1px; + margin: 0 0 20px; } - -/* Footer */ - footer { - width:170px; - float:left; - position:fixed; - bottom:10px; - padding-left: 50px; + width: 640px; + margin: 0 auto; + padding: 20px 0 0; + color: #ccc; + overflow: hidden; +} +footer a { + color: #fff; + font-weight: bold; +} +footer p { + float: left; +} +footer p + p { + float: right; } -@media print, screen and (max-width: 960px) { - - div.wrapper { - width:auto; - margin:0; - } - - header, section, footer { - float:none; - position:static; - width:auto; +@media print, screen and (max-width: 740px) { + body { + padding: 0; } - footer { - border-top: 1px solid #ccc; - margin:0 84px 0 50px; - padding:0; - } - - header { - padding-right:320px; + .wrapper { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + width: 100%; } - section { - padding:20px 84px 20px 50px; - margin:0 0 20px; + footer { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + padding: 20px; + width: auto; } - - header a small { - display:inline; + footer p { + float: none; + margin: 0; } - - header ul { - position:absolute; - right:130px; - top:84px; + footer p + p { + float: none; } } - -@media print, screen and (max-width: 720px) { - body { - word-wrap:break-word; - } - - header { - padding:10px 20px 0; - margin-right: 0; - } - - section { - padding:10px 0 10px 20px; - margin:0 0 30px; +@media print, screen and (max-width:580px) { + header ul { + display: none; } - footer { - margin: 0 0 0 30px; - } - - header ul, header p.view { - position:static; + header p.view { + display: block; } -} - -@media print, screen and (max-width: 480px) { - header ul li.download { - display:none; + header p { + width: 100%; } - - footer { - margin: 0 0 0 20px; - } - - footer a{ - display:block; - } - } - @media print { - body { - padding:0.4in; - font-size:12pt; - color:#444; + header p.view a small:before { + content: 'at http://github.com/'; } -} \ No newline at end of file +}