diff --git a/_config_dev.yml b/_config_dev.yml index c7f5e406cbcb..5a61c41291e8 100755 --- a/_config_dev.yml +++ b/_config_dev.yml @@ -17,7 +17,7 @@ plotlyjs_download_url: https://cdn.plot.ly/plotly-latest.min.js # Excludes # --- # exclude: ['*.Rmd','*.Rmd','_posts/reference_pages/2015-09-09-matlab-reference.html','_posts/reference_pages/2015-09-06-r-reference.html','_posts/reference_pages/2015-09-06-python-reference.html','_posts/reference_pages/2015-08-19-plotly_js-reference.html','_posts/2015-04-05-ggplot2-index.html','_posts/2015-04-05-julia-index.html','_posts/2015-04-05-matlab-index.html','_posts/2015-04-05-matplotlib-index.html','_posts/2015-04-05-node_js-index.html','_posts/2015-04-05-plotly_js-index.html','_posts/2015-04-05-plotlyjs-function-reference.md','_posts/2015-04-05-python-index.html','_posts/2015-05-25-ipython-notebooks_gallery.html','_posts/2015-05-25-ipython-notebooks_index.html','_posts/2015-07-13-eula_index.html','_posts/2015-07-19-pandas.html','_posts/2015-07-26-index.html','_posts/2015-07-30-r-index.Rmd','_posts/2015-07-30-r-index.md','_posts/2015-08-20-research-box-index.html','_posts/ggplot2','_posts/julia','_posts/scala','_posts/matlab','_posts/matplotlib','_posts/nodejs','_posts/pandas','_posts/plotly_js','_posts/python','_posts/r','_posts/tutorials','_posts/user_guide_matlab','_posts/user_guide_python'] -exclude: ['*.Rmd','_posts/reference_pages/2015-09-09-matlab-reference.html','_posts/reference_pages/2015-09-06-r-reference.html','_posts/reference_pages/2015-09-06-python-reference.html','_posts/2015-04-05-ggplot2-index.html','_posts/2015-04-05-julia-index.html','_posts/2015-04-05-matlab-index.html','_posts/2015-04-05-matplotlib-index.html','_posts/2015-04-05-node_js-index.html','_posts/2015-05-25-ipython-notebooks_gallery.html','_posts/2015-05-25-ipython-notebooks_index.html','_posts/2015-07-13-eula_index.html','_posts/2015-07-19-pandas.html','_posts/2015-07-26-index.html','_posts/2015-07-30-r-index.Rmd','_posts/2015-08-20-research-box-index.html','_posts/ggplot2','_posts/julia','_posts/scala','_posts/matlab','_posts/matplotlib','_posts/scikit/2015-04-05-scikit-index.html','_posts/nodejs','_posts/pandas','_posts/tutorials','_posts/user_guide_matlab','vendor', 'node_modules'] +exclude: ['*.Rmd','_posts/reference_pages/2015-09-09-matlab-reference.html','_posts/reference_pages/2015-09-06-r-reference.html','_posts/reference_pages/2015-09-06-python-reference.html','_posts/2015-04-05-ggplot2-index.html','_posts/2015-04-05-julia-index.html','_posts/2015-04-05-matlab-index.html','_posts/2015-04-05-matplotlib-index.html','_posts/2015-04-05-node_js-index.html','_posts/2015-05-25-ipython-notebooks_gallery.html','_posts/2015-05-25-ipython-notebooks_index.html','_posts/2015-07-13-eula_index.html','_posts/2015-07-19-pandas.html','_posts/2015-07-30-r-index.Rmd','_posts/2015-08-20-research-box-index.html','_posts/ggplot2','_posts/julia','_posts/scala','_posts/matlab','_posts/matplotlib','_posts/scikit/2015-04-05-scikit-index.html','_posts/nodejs','_posts/pandas','_posts/tutorials','_posts/user_guide_matlab','vendor', 'node_modules'] #exclude: [_posts/temp, '*.Rmd'] # --- diff --git a/_data/cache_bust_css.yml b/_data/cache_bust_css.yml index 7ea965143a62..1f65023b2d67 100644 --- a/_data/cache_bust_css.yml +++ b/_data/cache_bust_css.yml @@ -1,2 +1,2 @@ -8b86aae596ebea1f9390d418020df20a ../all_static/css/main.css +df18ac4e36504322f34cba34aaecc8fe ../all_static/css/main.css a5765df8bc2358dd61c19edcc0cbef7d ../all_static/css/normalize.css diff --git a/_posts/2015-07-26-index.html b/_posts/2015-07-26-index.html index 183a04fe386e..32f659ef5bf1 100755 --- a/_posts/2015-07-26-index.html +++ b/_posts/2015-07-26-index.html @@ -5,250 +5,184 @@ + {% include head.html %} -{% include head.html %} + + {% include google-tag-body.html %} {% include + _new/_page-components/_header-main.html %} - -{% include google-tag-body.html %} - -{% include _new/_page-components/_header-main.html %} - -
-
+
+
-
- - -
-
-
Welcome to the -

