From 18dd901f9a8a608543a6fb64d9aae33c58ee208e Mon Sep 17 00:00:00 2001 From: Ashish Acharya Date: Mon, 30 Nov 2015 20:21:19 +0530 Subject: [PATCH] Content pages styling for typography + WIP MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Need to figure out: - How to detect home page and change header styling - Where breadcrumbs are included in the layout - Where “Improve this Page” is included and how to get it in line with the “Next” link (in docs) --- frappe/public/css/docs.css | 107 +++++++++++++++++++++++++++++++++-- frappe/public/less/docs.less | 59 +++++++++++++++++-- 2 files changed, 155 insertions(+), 11 deletions(-) diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css index 98df9db47a..32a53b2a1c 100644 --- a/frappe/public/css/docs.css +++ b/frappe/public/css/docs.css @@ -295,7 +295,7 @@ body { } .page-container .webpage-content ul, .page-container .webpage-content ol { - margin-bottom: 6px; + margin-bottom: 26px; } #page-index { padding-top: 0; @@ -307,7 +307,86 @@ body { margin: 0; } code { - color: #ff0000; + color: #e66a12; + background: #fff6df; +} +pre { + background: #fafbfc; + border: 1px solid #e1e9f0; + border-radius: 2px; +} +.hljs { + background: transparent; + border: none; + padding: 1.2em 1.5em 1.5em; + color: #454e57; +} +.hljs-keyword, +.hljs-tag, +.css .hljs-class, +.css .hljs-id, +.lisp .hljs-title, +.nginx .hljs-title, +.hljs-request, +.hljs-status, +.clojure .hljs-attribute { + color: #e66a12; +} +.diff .hljs-deletion, +.hljs-string, +.hljs-tag .hljs-value, +.hljs-preprocessor, +.hljs-pragma, +.hljs-built_in, +.hljs-javadoc, +.smalltalk .hljs-class, +.smalltalk .hljs-localvars, +.smalltalk .hljs-array, +.css .hljs-rules .hljs-value, +.hljs-attr_selector, +.hljs-pseudo, +.apache .hljs-cbracket, +.tex .hljs-formula, +.coffeescript .hljs-attribute { + color: #dd4a68; +} +.hljs-number, +.hljs-date, +.hljs-regexp, +.hljs-literal, +.hljs-hexcolor, +.smalltalk .hljs-symbol, +.smalltalk .hljs-char, +.go .hljs-constant, +.hljs-change, +.lasso .hljs-variable, +.makefile .hljs-variable, +.asciidoc .hljs-bullet, +.markdown .hljs-bullet, +.asciidoc .hljs-link_url, +.markdown .hljs-link_url { + color: #7575ff; +} +.hljs-shebang, +.diff .hljs-addition, +.hljs-comment, +.hljs-annotation, +.hljs-template_comment, +.hljs-pi, +.hljs-doctype { + color: #6a906a; +} +.dos .hljs-keyword, +.hljs-decorator, +.hljs-title, +.hljs-type, +.diff .hljs-header, +.ruby .hljs-class .hljs-parent, +.apache .hljs-tag, +.nginx .hljs-built_in, +.tex .hljs-command, +.hljs-prompt { + color: #4f4fa4; } .navbar { position: absolute; @@ -328,7 +407,7 @@ code { line-height: 1.5em; color: #8D99A6; background-color: transparent; - margin-bottom: 10px; + margin-bottom: 32px; padding: 0px; } .breadcrumb a, @@ -352,9 +431,24 @@ a.btn-primary:focus, a.btn-primary:visited { color: #fff; } +.btn-next-wrapper { + margin: 32px 0 16px; +} h2 { + margin-top: 48px; font-size: 24px; } +h3, +h4 { + margin-top: 48px; +} +p { + margin-bottom: 16px; +} +.hero-and-content > p { + max-width: 723px; + margin: 0 auto; +} .navbar { background-color: transparent; border: none; @@ -377,6 +471,7 @@ h2 { font-size: 14px; } .docs-footer h3 { + margin-top: 24px; font-size: 16px; } .docs-footer img.frappe-bird { @@ -450,11 +545,11 @@ h2 { border-radius: 15px; } .screenshot { - border: 2px solid #d1d8dd; + border: 1px solid #d1d8dd; box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15); - margin: 30px 0px; + margin: 8px 0px; max-width: 100%; } hr { - margin: 30px 0px; + margin: 48px 0px 30px; } diff --git a/frappe/public/less/docs.less b/frappe/public/less/docs.less index d79e751ebf..3d871fcb31 100644 --- a/frappe/public/less/docs.less +++ b/frappe/public/less/docs.less @@ -88,9 +88,39 @@ body { } code{ - color: #ff0000; + color: #e66a12; + background: #fff6df; } +pre { + background:#fafbfc; + border: 1px solid #e1e9f0; + border-radius:2px; +} + +.hljs { + background:transparent; + border:none; + padding:1.2em 1.5em 1.5em; + color:#454e57; +} + +.hljs-keyword, .hljs-tag, .css .hljs-class, .css .hljs-id, .lisp .hljs-title, .nginx .hljs-title, .hljs-request, .hljs-status, .clojure .hljs-attribute{ + color:#e66a12; + } + .diff .hljs-deletion, .hljs-string, .hljs-tag .hljs-value, .hljs-preprocessor, .hljs-pragma, .hljs-built_in, .hljs-javadoc, .smalltalk .hljs-class, .smalltalk .hljs-localvars, .smalltalk .hljs-array, .css .hljs-rules .hljs-value, .hljs-attr_selector, .hljs-pseudo, .apache .hljs-cbracket, .tex .hljs-formula, .coffeescript .hljs-attribute{ + color:#dd4a68; + } + .hljs-number, .hljs-date, .hljs-regexp, .hljs-literal, .hljs-hexcolor, .smalltalk .hljs-symbol, .smalltalk .hljs-char, .go .hljs-constant, .hljs-change, .lasso .hljs-variable, .makefile .hljs-variable, .asciidoc .hljs-bullet, .markdown .hljs-bullet, .asciidoc .hljs-link_url, .markdown .hljs-link_url{ + color:#7575ff; + } + .hljs-shebang, .diff .hljs-addition, .hljs-comment, .hljs-annotation, .hljs-template_comment, .hljs-pi, .hljs-doctype{ + color:#6a906a; + } + .dos .hljs-keyword, .hljs-decorator, .hljs-title, .hljs-type, .diff .hljs-header, .ruby .hljs-class .hljs-parent, .apache .hljs-tag, .nginx .hljs-built_in, .tex .hljs-command, .hljs-prompt { + color:#4f4fa4; + } + .navbar { //background-color: @navbar-bg !important; //background-color: @text-color !important; @@ -115,7 +145,7 @@ code{ line-height: 1.5em; color: @text-muted; background-color: transparent; - margin-bottom: 10px; + margin-bottom: 32px; padding: 0px; } .breadcrumb a, @@ -137,10 +167,28 @@ a.btn-primary& { } } +.btn-next-wrapper { + margin:32px 0 16px; +} + h2 { + margin-top:48px; font-size: 24px; } +h3, h4 { + margin-top:48px; +} + +p { + margin-bottom:16px; +} + +.hero-and-content > p { + max-width:723px; + margin:0 auto; +} + .navbar { background-color: transparent; border: none; @@ -166,6 +214,7 @@ h2 { font-size: 14px; h3 { + margin-top:24px; font-size:16px; } img.frappe-bird { @@ -252,12 +301,12 @@ h2 { } .screenshot { - border: 2px solid @border-color; + border: 1px solid @border-color; box-shadow: 1px 1px 7px rgba(0,0,0,0.15); - margin: 30px 0px; + margin: 8px 0px; max-width: 100%; } hr { - margin: 30px 0px; + margin: 48px 0px 30px; }