You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openwhisk.apache.org by pd...@apache.org on 2018/08/08 22:16:58 UTC
[incubator-openwhisk-website] branch master updated: Fix terminal
style and add code syntax highlighting support (#287)
This is an automated email from the ASF dual-hosted git repository.
pdesai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-openwhisk-website.git
The following commit(s) were added to refs/heads/master by this push:
new f56e402 Fix terminal style and add code syntax highlighting support (#287)
f56e402 is described below
commit f56e4024ee831cf772c4eca924d9939d17b4b42f
Author: Matt Rutkowski <mr...@us.ibm.com>
AuthorDate: Wed Aug 8 17:16:56 2018 -0500
Fix terminal style and add code syntax highlighting support (#287)
* Add support for rouge syntax highlighting and custom style sheet
* Add support for rouge syntax highlighting and custom style sheet
---
_scss/_base.scss | 23 -------------
_scss/_highlite-syntax-colors.scss | 69 ++++++++++++++++++++++++++++++++++++++
_scss/_skin.scss | 33 +++++++++++++++---
_scss/_variables.scss | 38 ++++++++++-----------
css/highlite-syntax-colors.css | 69 ++++++++++++++++++++++++++++++++++++++
css/main.scss | 1 +
6 files changed, 185 insertions(+), 48 deletions(-)
diff --git a/_scss/_base.scss b/_scss/_base.scss
index 257136f..55c353c 100644
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -39,14 +39,6 @@ footer {
padding: $whisk-footer-base-padding-base;
}
-// Note: options: white-space: normal|nowrap|pre|pre-line|pre-wrap
-// Note: non-std. options: white-space: -moz-pre-wrap | -o-pre-wrap;
-pre {
- white-space: pre;
- display: inline;
- margin: 0px;
-}
-
.header {
display: flex;
justify-content: space-evenly;
@@ -145,21 +137,6 @@ pre {
padding: 0px;
}
-// TODO: move sizes to variables.
-.terminal {
- background: $color-terminal-bg;
- color: $color-terminal-fg;
- border: 1px solid $color-terminal-border;
- font-family: $font-family-code;
- font-weight: 300;
- font-size: 14px;
- line-height: 140%;
- // top right bottom left
- padding: 4px 4px 4px 8px;
- max-width: 700px;
- margin-bottom: 10px;
-}
-
// Header is only shown on the "home" page
#whiskHeader {
background-color: $color-blue-dark;
diff --git a/_scss/_highlite-syntax-colors.scss b/_scss/_highlite-syntax-colors.scss
new file mode 100644
index 0000000..b6fa748
--- /dev/null
+++ b/_scss/_highlite-syntax-colors.scss
@@ -0,0 +1,69 @@
+.highlight .hll { background-color: inherit; font-family: inherit; }
+.highlight { background: inherit; font-family: inherit;}
+.highlight .c { color: #99AA8A } /* Comment */
+.highlight .err { color: #960050; background-color: inherit } /* Error */
+.highlight .k { color: #93C763; font-weight: 400 } /* Keyword */
+.highlight .o { color: #E8E2B7 } /* Operator */
+.highlight .ch { color: #99AA8A } /* Comment.Hashbang */
+.highlight .cm { color: #99AA8A } /* Comment.Multiline */
+.highlight .cp { color: #99AA8A } /* Comment.Preproc */
+.highlight .cpf { color: #99AA8A } /* Comment.PreprocFile */
+.highlight .c1 { color: #99AA8A } /* Comment.Single */
+.highlight .cs { color: #99AA8A; font-weight: 400 } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: 400 } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #99AA8A } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: 400 } /* Generic.Prompt */
+.highlight .gs { font-weight: 400 } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: 400 } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #93C763; font-weight: 400 } /* Keyword.Constant */
+.highlight .kd { color: #93C763; font-weight: 400 } /* Keyword.Declaration */
+.highlight .kn { color: #E8E2B7; font-weight: 400 } /* Keyword.Namespace */
+.highlight .kp { color: #003388; font-weight: 400 } /* Keyword.Pseudo */
+.highlight .kr { color: #93C763; font-weight: 400 } /* Keyword.Reserved */
+.highlight .kt { color: #83D8E1; font-weight: 400 } /* Keyword.Type */
+.highlight .m { color: #6600EE; font-weight: 400 } /* Literal.Number */
+.highlight .s { color: #EC7600; background-color: inherit } /* Literal.String */
+.highlight .na { color: #678CB1 } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #678CB1; font-weight: 400 } /* Name.Class */
+.highlight .no { color: #003366; font-weight: 400 } /* Name.Constant */
+.highlight .nd { color: #555555; font-weight: 400 } /* Name.Decorator */
+.highlight .ni { color: #880000; font-weight: 400 } /* Name.Entity */
+.highlight .ne { color: #FF0000; font-weight: 400 } /* Name.Exception */
+.highlight .nf { color: #0066BB; font-weight: 400 } /* Name.Function */
+.highlight .nl { color: #997700; font-weight: 400 } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: 400 } /* Name.Namespace */
+.highlight .nt { color: #007700 } /* Name.Tag */
+.highlight .nv { color: #996633 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: 400 } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #6600EE; font-weight: 400 } /* Literal.Number.Bin */
+.highlight .mf { color: #6600EE; font-weight: 400 } /* Literal.Number.Float */
+.highlight .mh { color: #005588; font-weight: 400 } /* Literal.Number.Hex */
+.highlight .mi { color: #0000DD; font-weight: 400 } /* Literal.Number.Integer */
+.highlight .mo { color: #4400EE; font-weight: 400 } /* Literal.Number.Oct */
+.highlight .sa { background-color: inherit } /* Literal.String.Affix */
+.highlight .sb { background-color: inherit } /* Literal.String.Backtick */
+.highlight .sc { color: #0044DD } /* Literal.String.Char */
+.highlight .dl { background-color: inherit } /* Literal.String.Delimiter */
+.highlight .sd { color: #DD4422 } /* Literal.String.Doc */
+.highlight .s2 { color: #EC7600; background-color: inherit } /* Literal.String.Double */
+.highlight .se { color: #666666; font-weight: 400; background-color: #fff0f0 } /* Literal.String.Escape */
+.highlight .sh { color: #EC7600; background-color: inherit } /* Literal.String.Heredoc */
+.highlight .si { color: #EC7600; background-color: inherit } /* Literal.String.Interpol */
+.highlight .sx { color: #DD2200; background-color: inherit } /* Literal.String.Other */
+.highlight .sr { color: #EC7600; background-color: inherit } /* Literal.String.Regex */
+.highlight .s1 { color: #EC7600; background-color: inherit } /* Literal.String.Single */
+.highlight .ss { color: #AA6600 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #0066BB; font-weight: 400 } /* Name.Function.Magic */
+.highlight .vc { color: #336699 } /* Name.Variable.Class */
+.highlight .vg { color: #dd7700; font-weight: 400 } /* Name.Variable.Global */
+.highlight .vi { color: #3333BB } /* Name.Variable.Instance */
+.highlight .vm { color: #996633 } /* Name.Variable.Magic */
+.highlight .il { color: #0000DD; font-weight: 400 } /* Literal.Number.Integer.Long */
diff --git a/_scss/_skin.scss b/_scss/_skin.scss
index 1ba120b..60bcd88 100644
--- a/_scss/_skin.scss
+++ b/_scss/_skin.scss
@@ -1,7 +1,6 @@
* {
box-sizing: border-box;
- font-family: $font-family-default;
background: none;
border: 0
}
@@ -56,10 +55,9 @@ p, ul, ol, li {
line-height: 18px;
}
-a {color: $color-anchors }
-a:visited { color: $color-anchors; }
-a:hover { color: $color-anchors; }
-a:active { color: $color-anchors; }
+a, a:visited, a:hover, a:active {
+ color: $color-anchors;
+}
a.button {
color: white;
@@ -98,3 +96,28 @@ a.button {
box-shadow: inset 0 10px 15px 0 $color-gray-percent-78;
top:2px;
}
+
+/*
+ * Terminal / Code formatting
+ */
+// TODO: move sizes to variables.
+.terminal {
+ background: $color-terminal-bg;
+ color: $color-terminal-fg;
+ border: 1px solid $color-terminal-border;
+ padding: 4px 4px 4px 8px;
+ width: 700px;
+ margin-bottom: 10px;
+
+ // Note: options: white-space: normal|nowrap|pre|pre-line|pre-wrap
+ // Note: non-std. options: white-space: -moz-pre-wrap | -o-pre-wrap;
+ pre {
+ white-space: pre;
+ display: inline;
+ margin: 0px;
+ font-family: $font-family-code;
+ font-weight: 300;
+ font-size: 14px;
+ line-height: 140%;
+ }
+}
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index 2ddbefa..a60dcb5 100644
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -71,8 +71,6 @@ $logo-height: 80px;
* Theme Colors
*/
-$color-blue-light: #ebf1f9;
-$color-blue-medium: #88addd;
$color-blue-dark: #29558f;
$color-blue-black: #0b1828;
$color-blue-hover: transparentize($color-blue-dark, 0.94);
@@ -185,26 +183,25 @@ $p-line-height: $line-height-default;
/*
* Header
*/
+ $header-base-h1-font-size: 32px;
+ $header-base-h1-font-weight: 300;
+ $header-base-h1-font-style: normal;
+ $header-base-h1-line-height: 42px;
-$header-tablet-h1-font-size: 36px;
-$header-tablet-h1-font-weight: 300;
-$header-tablet-h1-font-style: normal;
-$header-tablet-h1-line-height: 44px;
+ $header-base-h5-font-size: 14px;
+ $header-base-h5-font-weight: 300;
+ $header-base-h5-font-style: normal;
+ $header-base-h5-line-height: 28px;
-$header-tablet-h5-font-size: 16px;
-$header-tablet-h5-font-weight: 300;
-$header-tablet-h5-font-style: normal;
-$header-tablet-h5-line-height: 28px;
+ $header-tablet-h1-font-size: $header-base-h1-font-size + 4px;
+ $header-tablet-h1-font-weight: $header-base-h1-font-weight;
+ $header-tablet-h1-font-style: $header-base-h1-font-style;
+ $header-tablet-h1-line-height: $header-base-h1-line-height + 2px;
-$header-base-h1-font-size: 32px;
-$header-base-h1-font-weight: $header-tablet-h1-font-weight;
-$header-base-h1-font-style: $header-tablet-h1-font-style;
-$header-base-h1-line-height: 42px;
-
-$header-base-h5-font-size: 14px;
-$header-base-h5-font-weight: $header-tablet-h5-font-weight;
-$header-base-h5-font-style: $header-tablet-h5-font-style;
-$header-base-h5-line-height: $header-tablet-h5-line-height;
+ $header-tablet-h5-font-size: $header-base-h5-font-size + 2px;
+ $header-tablet-h5-font-weight: $header-base-h5-font-weight;
+ $header-tablet-h5-font-style: $header-base-h5-font-style;
+ $header-tablet-h5-line-height: $header-base-h5-line-height;
/*
* Index
@@ -253,5 +250,6 @@ $color-menuitem-collapsible-border: 1px solid transparent;
*/
$color-terminal-border: $color-blue-gray-light;
+// TODO if we adopt a color, we should add it to our theme colors
$color-terminal-bg: #001a33;
-$color-terminal-fg: white;
+$color-terminal-fg: $color-white;
diff --git a/css/highlite-syntax-colors.css b/css/highlite-syntax-colors.css
new file mode 100644
index 0000000..beb6212
--- /dev/null
+++ b/css/highlite-syntax-colors.css
@@ -0,0 +1,69 @@
+.highlight .hll { background-color: inherit }
+.highlight { background: inherit; }
+.highlight .c { color: #888888 } /* Comment */
+.highlight .err { color: #FF0000; background-color: inherit } /* Error */
+.highlight .k { color: #008800; font-weight: bold } /* Keyword */
+.highlight .o { color: #333333 } /* Operator */
+.highlight .ch { color: #888888 } /* Comment.Hashbang */
+.highlight .cm { color: #888888 } /* Comment.Multiline */
+.highlight .cp { color: #557799 } /* Comment.Preproc */
+.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
+.highlight .c1 { color: #888888 } /* Comment.Single */
+.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #003388; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #333399; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #6600EE; font-weight: bold } /* Literal.Number */
+.highlight .s { background-color: inherit } /* Literal.String */
+.highlight .na { color: #0000CC } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #BB0066; font-weight: bold } /* Name.Class */
+.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
+.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #880000; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #FF0000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0066BB; font-weight: bold } /* Name.Function */
+.highlight .nl { color: #997700; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #007700 } /* Name.Tag */
+.highlight .nv { color: #996633 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #6600EE; font-weight: bold } /* Literal.Number.Bin */
+.highlight .mf { color: #6600EE; font-weight: bold } /* Literal.Number.Float */
+.highlight .mh { color: #005588; font-weight: bold } /* Literal.Number.Hex */
+.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
+.highlight .mo { color: #4400EE; font-weight: bold } /* Literal.Number.Oct */
+.highlight .sa { background-color: inherit } /* Literal.String.Affix */
+.highlight .sb { background-color: inherit } /* Literal.String.Backtick */
+.highlight .sc { color: #0044DD } /* Literal.String.Char */
+.highlight .dl { background-color: inherit } /* Literal.String.Delimiter */
+.highlight .sd { color: #DD4422 } /* Literal.String.Doc */
+.highlight .s2 { background-color: inherit } /* Literal.String.Double */
+.highlight .se { color: #666666; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
+.highlight .sh { background-color: inherit } /* Literal.String.Heredoc */
+.highlight .si { background-color: inherit } /* Literal.String.Interpol */
+.highlight .sx { color: #DD2200; background-color: inherit } /* Literal.String.Other */
+.highlight .sr { color: #000000; background-color: inherit } /* Literal.String.Regex */
+.highlight .s1 { background-color: inherit } /* Literal.String.Single */
+.highlight .ss { color: #AA6600 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #0066BB; font-weight: bold } /* Name.Function.Magic */
+.highlight .vc { color: #336699 } /* Name.Variable.Class */
+.highlight .vg { color: #dd7700; font-weight: bold } /* Name.Variable.Global */
+.highlight .vi { color: #3333BB } /* Name.Variable.Instance */
+.highlight .vm { color: #996633 } /* Name.Variable.Magic */
+.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
diff --git a/css/main.scss b/css/main.scss
index b64e714..a24146f 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -5,6 +5,7 @@
@import "variables";
@import "reset";
@import "skin";
+@import "highlite-syntax-colors";
@import "base";
@import "tablet";