From 7ea85c1189a512e45db8399076f65420967cef38 Mon Sep 17 00:00:00 2001 From: tibing Date: Fri, 15 Jul 2016 14:48:42 +0300 Subject: [PATCH] refactor(docs\*.css): refactor css code style --- docs/config.json | 4 + docs/contents/css/{main.css => main.scss} | 221 ++++++++-------------- docs/package.json | 5 +- docs/templates/article.jade | 2 +- docs/templates/index.jade | 12 +- docs/templates/layout.jade | 2 +- 6 files changed, 90 insertions(+), 156 deletions(-) rename docs/contents/css/{main.css => main.scss} (84%) diff --git a/docs/config.json b/docs/config.json index 7558b408..55daa13f 100644 --- a/docs/config.json +++ b/docs/config.json @@ -7,8 +7,12 @@ "description": "" }, "plugins": [ + "wintersmith-sassy", "./plugins/paginator.coffee" ], + "sass": { + "debug": "undefined" + }, "require": { "moment": "moment", "_": "underscore", diff --git a/docs/contents/css/main.css b/docs/contents/css/main.scss similarity index 84% rename from docs/contents/css/main.css rename to docs/contents/css/main.scss index bf71d67b..e47c124e 100644 --- a/docs/contents/css/main.css +++ b/docs/contents/css/main.scss @@ -1,3 +1,11 @@ +@mixin header { + margin: 10px 0; + font-family: inherit; + font-weight: bold; + color: inherit; + text-rendering: optimizelegibility; +} + html { font-family: 'Source Sans Pro', sans-serif; color: #484848; @@ -12,73 +20,69 @@ p { margin: 0 0 10px } -.subHeader { - font-size: 21px; - font-weight: 200; - line-height: 30px; - margin-bottom: 10px -} - em { 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 -} - -h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - font-weight: normal; - color: #7b7b7b -} - -h1, h2, h3 { - line-height: 40px -} - h1 { + @include header; + + line-height: 40px; font-size: 39px } h2 { - font-size: 31px + @include header; + + line-height: 40px; + margin-top: 30px; + font-size: 31px; } h3 { - font-size: 23px + @include header; + + line-height: 40px; + font-size: 23px; } h4 { - font-size: 16px + @include header; + + line-height: 20px; + font-size: 16px; } h5 { - font-size: 14px + @include header; + + line-height: 40px; + text-transform: uppercase; + font-size: 14px; } h6 { - font-size: 11px + @include header; + + line-height: 20px; + 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 { @@ -114,15 +118,7 @@ a:focus { text-align: center } -html * { - color-profile: sRGB; - rendering-intent: auto -} - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +body, pre { border: none; margin: 0; padding: 0 @@ -151,8 +147,11 @@ html { box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; } -.browser-mockup > * { +.browser-mockup a { display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; border: 1px solid #ddd; width: 100%; } @@ -172,18 +171,20 @@ html { .wrap { width: 1060px; + box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 20px; - padding-right: 20px + padding-right: 20px; } .skinnyWrap { width: 690px; + box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 20px; - padding-right: 20px + padding-right: 20px; } hr { @@ -334,6 +335,9 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li .hero .admin-screenshot { width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; padding: 0 15px; text-align: center; } @@ -368,6 +372,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li left: 0; width: 100%; height: 100%; + background: black; background: rgba(0, 0, 0, 0.5); color: rgb(249, 249, 249); font-size: 32px; @@ -399,22 +404,18 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li text-decoration: none; } -.buttons-unit.downloads { - margin: 30px 0 -} - .index-block { padding: 40px 0; + + &:nth-child(even) { + background: #f2f2f2; + } } -.index-block h1 { +.centered { text-align: center; } -.index-block.black { - background: #f2f2f2; -} - .why-items { display: flex; flex-direction: row; @@ -426,6 +427,9 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li .why-item { flex: 33%; text-align: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; padding: 0 15px; } @@ -454,11 +458,6 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li margin: 0 0 6px } -.nav-docs h3 { - text-transform: uppercase; - font-size: 14px -} - .nav-docs a { color: #666; display: block @@ -478,10 +477,11 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li display: inline-block; width: 10px; height: 10px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; padding-left: 5px; - background-image: url("../img/external.png"); - background-position: 100% 0; - background-repeat: no-repeat; + background: url("../img/external.png") 100% 0 no-repeat; font-size: 10px; line-height: 1em; opacity: 0.5 @@ -568,14 +568,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li .marketing-col { float: left; margin-left: 40px; - width: 280px -} - -.marketing-col h3 { - color: #2d2d2d; - font-size: 24px; - font-weight: normal; - text-transform: uppercase + width: 280px; } .marketing-col p { @@ -586,51 +579,6 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li margin-left: 0 } -#examples h3, .home-presentation h3 { - color: #2d2d2d; - font-size: 24px; - font-weight: normal; - margin-bottom: 5px -} - -#examples p { - margin: 0 0 25px 0; - max-width: 600px -} - -#examples .example { - margin-top: 60px -} - -#examples #todoExample { - font-size: 14px -} - -#examples #todoExample ul { - 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 -} - -#examples #todoExample button { - 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 -} - .home-bottom-section { margin-bottom: 100px } @@ -647,15 +595,11 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li width: 1220px } -.jsxCompiler label.compiler-option { +.jsxCompiler .compiler-option { display: block; margin-top: 5px } -.jsxCompiler #jsxCompiler { - margin-top: 20px -} - .jsxCompiler .playgroundPreview { padding: 0; width: 600px; @@ -688,10 +632,6 @@ footer { overflow: auto } -section.black content { - padding-bottom: 18px -} - .blogContent { padding-top: 20px } @@ -709,10 +649,11 @@ section.black content { border-left: 5px solid #f7ebc6 } -.blogContent h2 > code { +.blogContent code { font-size: inherit; line-height: inherit; color: #555; + background-color: black; background-color: rgba(0, 0, 0, 0.04) } @@ -726,23 +667,13 @@ section.black content { clear: both } -.documentationContent .subHeader { - font-size: 24px -} - -.documentationContent h2 { - margin-top: 30px -} - .documentationContent blockquote { padding: 15px 30px 15px 15px; margin: 20px 0; + background-color: black; background-color: rgba(204, 122, 111, 0.1); - border-left: 5px solid rgba(191, 87, 73, 0.2) -} - -.documentationContent blockquote h4 { - margin-top: 0 + border-left: 5px solid black; + border-left: 5px solid rgba(191, 87, 73, 0.2); } .documentationContent blockquote p { @@ -764,7 +695,11 @@ section.black content { .button { background: -webkit-linear-gradient(#9a9a9a, #646464); - background: linear-gradient(#9a9a9a, #646464); + background: -moz-linear-gradient(#9a9a9a, #646464); + background: -ms-linear-gradient(#9a9a9a, #646464); + background: -o-linear-gradient(#9a9a9a, #646464); + background: -webkit-gradient(#9a9a9a, #646464); + background: linear-gradient(#9a9a9a, #646464); border-radius: 4px; padding: 8px 16px; font-size: 18px; @@ -775,7 +710,6 @@ section.black content { 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 { @@ -790,11 +724,6 @@ section.black content { box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3) } -.button.blue { - background: -webkit-linear-gradient(#77a3d2, #4783c2); - background: linear-gradient(#77a3d2, #4783c2) -} - .row { padding-bottom: 4px } diff --git a/docs/package.json b/docs/package.json index 30285e52..292fc2f6 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,9 +1,10 @@ { "dependencies": { - "wintersmith": "2.3.1", "moment": "2.3.x", + "typogr": "0.5.x", "underscore": "1.4.x", - "typogr": "0.5.x" + "wintersmith": "2.3.1", + "wintersmith-sassy": "^1.0.0" }, "private": true } diff --git a/docs/templates/article.jade b/docs/templates/article.jade index 46b1c9b7..5d75f36e 100644 --- a/docs/templates/article.jade +++ b/docs/templates/article.jade @@ -9,7 +9,7 @@ block content div.nav-docs each group in groupedArticles div.nav-docs.section - h3=group.groupName + h5=group.groupName ul each article in group.items li diff --git a/docs/templates/index.jade b/docs/templates/index.jade index ce7898e3..4dac8180 100644 --- a/docs/templates/index.jade +++ b/docs/templates/index.jade @@ -22,7 +22,7 @@ block content span.demo-link-label Demo div.index-block div.wrap - h1 Why ng2-admin? + h1.centered Why ng2-admin? div.why-items div.why-item img(src=contents.images['why-structure.svg'].url) @@ -36,23 +36,23 @@ block content img(src=contents.images['why-practices.svg'].url) h4 Ease of customization p Check out #[a(href='/ng2-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.index-block div.wrap - h1 Is it free? + h1.centered Is it free? 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? + h1.centered How can I support you guys? p Here's what you can do: ul li Star #[a(href='https://github.com/akveo/ng2-admin',target='_blank') our GitHub repo] li Create pull requests, submit bugs, suggest new features li Follow #[a(href='https://twitter.com/akveo_inc',target='_blank') us on Twitter] li Like #[a(href='https://www.facebook.com/akveo/',target='_blank') our page on Facebook] - div.index-block.black + div.index-block div.wrap - h1 Can I hire you? + h1.centered 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 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 f2ac19fe..23cf5ba4 100644 --- a/docs/templates/layout.jade +++ b/docs/templates/layout.jade @@ -18,7 +18,7 @@ html(lang='en') 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='stylesheet', href=contents.css['main.scss'].url) link(rel='shortcut icon', href=contents.images['favicon.png'].url) body(class=bodyclass) div.container