From f271110db4f7a42bd28ff9258598b2592a37e555 Mon Sep 17 00:00:00 2001 From: Jamie Mason Date: Mon, 11 Nov 2013 13:38:28 +0000 Subject: [PATCH] Add documentation site SASS. Issue #10627 https://github.com/ariya/phantomjs/issues/10627 --- css/main.css | 851 +++++++++++++++++++++++++++++++++++ sass/_base.scss | 79 ++++ sass/_community.scss | 48 ++ sass/_grid.scss | 211 +++++++++ sass/_masthead.scss | 29 ++ sass/_nav-list.scss | 49 ++ sass/_posts.scss | 47 ++ sass/_shift.scss | 11 + sass/_solarized-light.scss | 90 ++++ sass/home/_description.scss | 26 ++ sass/home/_example-code.scss | 28 ++ sass/home/_footer.scss | 11 + sass/home/_index.scss | 4 + sass/home/_introduction.scss | 67 +++ sass/main.scss | 40 ++ 15 files changed, 1591 insertions(+) create mode 100755 css/main.css create mode 100644 sass/_base.scss create mode 100644 sass/_community.scss create mode 100644 sass/_grid.scss create mode 100644 sass/_masthead.scss create mode 100644 sass/_nav-list.scss create mode 100644 sass/_posts.scss create mode 100644 sass/_shift.scss create mode 100644 sass/_solarized-light.scss create mode 100644 sass/home/_description.scss create mode 100644 sass/home/_example-code.scss create mode 100644 sass/home/_footer.scss create mode 100644 sass/home/_index.scss create mode 100644 sass/home/_introduction.scss create mode 100755 sass/main.scss diff --git a/css/main.css b/css/main.css new file mode 100755 index 00000000..0134e8a1 --- /dev/null +++ b/css/main.css @@ -0,0 +1,851 @@ +a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { + border: 0; + margin: 0; + padding: 0; + font-size: 100%; } + +html, body { + height: 100%; } + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + +b, strong { + font-weight: 700; } + +img { + color: transparent; + font-size: 0; + vertical-align: middle; + -ms-interpolation-mode: bicubic; } + +ol, ul { + list-style: none; } + +li { + display: list-item; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +th, td, caption { + font-weight: 400; + vertical-align: top; + text-align: left; } + +q { + quotes: none; } + +q:before, q:after { + content: ''; + content: none; } + +sub, sup, small { + font-size: 75%; } + +sub, sup { + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +svg { + overflow: hidden; } + +body { + min-width: 960px; } + +.grid { + margin-left: auto; + margin-right: auto; + width: 960px; } + +.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; } + +.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 { + position: relative; } + +.alpha { + margin-left: 0; } + +.omega { + margin-right: 0; } + +.grid .grid_1 { + width: 60px; } + +.grid .grid_2 { + width: 140px; } + +.grid .grid_3 { + width: 220px; } + +.grid .grid_4 { + width: 300px; } + +.grid .grid_5 { + width: 380px; } + +.grid .grid_6 { + width: 460px; } + +.grid .grid_7 { + width: 540px; } + +.grid .grid_8 { + width: 620px; } + +.grid .grid_9 { + width: 700px; } + +.grid .grid_10 { + width: 780px; } + +.grid .grid_11 { + width: 860px; } + +.grid .grid_12 { + width: 940px; } + +.grid .prefix_1 { + padding-left: 80px; } + +.grid .prefix_2 { + padding-left: 160px; } + +.grid .prefix_3 { + padding-left: 240px; } + +.grid .prefix_4 { + padding-left: 320px; } + +.grid .prefix_5 { + padding-left: 400px; } + +.grid .prefix_6 { + padding-left: 480px; } + +.grid .prefix_7 { + padding-left: 560px; } + +.grid .prefix_8 { + padding-left: 640px; } + +.grid .prefix_9 { + padding-left: 720px; } + +.grid .prefix_10 { + padding-left: 800px; } + +.grid .prefix_11 { + padding-left: 880px; } + +.grid .suffix_1 { + padding-right: 80px; } + +.grid .suffix_2 { + padding-right: 160px; } + +.grid .suffix_3 { + padding-right: 240px; } + +.grid .suffix_4 { + padding-right: 320px; } + +.grid .suffix_5 { + padding-right: 400px; } + +.grid .suffix_6 { + padding-right: 480px; } + +.grid .suffix_7 { + padding-right: 560px; } + +.grid .suffix_8 { + padding-right: 640px; } + +.grid .suffix_9 { + padding-right: 720px; } + +.grid .suffix_10 { + padding-right: 800px; } + +.grid .suffix_11 { + padding-right: 880px; } + +.grid .push_1 { + left: 80px; } + +.grid .push_2 { + left: 160px; } + +.grid .push_3 { + left: 240px; } + +.grid .push_4 { + left: 320px; } + +.grid .push_5 { + left: 400px; } + +.grid .push_6 { + left: 480px; } + +.grid .push_7 { + left: 560px; } + +.grid .push_8 { + left: 640px; } + +.grid .push_9 { + left: 720px; } + +.grid .push_10 { + left: 800px; } + +.grid .push_11 { + left: 880px; } + +.grid .pull_1 { + left: -80px; } + +.grid .pull_2 { + left: -160px; } + +.grid .pull_3 { + left: -240px; } + +.grid .pull_4 { + left: -320px; } + +.grid .pull_5 { + left: -400px; } + +.grid .pull_6 { + left: -480px; } + +.grid .pull_7 { + left: -560px; } + +.grid .pull_8 { + left: -640px; } + +.grid .pull_9 { + left: -720px; } + +.grid .pull_10 { + left: -800px; } + +.grid .pull_11 { + left: -880px; } + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + +.clearfix:before, .clearfix:after, .grid:before, .grid:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; } + +.clearfix:after, .grid:after { + clear: both; } + +.clearfix, .grid { + zoom: 1; } + +body { + font-family: 'Droid Sans','Lucida Grande',sans-serif; + line-height: 1.125em; + color: #444; } + +.masthead { + background: #43413e; + color: white; } + +.header { + height: 90px; } + +.nav-main { + text-align: right; + padding-top: 36px; } + +.nav-main li { + display: inline; } + +.nav-main a { + color: #e1e0dc; + text-decoration: none; + font-weight: 700; + text-transform: uppercase; + margin: 0 1em; } + +.nav-main a:hover { + color: white; } + +.community { + background: #e1e0dc; + color: #43413e; + text-align: center; + font-size: 1.125em; + padding: 1.5em 0; } + +.community h2 { + font-weight: 700; + display: inline-block; } + +.community ul { + display: inline; } + +.community li { + list-style: none; + display: inline-block; } + +.community a { + margin: 0 1.5em; + color: #43413e; + text-decoration: none; } + +.community a:hover { + color: #000; + text-decoration: underline; } + +.link-release, .link-ml, .link-bugs { + display: inline-block; + padding-left: 44px; + height: 36px; + line-height: 36px; + background: url(../img/icon-release.png) no-repeat 0 50%; } + +.link-ml { + background: url(../img/icon-ml.png) no-repeat 0 50%; } + +.link-bugs { + background: url(../img/icon-bugs.png) no-repeat 0 50%; } + +.intro-example { + border-radius: 9px; + background: #373633; } + +.intro-example pre { + margin: 18px; } + +.solarized { + color: #839496; } + +.solarized .object { + color: #b58900; } + +.solarized .function { + color: #268bd2; } + +.solarized .literal { + color: #29a197; } + +.solarized .comment { + color: #586e75; } + +.footer { + background: #2ecbd6; + color: #FFF; + padding: 18px 0; + font-size: .875em; + text-align: center; } + +.footer a { + color: white; } + +.intro { + padding: 36px 0; } + +.intro a { + color: white; } + +.intro h1 { + color: #FFF; + font-weight: 700; + font-size: 2.25em; + line-height: 1em; + text-shadow: 0 -1px 0 #000; + margin: 0 0 1em; } + +.intro .explanation { + margin: 1em 0 2em; + font-size: .875em; + color: #e1e0dc; } + +.intro .action a { + display: inline-block; + line-height: 54px; + color: #FFF; + font-size: 1.5em; + margin-right: 1em; } + +.btn-download { + text-decoration: none; + height: 54px; + padding: 0 1em; + border: 1px solid #004513; + border-radius: 4px; + background: #7da21a; + background: -moz-linear-gradient(top, #afe225 0, #7da21a 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #afe225), color-stop(100%, #7da21a)); + background: -webkit-linear-gradient(top, #afe225 0, #7da21a 100%); + background: -o-linear-gradient(top, #afe225 0, #7da21a 100%); + background: -ms-linear-gradient(top, #afe225 0, #7da21a 100%); + background: linear-gradient(top, #afe225 0, #7da21a 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afe225',endColorstr='#7da21a',GradientType=0); + font-weight: 700; + text-shadow: 0 -1px 0 #3d9700; + -webkit-box-shadow: inset 0 2px 0 0 #def67e, 0px 2px 5px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0 2px 0 0 #def67e, 0px 2px 5px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 2px 0 0 #def67e, 0px 2px 5px rgba(0, 0, 0, 0.2); } + +.btn-download:hover { + background: #97bd38; + background: -moz-linear-gradient(top, #bef038 0, #97bd38 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bef038), color-stop(100%, #97bd38)); + background: -webkit-linear-gradient(top, #bef038 0, #97bd38 100%); + background: -o-linear-gradient(top, #bef038 0, #97bd38 100%); + background: -ms-linear-gradient(top, #bef038 0, #97bd38 100%); + background: linear-gradient(top, #bef038 0, #97bd38 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bef038',endColorstr='#97bd38',GradientType=0); } + +.btn-download span { + font-weight: 400; } + +.description { + color: #43413e; + padding-bottom: 2em; } + +.description h2 { + color: #2ecbd6; + font-size: 2.25em; + font-weight: 700; + margin: 1.5em 0; + text-align: center; } + +.description h3 { + font-weight: 700; + text-transform: uppercase; } + +.description .feature { + font-size: 0.875em; } + +#feature-end { + text-align: center; + margin: 1.5em 0 0; } + +.shift { + display: table; + width: 100%; } + +/* Will display at the bottom. */ +.shift__down { + display: table-footer-group; } + +/* Will display at the top. */ +.shife__up { + display: table-header-group; } + +.post { + line-height: 1.5em; } + .post h1, .post h2, .post h3, .post h4 { + margin-bottom: 1em; } + .post p, .post ul, .post pre { + margin-bottom: 1.5em; } + .post h1 { + color: #C00; + font-size: 2.25em; + font-weight: 700; + text-align: center; } + .post h2 { + font-size: 150%; } + .post p { + line-height: 125%; } + .post ul { + line-height: 125%; + list-style-type: disc; + margin-left: 1em; } + .post li { + margin-left: 1em; + list-style-position: inside; } + +.col-4 { + -moz-column-count: 4; + -webkit-column-count: 4; + column-count: 4; } + +.col-3 > li { + display: block; } + +.nav-title, +.nav-up, +.nav-group, +.nav-group-label { + margin-bottom: 1em; } + +.nav-group { + white-space: nowrap; + overflow: hidden; } + +.nav-item-label { + border: 1px solid #DDD; + display: inline-block; + font-size: 10px; + text-align: center; + width: 2em; + border-radius: 10px; } + +.nav-item-property > .nav-item-label { + background-color: #43413E; + color: #2ECBD6; } + +.nav-item-method > .nav-item-label { + background-color: #2ECBD6; + color: #000; } + +.nav-item-handler > .nav-item-label { + background: #E1E0DC; + color: #43413E; } + +.nav-item-name { + color: #000; } + +.nav-title, +.current > .nav-item-name { + font-weight: bold; + color: #cc0000; } + +.nav-group-end { + margin-bottom: 0.5em; } + +.highlight, +code { + font-family: 'Bitstream Vera Sans Mono','Courier', monospace; + background-color: #efefef; } + +.highlight { + border: 1px solid #ddd; + padding: 1em 1em 0 1em; + margin: 20px 0 20px 0; + overflow: auto; } + +code { + padding: 0.2em; } + +.highlight code { + padding: 0; } + +.highlight .c { + color: #586e75; } + +/* Comment */ +.highlight .err { + color: #93a1a1; } + +/* Error */ +.highlight .g { + color: #93a1a1; } + +/* Generic */ +.highlight .k { + color: #859900; } + +/* Keyword */ +.highlight .l { + color: #93a1a1; } + +/* Literal */ +.highlight .n { + color: #93a1a1; } + +/* Name */ +.highlight .o { + color: #859900; } + +/* Operator */ +.highlight .x { + color: #cb4b16; } + +/* Other */ +.highlight .p { + color: #93a1a1; } + +/* Punctuation */ +.highlight .cm { + color: #586e75; } + +/* Comment.Multiline */ +.highlight .cp { + color: #859900; } + +/* Comment.Preproc */ +.highlight .c1 { + color: #586e75; } + +/* Comment.Single */ +.highlight .cs { + color: #859900; } + +/* Comment.Special */ +.highlight .gd { + color: #2aa198; } + +/* Generic.Deleted */ +.highlight .ge { + color: #93A1A1; + font-style: italic; } + +/* Generic.Emph */ +.highlight .gr { + color: #dc322f; } + +/* Generic.Error */ +.highlight .gh { + color: #cb4b16; } + +/* Generic.Heading */ +.highlight .gi { + color: #859900; } + +/* Generic.Inserted */ +.highlight .go { + color: #93a1a1; } + +/* Generic.Output */ +.highlight .gp { + color: #93a1a1; } + +/* Generic.Prompt */ +.highlight .gs { + color: #93A1A1; + font-weight: bold; } + +/* Generic.Strong */ +.highlight .gu { + color: #cb4b16; } + +/* Generic.Subheading */ +.highlight .gt { + color: #93a1a1; } + +/* Generic.Traceback */ +.highlight .kc { + color: #cb4b16; } + +/* Keyword.Constant */ +.highlight .kd { + color: #268bd2; } + +/* Keyword.Declaration */ +.highlight .kn { + color: #859900; } + +/* Keyword.Namespace */ +.highlight .kp { + color: #859900; } + +/* Keyword.Pseudo */ +.highlight .kr { + color: #268bd2; } + +/* Keyword.Reserved */ +.highlight .kt { + color: #dc322f; } + +/* Keyword.Type */ +.highlight .ld { + color: #93a1a1; } + +/* Literal.Date */ +.highlight .m { + color: #2aa198; } + +/* Literal.Number */ +.highlight .s { + color: #2aa198; } + +/* Literal.String */ +.highlight .na { + color: #93a1a1; } + +/* Name.Attribute */ +.highlight .nb { + color: #b58900; } + +/* Name.Builtin */ +.highlight .nc { + color: #268bd2; } + +/* Name.Class */ +.highlight .no { + color: #cb4b16; } + +/* Name.Constant */ +.highlight .nd { + color: #268bd2; } + +/* Name.Decorator */ +.highlight .ni { + color: #cb4b16; } + +/* Name.Entity */ +.highlight .ne { + color: #cb4b16; } + +/* Name.Exception */ +.highlight .nf { + color: #268bd2; } + +/* Name.Function */ +.highlight .nl { + color: #93a1a1; } + +/* Name.Label */ +.highlight .nn { + color: #93a1a1; } + +/* Name.Namespace */ +.highlight .nx { + color: #555555; } + +/* Name.Other */ +.highlight .py { + color: #93a1a1; } + +/* Name.Property */ +.highlight .nt { + color: #268bd2; } + +/* Name.Tag */ +.highlight .nv { + color: #268bd2; } + +/* Name.Variable */ +.highlight .ow { + color: #859900; } + +/* Operator.Word */ +.highlight .w { + color: #93a1a1; } + +/* Text.Whitespace */ +.highlight .mf { + color: #2aa198; } + +/* Literal.Number.Float */ +.highlight .mh { + color: #2aa198; } + +/* Literal.Number.Hex */ +.highlight .mi { + color: #2aa198; } + +/* Literal.Number.Integer */ +.highlight .mo { + color: #2aa198; } + +/* Literal.Number.Oct */ +.highlight .sb { + color: #586e75; } + +/* Literal.String.Backtick */ +.highlight .sc { + color: #2aa198; } + +/* Literal.String.Char */ +.highlight .sd { + color: #93a1a1; } + +/* Literal.String.Doc */ +.highlight .s2 { + color: #2aa198; } + +/* Literal.String.Double */ +.highlight .se { + color: #cb4b16; } + +/* Literal.String.Escape */ +.highlight .sh { + color: #93a1a1; } + +/* Literal.String.Heredoc */ +.highlight .si { + color: #2aa198; } + +/* Literal.String.Interpol */ +.highlight .sx { + color: #2aa198; } + +/* Literal.String.Other */ +.highlight .sr { + color: #dc322f; } + +/* Literal.String.Regex */ +.highlight .s1 { + color: #2aa198; } + +/* Literal.String.Single */ +.highlight .ss { + color: #2aa198; } + +/* Literal.String.Symbol */ +.highlight .bp { + color: #268bd2; } + +/* Name.Builtin.Pseudo */ +.highlight .vc { + color: #268bd2; } + +/* Name.Variable.Class */ +.highlight .vg { + color: #268bd2; } + +/* Name.Variable.Global */ +.highlight .vi { + color: #268bd2; } + +/* Name.Variable.Instance */ +.highlight .il { + color: #2aa198; } + +/* Literal.Number.Integer.Long */ +.navigator { + margin-top: 2em; + margin-bottom: 2em; } + +.island { + padding: 20px; + margin-bottom: 20px; } + +.island > :last-child { + margin-bottom: 0; + /* Remove the margin from the last child of a boxed off area so that we don’t end up with compounded margin/padding spacings. */ } + +.promo { + border: 1px solid #ff8; + background-color: #ffc; + color: #333; } + +.improve { + text-align: center; } diff --git a/sass/_base.scss b/sass/_base.scss new file mode 100644 index 00000000..82311fbc --- /dev/null +++ b/sass/_base.scss @@ -0,0 +1,79 @@ +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp { +border:0; +margin:0; +padding:0; +font-size:100% +} + +html,body { +height:100% +} + +article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { +display:block +} + +b,strong { +font-weight:700 +} + +img { +color:transparent; +font-size:0; +vertical-align:middle; +-ms-interpolation-mode:bicubic +} + +ol,ul { +list-style:none +} + +li { +display:list-item +} + +table { +border-collapse:collapse; +border-spacing:0 +} + +th,td,caption { +font-weight:400; +vertical-align:top; +text-align:left +} + +q { +quotes:none +} + +q:before,q:after { +content:''; +content:none +} + +sub,sup,small { +font-size:75% +} + +sub,sup { +line-height:0; +position:relative; +vertical-align:baseline +} + +sub { +bottom:-.25em +} + +sup { +top:-.5em +} + +svg { +overflow:hidden +} + +body { +min-width:960px +} diff --git a/sass/_community.scss b/sass/_community.scss new file mode 100644 index 00000000..9decf4b8 --- /dev/null +++ b/sass/_community.scss @@ -0,0 +1,48 @@ +.community { +background:#e1e0dc; +color:#43413e; +text-align:center; +font-size:1.125em; +padding:1.5em 0 +} + +.community h2 { +font-weight:700; +display:inline-block +} + +.community ul { +display:inline +} + +.community li { +list-style:none; +display:inline-block +} + +.community a { +margin:0 1.5em; +color:#43413e; +text-decoration:none +} + +.community a:hover { +color:#000; +text-decoration:underline +} + +.link-release,.link-ml,.link-bugs { +display:inline-block; +padding-left:44px; +height:36px; +line-height:36px; +background:url(../img/icon-release.png) no-repeat 0 50% +} + +.link-ml { +background:url(../img/icon-ml.png) no-repeat 0 50% +} + +.link-bugs { +background:url(../img/icon-bugs.png) no-repeat 0 50% +} diff --git a/sass/_grid.scss b/sass/_grid.scss new file mode 100644 index 00000000..aa1a1abd --- /dev/null +++ b/sass/_grid.scss @@ -0,0 +1,211 @@ +.grid { + margin-left: auto; + margin-right: auto; + width: 960px; } + +.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; } + +.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 { + position: relative; } + +.alpha { + margin-left: 0; } + +.omega { + margin-right: 0; } + +.grid .grid_1 { + width: 60px; } + +.grid .grid_2 { + width: 140px; } + +.grid .grid_3 { + width: 220px; } + +.grid .grid_4 { + width: 300px; } + +.grid .grid_5 { + width: 380px; } + +.grid .grid_6 { + width: 460px; } + +.grid .grid_7 { + width: 540px; } + +.grid .grid_8 { + width: 620px; } + +.grid .grid_9 { + width: 700px; } + +.grid .grid_10 { + width: 780px; } + +.grid .grid_11 { + width: 860px; } + +.grid .grid_12 { + width: 940px; } + +.grid .prefix_1 { + padding-left: 80px; } + +.grid .prefix_2 { + padding-left: 160px; } + +.grid .prefix_3 { + padding-left: 240px; } + +.grid .prefix_4 { + padding-left: 320px; } + +.grid .prefix_5 { + padding-left: 400px; } + +.grid .prefix_6 { + padding-left: 480px; } + +.grid .prefix_7 { + padding-left: 560px; } + +.grid .prefix_8 { + padding-left: 640px; } + +.grid .prefix_9 { + padding-left: 720px; } + +.grid .prefix_10 { + padding-left: 800px; } + +.grid .prefix_11 { + padding-left: 880px; } + +.grid .suffix_1 { + padding-right: 80px; } + +.grid .suffix_2 { + padding-right: 160px; } + +.grid .suffix_3 { + padding-right: 240px; } + +.grid .suffix_4 { + padding-right: 320px; } + +.grid .suffix_5 { + padding-right: 400px; } + +.grid .suffix_6 { + padding-right: 480px; } + +.grid .suffix_7 { + padding-right: 560px; } + +.grid .suffix_8 { + padding-right: 640px; } + +.grid .suffix_9 { + padding-right: 720px; } + +.grid .suffix_10 { + padding-right: 800px; } + +.grid .suffix_11 { + padding-right: 880px; } + +.grid .push_1 { + left: 80px; } + +.grid .push_2 { + left: 160px; } + +.grid .push_3 { + left: 240px; } + +.grid .push_4 { + left: 320px; } + +.grid .push_5 { + left: 400px; } + +.grid .push_6 { + left: 480px; } + +.grid .push_7 { + left: 560px; } + +.grid .push_8 { + left: 640px; } + +.grid .push_9 { + left: 720px; } + +.grid .push_10 { + left: 800px; } + +.grid .push_11 { + left: 880px; } + +.grid .pull_1 { + left: -80px; } + +.grid .pull_2 { + left: -160px; } + +.grid .pull_3 { + left: -240px; } + +.grid .pull_4 { + left: -320px; } + +.grid .pull_5 { + left: -400px; } + +.grid .pull_6 { + left: -480px; } + +.grid .pull_7 { + left: -560px; } + +.grid .pull_8 { + left: -640px; } + +.grid .pull_9 { + left: -720px; } + +.grid .pull_10 { + left: -800px; } + +.grid .pull_11 { + left: -880px; } + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + +.clearfix:before, .clearfix:after, .grid:before, .grid:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; } + +.clearfix:after, .grid:after { + clear: both; } + +.clearfix, .grid { + zoom: 1; } diff --git a/sass/_masthead.scss b/sass/_masthead.scss new file mode 100644 index 00000000..08ab24bf --- /dev/null +++ b/sass/_masthead.scss @@ -0,0 +1,29 @@ +.masthead { +background:#43413e; +color:#FFF +} + +.header { +height:90px +} + +.nav-main { +text-align:right; +padding-top:36px +} + +.nav-main li { +display:inline +} + +.nav-main a { +color:#e1e0dc; +text-decoration:none; +font-weight:700; +text-transform:uppercase; +margin:0 1em +} + +.nav-main a:hover { +color:#FFF +} diff --git a/sass/_nav-list.scss b/sass/_nav-list.scss new file mode 100644 index 00000000..7b649ab3 --- /dev/null +++ b/sass/_nav-list.scss @@ -0,0 +1,49 @@ +.nav-title, +.nav-up, +.nav-group, +.nav-group-label { + margin-bottom:1em; +} + +.nav-group { + white-space: nowrap; + overflow: hidden; +} + +.nav-item-label { + border:1px solid #DDD; + display: inline-block; + font-size:10px; + text-align: center; + width: 2em; + border-radius:10px; +} + +.nav-item-property > .nav-item-label { + background-color:#43413E; + color:#2ECBD6; +} + +.nav-item-method > .nav-item-label { + background-color:#2ECBD6; + color:#000; +} + +.nav-item-handler > .nav-item-label { + background:#E1E0DC; + color:#43413E; +} + +.nav-item-name { + color:#000; +} + +.nav-title, +.current > .nav-item-name { + font-weight:bold; + color:#C00 +} + +.nav-group-end { + margin-bottom: 0.5em; +} diff --git a/sass/_posts.scss b/sass/_posts.scss new file mode 100644 index 00000000..0cea8061 --- /dev/null +++ b/sass/_posts.scss @@ -0,0 +1,47 @@ +.post { + + line-height: 1.5em; + + h1,h2,h3,h4 { + margin-bottom: 1em; + } + + p,ul,pre { + margin-bottom:1.5em; + } + + h1 { + color:#C00; + font-size:2.25em; + font-weight:700; + text-align:center + } + + h2 { + font-size:150% + } + + p { + line-height:125%; + } + + ul { + line-height:125%; + list-style-type:disc; + margin-left:1em; + } + + li { + margin-left:1em; + list-style-position: inside; + } + +} + +.col-4 { + -moz-column-count: 4; + -webkit-column-count: 4; + column-count: 4; } + +.col-3 > li { + display: block; } diff --git a/sass/_shift.scss b/sass/_shift.scss new file mode 100644 index 00000000..4d5561bf --- /dev/null +++ b/sass/_shift.scss @@ -0,0 +1,11 @@ +.shift { + display: table; + width: 100%; } + +/* Will display at the bottom. */ +.shift__down { + display: table-footer-group; } + +/* Will display at the top. */ +.shife__up { + display: table-header-group; } diff --git a/sass/_solarized-light.scss b/sass/_solarized-light.scss new file mode 100644 index 00000000..1eafd86a --- /dev/null +++ b/sass/_solarized-light.scss @@ -0,0 +1,90 @@ + +.highlight, +code { + font-family: 'Bitstream Vera Sans Mono','Courier', monospace; + background-color: #efefef; +} + +.highlight { + border: 1px solid #ddd; + padding: 1em 1em 0 1em; + margin: 20px 0 20px 0; + overflow: auto; +} + +code { + padding: 0.2em; +} + +.highlight code { + padding: 0; +} + +.highlight .c { color: #586E75 } /* Comment */ +.highlight .err { color: #93A1A1 } /* Error */ +.highlight .g { color: #93A1A1 } /* Generic */ +.highlight .k { color: #859900 } /* Keyword */ +.highlight .l { color: #93A1A1 } /* Literal */ +.highlight .n { color: #93A1A1 } /* Name */ +.highlight .o { color: #859900 } /* Operator */ +.highlight .x { color: #CB4B16 } /* Other */ +.highlight .p { color: #93A1A1 } /* Punctuation */ +.highlight .cm { color: #586E75 } /* Comment.Multiline */ +.highlight .cp { color: #859900 } /* Comment.Preproc */ +.highlight .c1 { color: #586E75 } /* Comment.Single */ +.highlight .cs { color: #859900 } /* Comment.Special */ +.highlight .gd { color: #2AA198 } /* Generic.Deleted */ +.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #DC322F } /* Generic.Error */ +.highlight .gh { color: #CB4B16 } /* Generic.Heading */ +.highlight .gi { color: #859900 } /* Generic.Inserted */ +.highlight .go { color: #93A1A1 } /* Generic.Output */ +.highlight .gp { color: #93A1A1 } /* Generic.Prompt */ +.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #CB4B16 } /* Generic.Subheading */ +.highlight .gt { color: #93A1A1 } /* Generic.Traceback */ +.highlight .kc { color: #CB4B16 } /* Keyword.Constant */ +.highlight .kd { color: #268BD2 } /* Keyword.Declaration */ +.highlight .kn { color: #859900 } /* Keyword.Namespace */ +.highlight .kp { color: #859900 } /* Keyword.Pseudo */ +.highlight .kr { color: #268BD2 } /* Keyword.Reserved */ +.highlight .kt { color: #DC322F } /* Keyword.Type */ +.highlight .ld { color: #93A1A1 } /* Literal.Date */ +.highlight .m { color: #2AA198 } /* Literal.Number */ +.highlight .s { color: #2AA198 } /* Literal.String */ +.highlight .na { color: #93A1A1 } /* Name.Attribute */ +.highlight .nb { color: #B58900 } /* Name.Builtin */ +.highlight .nc { color: #268BD2 } /* Name.Class */ +.highlight .no { color: #CB4B16 } /* Name.Constant */ +.highlight .nd { color: #268BD2 } /* Name.Decorator */ +.highlight .ni { color: #CB4B16 } /* Name.Entity */ +.highlight .ne { color: #CB4B16 } /* Name.Exception */ +.highlight .nf { color: #268BD2 } /* Name.Function */ +.highlight .nl { color: #93A1A1 } /* Name.Label */ +.highlight .nn { color: #93A1A1 } /* Name.Namespace */ +.highlight .nx { color: #555 } /* Name.Other */ +.highlight .py { color: #93A1A1 } /* Name.Property */ +.highlight .nt { color: #268BD2 } /* Name.Tag */ +.highlight .nv { color: #268BD2 } /* Name.Variable */ +.highlight .ow { color: #859900 } /* Operator.Word */ +.highlight .w { color: #93A1A1 } /* Text.Whitespace */ +.highlight .mf { color: #2AA198 } /* Literal.Number.Float */ +.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ +.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ +.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ +.highlight .sb { color: #586E75 } /* Literal.String.Backtick */ +.highlight .sc { color: #2AA198 } /* Literal.String.Char */ +.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ +.highlight .s2 { color: #2AA198 } /* Literal.String.Double */ +.highlight .se { color: #CB4B16 } /* Literal.String.Escape */ +.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ +.highlight .si { color: #2AA198 } /* Literal.String.Interpol */ +.highlight .sx { color: #2AA198 } /* Literal.String.Other */ +.highlight .sr { color: #DC322F } /* Literal.String.Regex */ +.highlight .s1 { color: #2AA198 } /* Literal.String.Single */ +.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ +.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #268BD2 } /* Name.Variable.Class */ +.highlight .vg { color: #268BD2 } /* Name.Variable.Global */ +.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ +.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ diff --git a/sass/home/_description.scss b/sass/home/_description.scss new file mode 100644 index 00000000..d6161f7d --- /dev/null +++ b/sass/home/_description.scss @@ -0,0 +1,26 @@ +.description { +color:#43413e; +padding-bottom:2em +} + +.description h2 { +color:#2ecbd6; +font-size:2.25em; +font-weight:700; +margin:1.5em 0; +text-align:center +} + +.description h3 { +font-weight:700; +text-transform:uppercase +} + +.description .feature { +font-size:.875em +} + +#feature-end { +text-align:center; +margin:1.5em 0 0 +} diff --git a/sass/home/_example-code.scss b/sass/home/_example-code.scss new file mode 100644 index 00000000..6f370601 --- /dev/null +++ b/sass/home/_example-code.scss @@ -0,0 +1,28 @@ +.intro-example { +border-radius:9px; +background:#373633 +} + +.intro-example pre { +margin:18px +} + +.solarized { +color:#839496 +} + +.solarized .object { +color:#b58900 +} + +.solarized .function { +color:#268bd2 +} + +.solarized .literal { +color:#29a197 +} + +.solarized .comment { +color:#586e75 +} diff --git a/sass/home/_footer.scss b/sass/home/_footer.scss new file mode 100644 index 00000000..9286a0ad --- /dev/null +++ b/sass/home/_footer.scss @@ -0,0 +1,11 @@ +.footer { +background:#2ecbd6; +color:#FFF; +padding:18px 0; +font-size:.875em; +text-align:center; +} + +.footer a { +color:#FFF +} diff --git a/sass/home/_index.scss b/sass/home/_index.scss new file mode 100644 index 00000000..61c03e41 --- /dev/null +++ b/sass/home/_index.scss @@ -0,0 +1,4 @@ +@import '_example-code.scss'; +@import '_footer.scss'; +@import '_introduction.scss'; +@import '_description.scss'; diff --git a/sass/home/_introduction.scss b/sass/home/_introduction.scss new file mode 100644 index 00000000..c04e9013 --- /dev/null +++ b/sass/home/_introduction.scss @@ -0,0 +1,67 @@ + +.intro { +padding:36px 0 +} + +.intro a { +color:#FFF +} + +.intro h1 { +color:#FFF; +font-weight:700; +font-size:2.25em; +line-height:1em; +text-shadow:0 -1px 0 #000; +margin:0 0 1em +} + +.intro .explanation { +margin:1em 0 2em; +font-size:.875em; +color:#e1e0dc +} + +.intro .action a { +display:inline-block; +line-height:54px; +color:#FFF; +font-size:1.5em; +margin-right:1em +} + +.btn-download { +text-decoration:none; +height:54px; +padding:0 1em; +border:1px solid #004513; +border-radius:4px; +background:#7da21a; +background:-moz-linear-gradient(top,#afe225 0,#7da21a 100%); +background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#afe225),color-stop(100%,#7da21a)); +background:-webkit-linear-gradient(top,#afe225 0,#7da21a 100%); +background:-o-linear-gradient(top,#afe225 0,#7da21a 100%); +background:-ms-linear-gradient(top,#afe225 0,#7da21a 100%); +background:linear-gradient(top,#afe225 0,#7da21a 100%); +filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#afe225',endColorstr='#7da21a',GradientType=0); +font-weight:700; +text-shadow:0 -1px 0 #3d9700; +-webkit-box-shadow:inset 0 2px 0 0 #def67e,0px 2px 5px rgba(0,0,0,.2); +-moz-box-shadow:inset 0 2px 0 0 #def67e,0px 2px 5px rgba(0,0,0,.2); +box-shadow:inset 0 2px 0 0 #def67e,0px 2px 5px rgba(0,0,0,.2) +} + +.btn-download:hover { +background:#97bd38; +background:-moz-linear-gradient(top,#bef038 0,#97bd38 100%); +background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bef038),color-stop(100%,#97bd38)); +background:-webkit-linear-gradient(top,#bef038 0,#97bd38 100%); +background:-o-linear-gradient(top,#bef038 0,#97bd38 100%); +background:-ms-linear-gradient(top,#bef038 0,#97bd38 100%); +background:linear-gradient(top,#bef038 0,#97bd38 100%); +filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bef038',endColorstr='#97bd38',GradientType=0) +} + +.btn-download span { +font-weight:400 +} diff --git a/sass/main.scss b/sass/main.scss new file mode 100755 index 00000000..f815bb4a --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,40 @@ +@import '_base.scss'; +@import '_grid.scss'; + +body { +font-family:'Droid Sans','Lucida Grande',sans-serif; +line-height:1.125em; +color:#444; +} + +@import '_masthead.scss'; +@import '_community.scss'; +@import 'home/_index.scss'; +@import '_shift.scss'; +@import '_posts.scss'; +@import '_nav-list.scss'; +@import '_solarized-light.scss'; + +.navigator { + margin-top:2em; + margin-bottom:2em; +} + +.island{ + padding:20px; + margin-bottom:20px; +} + .island > :last-child{ + margin-bottom:0; /* Remove the margin from the last child of a boxed off area so that we don’t end up with compounded margin/padding spacings. */ + } + +.promo{ + border:1px solid #ff8; + background-color:#ffc; + color:#333; +} + +// specific improve this post promo +.improve { + text-align: center; +}