diff --git a/docs/contents/css/main.css b/docs/contents/css/main.css
index ba16c4fe..956d0e87 100644
--- a/docs/contents/css/main.css
+++ b/docs/contents/css/main.css
@@ -1,900 +1,928 @@
html {
- font-family: 'Source Sans Pro', sans-serif;
- color: #484848;
- line-height: 1.28
+ font-family: 'Source Sans Pro', sans-serif;
+ color: #484848;
+ line-height: 1.28
}
p {
- margin: 0 0 10px
+ margin: 0 0 10px
}
.subHeader {
- font-size: 21px;
- font-weight: 200;
- line-height: 30px;
- margin-bottom: 10px
+ font-size: 21px;
+ font-weight: 200;
+ line-height: 30px;
+ margin-bottom: 10px
}
em {
- font-style: italic
+ font-style: italic
}
h1, h2, h3, h4, h5, h6 {
- margin: 10px 0;
- font-family: inherit;
- font-weight: bold;
- line-height: 20px;
- color: inherit;
- text-rendering: optimizelegibility
+ margin: 10px 0;
+ font-family: inherit;
+ font-weight: bold;
+ line-height: 20px;
+ color: inherit;
+ text-rendering: optimizelegibility
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
- font-weight: normal;
- color: #7b7b7b
+ font-weight: normal;
+ color: #7b7b7b
}
h1, h2, h3 {
- line-height: 40px
+ line-height: 40px
}
h1 {
- font-size: 39px
+ font-size: 39px
}
h2 {
- font-size: 31px
+ font-size: 31px
}
h3 {
- font-size: 23px
+ font-size: 23px
}
h4 {
- font-size: 16px
+ font-size: 16px
}
h5 {
- font-size: 14px
+ font-size: 14px
}
h6 {
- font-size: 11px
+ font-size: 11px
}
h1 small {
- font-size: 24px
+ font-size: 24px
}
h2 small {
- font-size: 18px
+ font-size: 18px
}
h3 small {
- font-size: 16px
+ font-size: 16px
}
h4 small {
- font-size: 14px
+ font-size: 14px
}
ul, ol {
- margin: 0 0 10px 25px;
- padding: 0
+ margin: 0 0 10px 25px;
+ padding: 0
}
ul ul, ul ol, ol ol, ol ul {
- margin-bottom: 0
+ margin-bottom: 0
}
li {
- line-height: 20px
+ line-height: 20px
}
a {
- color: #c05b4d;
- text-decoration: none
+ color: #285eb8;
+ text-decoration: none
}
a:hover, a:focus {
- color: #a5473a;
- text-decoration: underline
+ color: #234fb8;
+ text-decoration: underline
}
a:focus {
- outline: thin dotted #333;
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px
+ outline: thin dotted #333;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px
}
.center {
- text-align: center
+ text-align: center
}
html * {
- color-profile: sRGB;
- rendering-intent: auto
+ color-profile: sRGB;
+ rendering-intent: auto
}
* {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- border: none;
- margin: 0;
- padding: 0
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ border: none;
+ margin: 0;
+ padding: 0
}
html {
- background: #f9f9f9
+ background: #f9f9f9
+}
+
+.browser-mockup {
+ border-top: 2em solid #F3F3F3;
+ position: relative;
+ border-radius: 3px 3px 0 0
+}
+
+.browser-mockup:before {
+ display: block;
+ position: absolute;
+ content: '';
+ top: -1.25em;
+ left: 1em;
+ width: 0.5em;
+ height: 0.5em;
+ border-radius: 50%;
+ background-color: #f44;
+ box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+}
+
+.browser-mockup > * {
+ display: block;
+ border: 1px solid #ddd;
+ width: 100%;
}
.left {
- float: left
+ float: left
}
.right {
- float: right
+ float: right
}
.container {
- padding-top: 50px;
- min-width: 960px
+ padding-top: 50px;
+ min-width: 1060px
}
.wrap {
- width: 960px;
- margin-left: auto;
- margin-right: auto;
- padding-left: 20px;
- padding-right: 20px
+ width: 1060px;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 20px;
+ padding-right: 20px
}
.skinnyWrap {
- width: 690px;
- margin-left: auto;
- margin-right: auto;
- padding-left: 20px;
- padding-right: 20px
+ width: 690px;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 20px;
+ padding-right: 20px
}
hr {
- height: 0;
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #eee
+ height: 0;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #eee
}
ul, li {
- margin-left: 20px
+ margin-left: 20px
}
li + li {
- margin-top: 10px
+ margin-top: 10px
}
h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
- margin-top: -50px;
- position: absolute
+ margin-top: -50px;
+ position: absolute
}
h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link {
- display: inline
+ display: inline
}
.hash-link {
- color: #aaa;
- display: none
+ color: #aaa;
+ display: none
}
.nav-main {
- background: #222;
- color: #fafafa;
- position: fixed;
- top: 0;
- height: 50px;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
- width: 100%;
- z-index: 100
+ background: #222;
+ color: #fafafa;
+ position: fixed;
+ top: 0;
+ height: 50px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+ width: 100%;
+ z-index: 100
}
.nav-main:after {
- content: "";
- display: table;
- clear: both
+ content: "";
+ display: table;
+ clear: both
}
.nav-main a {
- color: #e9e9e9;
- text-decoration: none
+ color: #e9e9e9;
+ text-decoration: none
}
.nav-main .nav-site-internal {
- margin: 0 0 0 20px
+ margin: 0 0 0 20px
}
.nav-main .nav-site-external {
- float: right;
- margin: 0
+ float: right;
+ margin: 0
}
.nav-main .nav-site li {
- margin: 0
+ margin: 0
}
.nav-main .nav-site li > a {
- box-sizing: content-box;
- padding: 0 10px;
- line-height: 50px;
- display: inline-block;
- height: 50px;
- color: #ddd
+ box-sizing: content-box;
+ padding: 0 10px;
+ line-height: 50px;
+ display: inline-block;
+ height: 50px;
+ color: #ddd
}
.nav-main .nav-site li > a:hover {
- color: #fff
+ color: #fff
}
.nav-main .nav-site li > a.active {
- color: #fafafa;
- border-bottom: 3px solid #cc7a6f;
- background: #333
+ color: #fafafa;
+ border-bottom: 3px solid #00abff;
+ background: #333
}
.nav-main .nav-home {
- color: #ffffff;
- font-size: 24px;
- line-height: 50px;
- height: 50px;
- display: inline-block
+ color: #ffffff;
+ font-size: 24px;
+ line-height: 50px;
+ height: 50px;
+ display: inline-block
}
.nav-main .nav-home .blur-label {
- color: #209e91;
+ color: #00abff;
}
.nav-main .nav-logo {
- vertical-align: middle;
- display: inline-block
+ vertical-align: middle;
+ display: inline-block;
+ margin-bottom: 9px;
}
.nav-main ul {
- display: inline-block;
- vertical-align: top
+ display: inline-block;
+ vertical-align: top
}
.nav-main li {
- display: inline
+ display: inline
}
.hero {
- padding-bottom: 75px;
+ padding-bottom: 75px;
}
.hero .hero-content {
- color: #e9e9e9;
- font-weight: 300;
- background: #313131;
- padding-top: 50px;
+ color: #e9e9e9;
+ font-weight: 300;
+ background: #313131;
+ padding-top: 50px;
}
.hero .text {
- font-size: 64px;
- text-align: center
+ font-size: 64px;
+ text-align: center
}
.hero .minitext {
- font-size: 16px;
- text-align: center;
- text-transform: uppercase
+ font-size: 16px;
+ text-align: center;
+ text-transform: uppercase
}
.hero strong {
- color: #209e91;
- font-weight: 400
+ color: #00abff;
+ font-weight: 400
}
.white-text {
- color: rgb(249, 249, 249);
+ color: rgb(249, 249, 249);
}
.hero .admin-screenshots {
- margin-top: 40px;
- display: flex;
- flex-direction: row;
+ margin-top: 40px;
+ display: flex;
+ flex-direction: row;
}
.hero .admin-screenshot {
- width: 50%;
- padding: 0 15px;
- text-align: center;
- height: 250px;
+ width: 100%;
+ padding: 0 15px;
+ text-align: center;
}
.admin-screenshot img {
- width: 100%;
+ width: 100%;
}
.demo-link {
- display: block;
- position: relative;
- line-height: 0;
+ display: block;
+ position: relative;
+ line-height: 0;
}
.demo-link:before {
- content: '';
- position: absolute;
- width: 100%;
- bottom: 0;
- left: 0;
- height: 52px;
- background-image: linear-gradient(to bottom, transparent, rgb(249,259,249));
+ content: '';
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ height: 52px;
+ background-image: linear-gradient(to bottom, transparent, rgb(249, 259, 249));
}
.demo-link .demo-link-label {
- display: flex;
- align-items: center;
- justify-content: center;
- content: 'Demo';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,0.5);
- color: rgb(249, 249, 249);
- font-size: 32px;
- opacity: 0;
- transition: opacity 0.3s ease-out;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ content: 'Demo';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ color: rgb(249, 249, 249);
+ font-size: 32px;
+ opacity: 0;
+ transition: opacity 0.3s ease-out;
}
.demo-link:hover .demo-link-label {
- opacity: 1;
+ opacity: 1;
}
.buttons-unit {
- margin-top: 60px;
- text-align: center
+ margin-top: 60px;
+ text-align: center
}
.buttons-unit a {
- color: #61dafb
+ color: #61dafb
}
.buttons-unit .button {
- font-size: 24px;
- background: #cc7a6f;
- color: #fafafa
+ font-size: 24px;
+ background: #00abff;
+ color: #fafafa;
}
-.buttons-unit .button:active {
- background: #c5695c
+.buttons-unit .button:active, .buttons-unit .button:focus {
+ background: #00abff;
+ text-decoration: none;
}
.buttons-unit.downloads {
- margin: 30px 0
+ margin: 30px 0
}
.index-block {
- padding:40px 0;
+ padding: 40px 0;
}
.index-block h1 {
- text-align: center;
+ text-align: center;
}
.index-block.black {
- background: #f2f2f2;
+ background: #f2f2f2;
}
.why-items {
- display: flex;
- flex-direction: row;
- align-items: baseline;
- margin-top: 15px;
- padding-top: 15px;
+ display: flex;
+ flex-direction: row;
+ align-items: baseline;
+ margin-top: 15px;
+ padding-top: 15px;
}
.why-item {
- flex: 33%;
- text-align: center;
- padding: 0 15px;
+ flex: 33%;
+ text-align: center;
+ padding: 0 15px;
}
.why-item img {
- width: 110px;
+ width: 110px;
}
.nav-docs {
- color: #2d2d2d;
- font-size: 14px;
- float: left;
- width: 210px
+ color: #2d2d2d;
+ font-size: 14px;
+ float: left;
+ width: 210px
}
.nav-docs ul {
- list-style: none;
- margin: 0
+ list-style: none;
+ margin: 0
}
.nav-docs ul ul {
- margin: 6px 0 0 20px
+ margin: 6px 0 0 20px
}
.nav-docs li {
- line-height: 16px;
- margin: 0 0 6px
+ line-height: 16px;
+ margin: 0 0 6px
}
.nav-docs h3 {
- text-transform: uppercase;
- font-size: 14px
+ text-transform: uppercase;
+ font-size: 14px
}
.nav-docs a {
- color: #666;
- display: block
+ color: #666;
+ display: block
}
.nav-docs a:hover {
- text-decoration: none;
- color: #cc7a6f
+ text-decoration: none;
+ color: #cc7a6f
}
.nav-docs a.active {
- color: #cc7a6f
+ color: #cc7a6f
}
.nav-docs a.external:after {
- content: "";
- display: inline-block;
- width: 10px;
- height: 10px;
- padding-left: 5px;
- background-image: url("../img/external.png");
- background-position: 100% 0;
- background-repeat: no-repeat;
- font-size: 10px;
- line-height: 1em;
- opacity: 0.5
+ content: "";
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ padding-left: 5px;
+ background-image: url("../img/external.png");
+ background-position: 100% 0;
+ background-repeat: no-repeat;
+ font-size: 10px;
+ line-height: 1em;
+ opacity: 0.5
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
- .nav-docs a.external:after {
- background-image: url("../img/external_2x.png");
- background-size: 10px 10px
- }
+ .nav-docs a.external:after {
+ background-image: url("../img/external_2x.png");
+ background-size: 10px 10px
+ }
}
.nav-docs .nav-docs-section {
- border-bottom: 1px solid #ccc;
- border-top: 1px solid #eee;
- padding: 12px 0
+ border-bottom: 1px solid #ccc;
+ border-top: 1px solid #eee;
+ padding: 12px 0
}
.nav-docs .nav-docs-section:first-child {
- padding-top: 0;
- border-top: 0
+ padding-top: 0;
+ border-top: 0
}
.nav-docs .nav-docs-section:last-child {
- padding-bottom: 0;
- border-bottom: 0
+ padding-bottom: 0;
+ border-bottom: 0
}
.nav-blog li {
- margin-bottom: 5px
+ margin-bottom: 5px
}
.nav-docs-right {
- display: block;
- float: right;
- line-height: 50px;
+ display: block;
+ float: right;
+ line-height: 50px;
}
.nav-docs-right a {
- color: #c05b4d;
- text-decoration: none;
+ color: #00abff;
+ text-decoration: none;
}
.nav-docs-right a:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
.home-section {
- margin: 50px 0
+ margin: 50px 0
}
.home-divider {
- border-top-color: #bbb;
- margin: 0 auto;
- width: 400px
+ border-top-color: #bbb;
+ margin: 0 auto;
+ width: 400px
}
.skinny-row:after {
- content: "";
- display: table;
- clear: both
+ content: "";
+ display: table;
+ clear: both
}
.skinny-col {
- float: left;
- margin-left: 40px;
- width: 305px
+ float: left;
+ margin-left: 40px;
+ width: 305px
}
.skinny-col:first-child {
- margin-left: 0
+ margin-left: 0
}
.marketing-row {
- margin: 50px 0
+ margin: 50px 0
}
.marketing-row:after {
- content: "";
- display: table;
- clear: both
+ content: "";
+ display: table;
+ clear: both
}
.marketing-col {
- float: left;
- margin-left: 40px;
- width: 280px
+ float: left;
+ margin-left: 40px;
+ width: 280px
}
.marketing-col h3 {
- color: #2d2d2d;
- font-size: 24px;
- font-weight: normal;
- text-transform: uppercase
+ color: #2d2d2d;
+ font-size: 24px;
+ font-weight: normal;
+ text-transform: uppercase
}
.marketing-col p {
- font-size: 16px
+ font-size: 16px
}
.marketing-col:first-child {
- margin-left: 0
+ margin-left: 0
}
#examples h3, .home-presentation h3 {
- color: #2d2d2d;
- font-size: 24px;
- font-weight: normal;
- margin-bottom: 5px
+ color: #2d2d2d;
+ font-size: 24px;
+ font-weight: normal;
+ margin-bottom: 5px
}
#examples p {
- margin: 0 0 25px 0;
- max-width: 600px
+ margin: 0 0 25px 0;
+ max-width: 600px
}
#examples .example {
- margin-top: 60px
+ margin-top: 60px
}
#examples #todoExample {
- font-size: 14px
+ font-size: 14px
}
#examples #todoExample ul {
- list-style-type: square;
- margin: 0 0 10px 0
+ list-style-type: square;
+ margin: 0 0 10px 0
}
#examples #todoExample input {
- border: 1px solid #ccc;
- font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
- padding: 3px;
- width: 150px
+ border: 1px solid #ccc;
+ font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ padding: 3px;
+ width: 150px
}
#examples #todoExample button {
- font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
- margin-left: 5px;
- padding: 4px 10px
+ font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ margin-left: 5px;
+ padding: 4px 10px
}
#examples #markdownExample textarea {
- border: 1px solid #ccc;
- font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
- margin-bottom: 10px;
- padding: 5px
+ border: 1px solid #ccc;
+ font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ margin-bottom: 10px;
+ padding: 5px
}
.home-bottom-section {
- margin-bottom: 100px
+ margin-bottom: 100px
}
.docs-nextprev:after {
- content: "";
- display: table;
- clear: both
+ content: "";
+ display: table;
+ clear: both
}
.jsxCompiler {
- margin: 0 auto;
- padding-top: 20px;
- width: 1220px
+ margin: 0 auto;
+ padding-top: 20px;
+ width: 1220px
}
.jsxCompiler label.compiler-option {
- display: block;
- margin-top: 5px
+ display: block;
+ margin-top: 5px
}
.jsxCompiler #jsxCompiler {
- margin-top: 20px
+ margin-top: 20px
}
.jsxCompiler .playgroundPreview {
- padding: 0;
- width: 600px;
- word-wrap: break-word
+ padding: 0;
+ width: 600px;
+ word-wrap: break-word
}
.jsxCompiler .playgroundPreview pre {
- font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
- font-size: 13px;
- line-height: 1.5
+ font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
+ font-size: 13px;
+ line-height: 1.5
}
.jsxCompiler .playgroundError {
- padding: 15px 20px
+ padding: 15px 20px
}
.docs-prev {
- float: left
+ float: left
}
.docs-next {
- float: right
+ float: right
}
footer {
- font-size: 13px;
- font-weight: 600;
- margin-top: 36px;
- margin-bottom: 18px;
- overflow: auto
+ font-size: 13px;
+ font-weight: 600;
+ margin-top: 66px;
+ margin-bottom: 18px;
+ overflow: auto
}
section.black content {
- padding-bottom: 18px
+ padding-bottom: 18px
}
.blogContent {
- padding-top: 20px
+ padding-top: 20px
}
.blogContent:after {
- content: "";
- display: table;
- clear: both
+ content: "";
+ display: table;
+ clear: both
}
.blogContent blockquote {
- padding: 5px 15px;
- margin: 20px 0;
- background-color: #f8f5ec;
- border-left: 5px solid #f7ebc6
+ padding: 5px 15px;
+ margin: 20px 0;
+ background-color: #f8f5ec;
+ border-left: 5px solid #f7ebc6
}
.blogContent h2 > code {
- font-size: inherit;
- line-height: inherit;
- color: #555;
- background-color: rgba(0, 0, 0, 0.04)
+ font-size: inherit;
+ line-height: inherit;
+ color: #555;
+ background-color: rgba(0, 0, 0, 0.04)
}
.documentationContent {
- padding-top: 20px
+ padding-top: 20px
}
.documentationContent:after {
- content: "";
- display: table;
- clear: both
+ content: "";
+ display: table;
+ clear: both
}
.documentationContent .subHeader {
- font-size: 24px
+ font-size: 24px
}
.documentationContent h2 {
- margin-top: 30px
+ margin-top: 30px
}
.documentationContent blockquote {
- padding: 15px 30px 15px 15px;
- margin: 20px 0;
- background-color: rgba(204, 122, 111, 0.1);
- border-left: 5px solid rgba(191, 87, 73, 0.2)
+ padding: 15px 30px 15px 15px;
+ margin: 20px 0;
+ background-color: rgba(204, 122, 111, 0.1);
+ border-left: 5px solid rgba(191, 87, 73, 0.2)
}
.documentationContent blockquote h4 {
- margin-top: 0
+ margin-top: 0
}
.documentationContent blockquote p {
- margin-bottom: 0
+ margin-bottom: 0
}
.documentationContent blockquote p:first-child {
- font-weight: bold;
- font-size: 17.5px;
- line-height: 20px;
- margin-top: 0;
- text-rendering: optimizelegibility
+ font-weight: bold;
+ font-size: 17.5px;
+ line-height: 20px;
+ margin-top: 0;
+ text-rendering: optimizelegibility
}
.docs-prevnext {
- padding-top: 40px;
- padding-bottom: 40px
+ padding-top: 40px;
+ padding-bottom: 40px
}
.button {
- background: -webkit-linear-gradient(#9a9a9a, #646464);
- background: linear-gradient(#9a9a9a, #646464);
- border-radius: 4px;
- padding: 8px 16px;
- font-size: 18px;
- font-weight: 400;
- margin: 0 12px;
- display: inline-block;
- color: #fafafa;
- text-decoration: none;
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- text-decoration: none
+ background: -webkit-linear-gradient(#9a9a9a, #646464);
+ background: linear-gradient(#9a9a9a, #646464);
+ border-radius: 4px;
+ padding: 8px 16px;
+ font-size: 18px;
+ font-weight: 400;
+ margin: 0 12px;
+ display: inline-block;
+ color: #fafafa;
+ text-decoration: none;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+ text-decoration: none
}
.button:hover {
- text-decoration: none
+ text-decoration: none
}
.button:active {
- box-shadow: none
+ box-shadow: none
}
.hero .button {
- box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
+ box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
}
.button.blue {
- background: -webkit-linear-gradient(#77a3d2, #4783c2);
- background: linear-gradient(#77a3d2, #4783c2)
+ background: -webkit-linear-gradient(#77a3d2, #4783c2);
+ background: linear-gradient(#77a3d2, #4783c2)
}
.row {
- padding-bottom: 4px
+ padding-bottom: 4px
}
.row .span4 {
- width: 33.33%;
- display: table-cell
+ width: 33.33%;
+ display: table-cell
}
.row .span8 {
- width: 66.66%;
- display: table-cell
+ width: 66.66%;
+ display: table-cell
}
.row .span6 {
- width: 50%;
- display: table-cell
+ width: 50%;
+ display: table-cell
}
p {
- margin: 10px 0
+ margin: 10px 0
}
.highlight {
- padding: 10px;
- margin-bottom: 20px
+ padding: 10px;
+ margin-bottom: 20px
}
figure {
- text-align: center
+ text-align: center
}
.inner-content {
- float: right;
- width: 650px
+ float: right;
+ width: 650px
}
.nosidebar .inner-content {
- float: none;
- margin: 0 auto
+ float: none;
+ margin: 0 auto
}
.inner-content img {
- max-width: 100%;
+ max-width: 100%;
}
.inner-content table {
- border-collapse: collapse;
- width: 100%;
+ border-collapse: collapse;
+ width: 100%;
}
+
.inner-content th, .inner-content td {
- padding: 0.25rem;
- text-align: left;
- border: 1px solid #ccc;
+ padding: 0.25rem;
+ text-align: left;
+ border: 1px solid #ccc;
}
+
.inner-content tbody tr:nth-child(odd) {
- background: #eee;
+ background: #eee;
}
h1:after {
- content: "";
- display: table;
- clear: both
+ content: "";
+ display: table;
+ clear: both
}
.edit-page-link {
- float: right;
- font-size: 16px;
- font-weight: normal;
- line-height: 20px;
- margin-top: 17px
+ float: right;
+ font-size: 16px;
+ font-weight: normal;
+ line-height: 20px;
+ margin-top: 17px
}
.post-list-item + .post-list-item {
- margin-top: 60px
+ margin-top: 60px
}
/* code styling */
code {
- font-family: 'Anonymous Pro', sans-serif;
- font-size: 0.85em;
- color: #000;
+ font-family: 'Anonymous Pro', sans-serif;
+ font-size: 0.85em;
+ color: #000;
}
pre code {
- display: block;
- line-height: 1.1;
- color: #333333;
- background: #f8f5ec;
- padding: 30px 14px 14px;
- position: relative;
- overflow-x: auto;
+ display: block;
+ line-height: 1.1;
+ color: #333333;
+ background: #f8f5ec;
+ padding: 30px 14px 14px;
+ position: relative;
+ overflow-x: auto;
}
pre code:before {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- padding: 3px 7px;
- font-size: 12px;
- font-weight: bold;
- color: #c2c0bc;
- background-color: #f1ede4;
- content: "Code";
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ padding: 3px 7px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #c2c0bc;
+ background-color: #f1ede4;
+ content: "Code";
}
p code {
- padding: 0.1em 0.3em 0.2em;
- border-radius: 0.3em;
- position: relative;
- background: #fffff3;
+ padding: 0.1em 0.3em 0.2em;
+ border-radius: 0.3em;
+ position: relative;
+ background: #fffff3;
- white-space: nowrap;
+ white-space: nowrap;
}
/* syntax hl stuff */
code.lang-markdown {
- color: #424242;
+ color: #424242;
}
code.lang-markdown .header,
code.lang-markdown .strong {
- font-weight: bold;
+ font-weight: bold;
}
code.lang-markdown .emphasis {
- font-style: italic;
+ font-style: italic;
}
code.lang-markdown .horizontal_rule,
@@ -902,12 +930,12 @@ code.lang-markdown .link_label,
code.lang-markdown .code,
code.lang-markdown .header,
code.lang-markdown .link_url {
- color: #555;
+ color: #555;
}
code.lang-markdown .blockquote,
code.lang-markdown .bullet {
- color: #bbb;
+ color: #bbb;
}
/* Tomorrow Theme */
@@ -915,46 +943,45 @@ code.lang-markdown .bullet {
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
.tomorrow-comment, pre .comment, pre .title {
- color: #8e908c;
+ color: #8e908c;
}
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
- color: #c82829;
+ color: #c82829;
}
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
- color: #f5871f;
+ color: #f5871f;
}
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
- color: #eab700;
+ color: #eab700;
}
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
- color: #718c00;
+ color: #718c00;
}
.tomorrow-aqua, pre .css .hexcolor {
- color: #3e999f;
+ color: #3e999f;
}
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
- color: #4271ae;
+ color: #4271ae;
}
.tomorrow-purple, pre .keyword, pre .javascript .function {
- color: #8959a8;
+ color: #8959a8;
}
/* media queries */
-
@media screen and (max-width: 960px) {
- .nav-main {
- position: static
- }
+ .nav-main {
+ position: static
+ }
- .container {
- padding-top: 0
- }
-}
\ No newline at end of file
+ .container {
+ padding-top: 0
+ }
+}
diff --git a/docs/contents/images/favicon.png b/docs/contents/images/favicon.png
index 25606ff4..42861238 100644
Binary files a/docs/contents/images/favicon.png and b/docs/contents/images/favicon.png differ
diff --git a/docs/contents/images/logo.png b/docs/contents/images/logo.png
new file mode 100644
index 00000000..07a59adf
Binary files /dev/null and b/docs/contents/images/logo.png differ
diff --git a/docs/contents/images/sky-preview.png b/docs/contents/images/sky-preview.png
new file mode 100644
index 00000000..6b34db69
Binary files /dev/null and b/docs/contents/images/sky-preview.png differ
diff --git a/docs/contents/images/why-design.svg b/docs/contents/images/why-design.svg
index 94166144..0c3c68b4 100644
--- a/docs/contents/images/why-design.svg
+++ b/docs/contents/images/why-design.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/docs/contents/images/why-practices.svg b/docs/contents/images/why-practices.svg
index aeed6289..2e48d9f4 100644
--- a/docs/contents/images/why-practices.svg
+++ b/docs/contents/images/why-practices.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/docs/contents/images/why-structure.svg b/docs/contents/images/why-structure.svg
index 0d16bead..cd2ee7fe 100644
--- a/docs/contents/images/why-structure.svg
+++ b/docs/contents/images/why-structure.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/docs/templates/index.jade b/docs/templates/index.jade
index c37ab39b..615c3836 100644
--- a/docs/templates/index.jade
+++ b/docs/templates/index.jade
@@ -2,55 +2,45 @@
extends layout
block title
- | BlurAdmin angular admin dashboard template
+ | Admin HTML template based on Angular 2, Bootstrap 4 and Webpack
block content
div.hero
div.hero-content
div.wrap
div.text
- strong Blur#[span.white-text Admin]
- div.minitext Angular admin panel front-end framework
+ strong ng2-#[span.white-text admin]
+ div.minitext Angular 2 admin panel front-end framework
div.buttons-unit
a.button(href=installationArticleUrl) Installation guidelines
a.button(href=firstArticleUrl) Documentation
div.admin-screenshots
div.admin-screenshot
- h3 Mint version
- a.demo-link(href='http://akveo.com/blur-admin-mint/',target='_blank')
- img(src=contents.images['blur-preview-mint.jpg'].url)
- span.demo-link-label Demo
- div.admin-screenshot
- h3 Blur version (experimental)
- a.demo-link(href='http://akveo.com/blur-admin/',target='_blank')
- img(src=contents.images['blur-preview.jpg'].url)
- span.demo-link-label Demo
+ div.browser-mockup
+ a.demo-link(href='http://akveo.com/ng2-admin/',target='_blank')
+ img(src=contents.images['sky-preview.png'].url)
+ span.demo-link-label Demo
div.index-block
div.wrap
- h1 Why BlurAdmin?
+ h1 Why ng2-admin?
div.why-items
div.why-item
img(src=contents.images['why-structure.svg'].url)
h4 Awesome structure
- p Feature-based structure has proven itself as a good choice for large angular applications.
+ p Component-based structure is the best choice for large Angular 2 applications.
div.why-item
img(src=contents.images['why-design.svg'].url)
h4 Neat design
- p We have put a lot of efforts and carefully selected each color and character for this template!
+ p We have put a lot of efforts and carefully selected each color and font for this template!
div.why-item
img(src=contents.images['why-practices.svg'].url)
- h4 Ease of customization
+ h4 Ease for customization
p Check out #[a(href='/blur-admin/articles/011-changing-color-scheme') our article], where we describe how you can create different look in just 2 minutes!
div.index-block.black
div.wrap
h1 Is it free?
- p Blur admin is completely free and MIT licensed. That means you can do whatever you want with it.
- p
- | Initially we planned to sell it on template markets.
- | But they #[a(href='http://akveo.com/blog/why-i-hate-template-markets/',target='_blank') rejected us several times].
- | That's why we decided to make it open-source. And honestly, we have completely no regrets about it!
- | And we suggest you to not waste your money and use our template instead of paid ones!
- | Trust us, it's better than large number of them.
+ p Yes, ng2-admin is completely free and MIT licensed. That means you can do with it whatever you want.
+
div.index-block
div.wrap
h1 How can I support you guys?
@@ -64,6 +54,6 @@ block content
div.wrap
h1 Can I hire you?
p Yes! We are available for hire. Visit #[a(href='http://akveo.com',target='_blank') our homepage]
- | or simply leave us a note to #[a(href='mailto:contact@akveo.com') contact@akveo.com].
+ | or simply leave us a note at #[a(href='mailto:contact@akveo.com') contact@akveo.com].
| We will be happy to work with you!
diff --git a/docs/templates/layout.jade b/docs/templates/layout.jade
index 9fdb469f..f2ac19fe 100644
--- a/docs/templates/layout.jade
+++ b/docs/templates/layout.jade
@@ -16,6 +16,8 @@ html(lang='en')
= locals.name
link(rel='alternate', href=locals.url+'/feed.xml', type='application/rss+xml', title=locals.description)
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic')
+ link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css')
+
link(rel='stylesheet', href=contents.css['main.css'].url)
link(rel='shortcut icon', href=contents.images['favicon.png'].url)
body(class=bodyclass)
@@ -23,8 +25,8 @@ html(lang='en')
div.nav-main
div.wrap
a.nav-home(href=contents['index'].url)
- img.nav-logo(src=contents.images['blur-admin-logo.png'].url, width=36,height=36)
- | #[span.blur-label Blur]Admin
+ img.nav-logo(src=contents.images['logo.png'].url, width=24,height=24)
+ | #[span.blur-label ng2-]admin
ul.nav-site.nav-site-internal
li
a(class= locals.page.metadata.activeHome ? 'active': '')(href=contents['index'].url) Home
@@ -35,9 +37,8 @@ html(lang='en')
block content
h2 Welcome to blur admin!
footer.wrap
- div.left Powered by Angular, Bootsrap, Gulp and more...
+ div.left Powered by Angular 2, Bootstrap 4, Webpack and many more...
div.right
| © 2015–2016 Akveo LLC
| Documentation licensed under #[a(href='https://creativecommons.org/licenses/by/4.0/') CC BY 4.0].
- a(href='https://github.com/akveo/blur-admin')
- img(style='position: fixed; top: 0; right: 0; border: 0; z-index: 1000;',src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67',alt='Fork me on GitHub',data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png')
\ No newline at end of file
+ a(href='https://github.com/akveo/ng2-admin', class='github-fork-ribbon', title="Star & Fork on GitHub")