Plotly Open Source Graphing Libraries

-

- D3.js and WebGL charts and maps for Python, MATLAB, R, and more. -

-
+
+
+ Welcome to the +

Plotly Open Source Graphing Libraries

+

+ D3.js and WebGL charts and maps for Python, MATLAB, R, and more. +

+
- {% include breadcrumb.html %}
-
- -
+
+ +
+
+
- -
-
-
-

Additional Resources

-
-
-
- - - -
+ {% include _new/_page-components/_footer-main.html %} -
- - - -
-
- - - - - - - -
-
-
-
- -{% include _new/_page-components/_footer-main.html %} - - - - - + + - - + }); + + diff --git a/all_static/css/main.css b/all_static/css/main.css index a0aa69d7f012..3ba376066d3b 100644 --- a/all_static/css/main.css +++ b/all_static/css/main.css @@ -141,6 +141,7 @@ h6 { margin-left: -80px; padding: 7px; width: 160px; + -webkit-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: rgba(51, 51, 51, 0.9); @@ -343,6 +344,7 @@ pre { .page404-bars { background-color: #447ADB; + -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -390,6 +392,7 @@ pre { .\--sidebar-fixed::-webkit-scrollbar-thumb { background: rgba(68, 123, 220, 0.8); + -webkit-border-radius: 0; border-radius: 0; width: 3px; } @@ -427,6 +430,7 @@ body { color: #f4f4f8 !important; } .header-large--wrap .header--blue-bg { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(-10%, rgba(29, 156, 252, 0.9)), to(#1e427d)); + background-image: -webkit-linear-gradient(bottom, rgba(29, 156, 252, 0.9) -10%, #1e427d 100%); background-image: linear-gradient(0deg, rgba(29, 156, 252, 0.9) -10%, #1e427d 100%); width: 100%; height: 100%; } @@ -486,6 +490,7 @@ body { text-align: center; font-size: 1.4rem; border: solid; + -webkit-border-radius: 8px; border-radius: 8px; border-width: .1em; padding: 30px; @@ -494,6 +499,7 @@ body { text-decoration: none; } .header-large--wrap .header--blue-bg .header--meta-content .banner-button { border: solid; + -webkit-border-radius: 6px; border-radius: 6px; padding: 7px; background-color: #e569e3; @@ -793,6 +799,7 @@ header.header-main { font-weight: 600; opacity: 1; background-color: #119dff; + -webkit-border-radius: 4px; border-radius: 4px; color: white; } header.header-main .\--wrap .button:hover { @@ -1281,6 +1288,7 @@ aside.\--sidebar-container { margin-top: -9px; left: 20px; position: absolute; + -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #e7e7e7; border-color: #2391fe; @@ -1447,6 +1455,7 @@ aside.\--sidebar-container { justify-content: center; background-color: white; border: 1px solid #e7e7e7; + -webkit-border-radius: 50%; border-radius: 50%; padding: 10px; -webkit-transition: 0.2s all ease-in-out; @@ -1992,6 +2001,7 @@ div.output_subarea::-webkit-scrollbar { div.output_subarea::-webkit-scrollbar-thumb { background: rgba(68, 123, 220, 0.8); + -webkit-border-radius: 0; border-radius: 0; width: 3px; } @@ -2310,6 +2320,7 @@ code { .fa-border { padding: .2em .25em .15em; border: solid .08em #eee; + -webkit-border-radius: .1em; border-radius: .1em; } .pull-right { @@ -3988,6 +3999,7 @@ label { -webkit-box-sizing: border-box; } .corner-all { + -webkit-border-radius: 2px; border-radius: 2px; } .no-padding { @@ -4403,6 +4415,7 @@ ul.breadcrumb span { margin-top: 4px; margin-bottom: 20px; border: 1px solid #ddd; + -webkit-border-radius: 2px; border-radius: 2px; } .list_container > div { @@ -4646,6 +4659,7 @@ ul#new-menu { margin-top: 0; margin-bottom: 0; border: 0; + -webkit-border-radius: 0; border-radius: 0; } #running .panel-group .panel .panel-body .list_container .list_item { @@ -4871,6 +4885,7 @@ div.cell { -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; + -webkit-border-radius: 2px; border-radius: 2px; box-sizing: border-box; -moz-box-sizing: border-box; @@ -4938,6 +4953,7 @@ div.inner_cell { div.input_area { border: 1px solid #cfcfcf; + -webkit-border-radius: 2px; border-radius: 2px; background: #f7f7f7; line-height: 1.21429em; } @@ -4967,6 +4983,7 @@ div.unrecognized_cell { align-items: stretch; } div.unrecognized_cell .inner_cell { + -webkit-border-radius: 2px; border-radius: 2px; padding: 5px; font-weight: bold; @@ -5066,12 +5083,15 @@ div.input_area > div.highlight > pre { padding: 0 8px 0 4px; } .CodeMirror-gutters { + -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; + -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; } .CodeMirror pre { padding: 0; border: 0; + -webkit-border-radius: 0; border-radius: 0; } .highlight-base { @@ -5239,6 +5259,7 @@ div.output_scroll { height: 24em; width: 100%; overflow: auto; + -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8); @@ -5269,6 +5290,7 @@ div.out_prompt_overlay { height: 100%; padding: 0 .4em; position: absolute; + -webkit-border-radius: 2px; border-radius: 2px; } div.out_prompt_overlay:hover { @@ -5366,6 +5388,7 @@ div.output_area pre { vertical-align: baseline; color: black; background-color: transparent; + -webkit-border-radius: 0; border-radius: 0; } div.output_subarea { @@ -5739,6 +5762,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l .slide-track { border: 1px solid #ccc; background: #fff; + -webkit-border-radius: 2px; border-radius: 2px; } .widget-hslider { @@ -5752,6 +5776,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l margin-bottom: 10px; border: 1px solid #ccc; background: #fff; + -webkit-border-radius: 2px; border-radius: 2px; display: -webkit-box; -webkit-box-orient: horizontal; @@ -5801,6 +5826,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l width: 12px; height: 28px; margin-top: -8px; + -webkit-border-radius: 2px; border-radius: 2px; } .widget-hslider .ui-slider .ui-slider-range { @@ -5817,6 +5843,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l margin-left: 12px; border: 1px solid #ccc; background: #fff; + -webkit-border-radius: 2px; border-radius: 2px; display: -webkit-box; -webkit-box-orient: vertical; @@ -5868,6 +5895,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l width: 28px; height: 12px; margin-left: -9px; + -webkit-border-radius: 2px; border-radius: 2px; } .widget-vslider .ui-slider .ui-slider-range { @@ -6056,6 +6084,7 @@ div.ui-widget-content { pre.dialog { background-color: #f7f7f7; border: 1px solid #ddd; + -webkit-border-radius: 2px; border-radius: 2px; padding: .4em; padding-left: 2em; } @@ -6089,6 +6118,7 @@ p, section.section div.content-box { border: thin solid #cfcfcf; border-bottom: none; background: #eee; + -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; width: 100%; height: 29px; @@ -6128,7 +6158,9 @@ p, section.section div.content-box { display: block; } .ctb_global_show .ctb_show + .input_area, .ctb_global_show .ctb_show + div.text_cell_input, .ctb_global_show .ctb_show ~ div.text_cell_render { + -webkit-border-top-right-radius: 0; border-top-right-radius: 0; + -webkit-border-top-left-radius: 0; border-top-left-radius: 0; } .ctb_global_show .ctb_show ~ div.text_cell_render { @@ -6149,6 +6181,7 @@ p, section.section div.content-box { background-color: #fff; background-image: none; border: 1px solid #ccc; + -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); @@ -6161,6 +6194,7 @@ p, section.section div.content-box { padding: 5px 10px; font-size: 12px; line-height: 1.5; + -webkit-border-radius: 1px; border-radius: 1px; width: inherit; font-size: inherit; @@ -6208,6 +6242,7 @@ textarea.celltoolbar select, select[multiple].celltoolbar select { z-index: 10; overflow: hidden; border: 1px solid #ababab; + -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 6px 10px -1px #adadad; box-shadow: 0 6px 10px -1px #adadad; } @@ -6246,6 +6281,7 @@ textarea.celltoolbar select, select[multiple].celltoolbar select { #menubar .navbar { border-top: 1px; + -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; margin-bottom: 0; } @@ -6696,6 +6732,7 @@ span.save_widget span.filename { margin-left: 16px; border: none; font-size: 146.5%; + -webkit-border-radius: 2px; border-radius: 2px; } span.save_widget span.filename:hover { @@ -6824,6 +6861,7 @@ span.checkpoint_status, span.autosave_status { min-height: 50px; -webkit-box-shadow: 0 6px 10px -1px #adadad; box-shadow: 0 6px 10px -1px #adadad; + -webkit-border-radius: 2px; border-radius: 2px; position: absolute; z-index: 1000; } @@ -6833,6 +6871,7 @@ span.checkpoint_status, span.autosave_status { .ipython_tooltip .tooltiptext pre { border: 0; + -webkit-border-radius: 0; border-radius: 0; font-size: 100%; background-color: #f7f7f7; } @@ -6875,6 +6914,7 @@ span.checkpoint_status, span.autosave_status { color: white; background: black; padding: .4em; + -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 0 12px 1px rgba(87, 87, 87, 0.4); box-shadow: 0 0 12px 1px rgba(87, 87, 87, 0.4); } @@ -7259,6 +7299,7 @@ div#notebook { padding: .25rem .5rem; border-color: #2391fe; width: 250px; + -webkit-border-radius: 4px; border-radius: 4px; } /* Search results container */ @@ -7297,6 +7338,9 @@ div#notebook { .page.\--home .hero { width: 100%; + background-image: url(https://plotly-tutorials.s3-us-west-1.amazonaws.com/assets/api/images/hero-background.png); + background-repeat: no-repeat; + background-size: cover; height: 400px; max-height: 500px; display: -webkit-box; @@ -7362,23 +7406,32 @@ div#notebook { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - color: #626262; + color: #fff; margin-top: 120px; - max-width: 580px; + max-width: 700px; text-align: center; } @media (max-width: 584px) { .page.\--home .hero .\--welcome { margin-top: 110px; } } - .page.\--home .hero .\--welcome h1, .page.\--home .hero .\--welcome section.section h2, section.section .page.\--home .hero .\--welcome h2 { + .page.\--home .hero .\--welcome p, .page.\--home .hero .\--welcome section.section div.content-box, section.section .page.\--home .hero .\--welcome div.content-box { + color: #fff; + font-size: 12pt; + margin-top: 0; } + @media (max-width: 584px) { + .page.\--home .hero .\--welcome p, .page.\--home .hero .\--welcome section.section div.content-box, section.section .page.\--home .hero .\--welcome div.content-box { + margin-top: 30px; } } + .page.\--home .hero .\--welcome h2 { width: 100%; - font-size: 5rem; + font-size: 28pt; + margin-top: 0; + margin-bottom: 0; margin: 0; font-weight: 100; - color: #2391fe; + color: #fff; padding-top: 10px; padding-bottom: 20px; } @media (max-width: 584px) { - .page.\--home .hero .\--welcome h1, .page.\--home .hero .\--welcome section.section h2, section.section .page.\--home .hero .\--welcome h2 { + .page.\--home .hero .\--welcome h2 { font-size: 3rem; padding: 10px 40px; margin-bottom: 0; @@ -7387,9 +7440,10 @@ div#notebook { .page.\--home .hero .\--welcome p, .page.\--home .hero .\--welcome section.section div.content-box, section.section .page.\--home .hero .\--welcome div.content-box { padding: 0 40px; } } .page.\--home .hero .\--welcome span { - color: white; + color: #fff; text-transform: uppercase; - letter-spacing: 2px; } + letter-spacing: 100; + font-family: "Open Sans", sans-serif; } .page.\--home .\--documentation-categories { position: relative; @@ -7518,12 +7572,13 @@ div#notebook { padding: 10px; -webkit-transition: 0.2s all ease-in-out; transition: 0.2s all ease-in-out; } - .page.\--home .\--documentation-categories ul li .category-img img, .page.\--home .\--documentation-categories ul li .category-img svg { + .page.\--home .\--documentation-categories ul li .category-img img, + .page.\--home .\--documentation-categories ul li .category-img svg { width: 70%; max-width: 70%; max-height: 90px; } .page.\--home .\--documentation-categories ul li::before { - content: ''; + content: ""; position: absolute; height: 6px; width: 100%; @@ -8488,14 +8543,17 @@ pre, code, .hljs { display: block; } .\--tutorial-section.no-image .\--grid-list { -webkit-columns: 2; + -moz-columns: 2; columns: 2; border: 1px solid #e7e7e7; margin-top: 20px; -webkit-column-gap: 0; + -moz-column-gap: 0; column-gap: 0; } @media (max-width: 1023px) { .\--tutorial-section.no-image .\--grid-list { -webkit-columns: 1; + -moz-columns: 1; columns: 1; } } .\--tutorial-section.no-image .\--grid-item { background: white; @@ -8504,6 +8562,7 @@ pre, code, .hljs { border: 0; -webkit-column-break-inside: avoid; /* Chrome, Safari */ + page-break-inside: avoid; /* Theoretically FF 20+ */ break-inside: avoid-column; /* IE 11 */ @@ -8590,6 +8649,7 @@ pre, code, .hljs { -ms-flex-direction: column; flex-direction: column; font-size: 1rem; + -webkit-border-radius: 5px; border-radius: 5px; max-width: 1120px; padding: 0; diff --git a/scss/_pages/_home.scss b/scss/_pages/_home.scss index 3c66837605af..74d6da8e7910 100644 --- a/scss/_pages/_home.scss +++ b/scss/_pages/_home.scss @@ -4,13 +4,14 @@ } .page { - &.\--home { .hero { width: 100%; - + background-image: url(https://plotly-tutorials.s3-us-west-1.amazonaws.com/assets/api/images/hero-background.png); + background-repeat: no-repeat; + background-size: cover; height: 400px; - max-height:500px; + max-height: 500px; @include handheld { height: 100vh; } @@ -26,11 +27,11 @@ $hero-h: 1250px; //background: url(/all_static/images/api-home.jpg) 50% 50% !important; //height: 45vh; - height:400px; + height: 400px; left: 50% !important; - margin-left: $hero-w*-0.5; + margin-left: $hero-w * -0.5; top: -50px !important; - width:$hero-w; + width: $hero-w; position: absolute; z-index: 1; //transform: scale(0.45) !important; @@ -49,7 +50,7 @@ //left: -1200px !important; //top:-300px !important; position: absolute; - top:0; + top: 0; left: 0; } } @@ -61,38 +62,48 @@ align-items: center; justify-content: center; flex-wrap: wrap; - color: $grey; + color: #fff; margin-top: 120px; - max-width: 580px; + max-width: 700px; text-align: center; @include handheld { - margin-top:$unit*11; + margin-top: $unit * 11; + } + p { + color: #fff; + font-size: 12pt; + margin-top: 0; + @include handheld { + margin-top: $unit * 3; + } } - h1 { + h2 { width: 100%; - font-size: 5rem; + font-size: 28pt; + margin-top: 0; + margin-bottom: 0; @include handheld { font-size: 3rem; - padding: $unit $unit*4; - margin-bottom:0; - padding-bottom:0; + padding: $unit $unit * 4; + margin-bottom: 0; + padding-bottom: 0; } margin: 0; font-weight: 100; - color: $bblue; + color: #fff; padding-top: $unit; - padding-bottom: $unit*2; - + padding-bottom: $unit * 2; } @include handheld { p { - padding: 0 $unit*4; + padding: 0 $unit * 4; } } span { - color: lighten($grey, 100%); + color: #fff; text-transform: uppercase; - letter-spacing: 2px; + letter-spacing: 100; + font-family: "Open Sans", sans-serif; } } } @@ -100,11 +111,11 @@ position: relative; z-index: 2; background-color: $lb; - padding: $unit*2; + padding: $unit * 2; width: 100%; border-top: $border; - a{ - &::before{ + a { + &::before { display: none; } } @@ -113,10 +124,10 @@ align-items: flex-start; justify-content: center; flex-wrap: wrap; - padding: $unit*3; + padding: $unit * 3; max-width: 100%; //margin-top:$unit*2.5; - .github-stars{ + .github-stars { padding-top: 20px; display: flex; align-items: flex-start; @@ -127,7 +138,6 @@ } ul { - list-style-type: none; flex-wrap: wrap; display: flex; @@ -170,14 +180,15 @@ padding: $unit; transition: 0.2s all ease-in-out; //transform: scale(0.8); - img, svg { + img, + svg { width: 70%; max-width: 70%; max-height: 90px; } } &::before { - content: ''; + content: ""; position: absolute; height: 6px; width: 100%; @@ -219,7 +230,7 @@ font-weight: 500; //letter-spacing:1px; padding: 0; - margin: $unit*2.5 0 $unit; + margin: $unit * 2.5 0 $unit; //text-transform: uppercase; // font-weight: bold; @@ -232,22 +243,21 @@ } } -.mailchimp-footer-text{ +.mailchimp-footer-text { margin-block-start: 0em; font-size: 80%; color: #626262; } -.mc-input{ +.mc-input { margin-top: 5px; margin-bottom: 10px; border: 1px solid #626262; padding: 5px; } -.mc-embedded-subscribe{ +.mc-embedded-subscribe { color: #fff; background-color: #119dff; box-shadow: 0px 2px 8px rgba(#506784, 0.4); } -