[incubator-netbeans-website] branch master updated: Adding icons to notes (#184)

[vi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

vieiro pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-netbeans-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 4138730  Adding icons to notes (#184)
4138730 is described below

commit 4138730db7e521a31219e4d8921a590a7bba6547
Author: Antonio Vieiro <vi...@users.noreply.github.com>
AuthorDate: Fri Jan 18 23:28:44 2019 +0100

    Adding icons to notes (#184)
    
    Admonitions use now font-awesome icons.
---
 .../src/content/scss/base/_colors.scss             |   4 +
 .../content/scss/components/_awesome-icons.scss    | 119 +++++++++++++++++++++
 netbeans.apache.org/src/content/scss/netbeans.scss |   1 +
 3 files changed, 124 insertions(+)

diff --git a/netbeans.apache.org/src/content/scss/base/_colors.scss b/netbeans.apache.org/src/content/scss/base/_colors.scss
index 78e8fbe..8b440be 100644
--- a/netbeans.apache.org/src/content/scss/base/_colors.scss
+++ b/netbeans.apache.org/src/content/scss/base/_colors.scss
@@ -33,3 +33,7 @@ $nb-body-background: #fff;
 $nb-pre-background: #fafafb;
 $nb-pre-border-color: #6290c5;
 $nb-card-background: #fafafb;
+
+$nb-green: #a1c535;
+$nb-magenta: #a5073e;
+$nb-blue: #1b6ac6;
diff --git a/netbeans.apache.org/src/content/scss/components/_awesome-icons.scss b/netbeans.apache.org/src/content/scss/components/_awesome-icons.scss
new file mode 100644
index 0000000..43cf6db
--- /dev/null
+++ b/netbeans.apache.org/src/content/scss/components/_awesome-icons.scss
@@ -0,0 +1,119 @@
+//@import "../fonts/font-awesome";
+
+/*
+Taken from 
+https://github.com/asciidoctor/asciidoctor-stylesheet-factory/blob/master/sass/components/_awesome-icons.scss
+(MIT License)
+*/
+
+span.icon > .fa {
+  cursor: default;
+  a & {
+    cursor: inherit;
+  }
+}
+
+.admonitionblock td.icon {
+  [class^="fa icon-"] {
+    font-size: 2.5em;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    cursor: default;
+  }
+  
+  .icon-note:before {
+    // @extend .fa-thumb-tack;
+    //content: "\f08d";
+    //color: scale-color(green, $lightness: $rainbow-lightness);
+
+    //@extend .fa-info-circle;
+    content: "\f05a";
+    //color: scale-color(mediumblue, $lightness: $rainbow-lightness);
+    //color: $primary-color;
+    color: $nb-blue;
+    // color: scale-color($primary-color, $lightness: $rainbow-lightness);
+  }
+  
+  .icon-tip:before {
+    // @extend .fa-info-circle;
+    //content: "\f05a";
+    //color: scale-color(mediumblue, $lightness: $rainbow-lightness);
+    // @extend .fa-lightbulb-o;
+    content: "\f0eb";
+    //color: scale-color(yellow, $lightness: $rainbow-lightness);
+    //color: scale-color(yellow, $saturation: -15%);
+    //color: $primary-color;
+    text-shadow: 1px 1px 2px rgba(155, 155, 0, .8);
+    color: $nb-green;
+  }
+  
+  .icon-warning:before {
+    // @extend .fa-exclamation-triangle;
+    content: "\f071";
+    color: $nb-magenta;
+  }
+
+  .icon-caution:before {
+    // @extend .fa-fire;
+    content: "\f06d";
+    color: $nb-magenta;
+  }
+  
+  .icon-important:before {
+    // @extend .icon-exclamation-circle;
+    content: "\f06a";
+    color: $nb-blue;
+  }
+}
+
+// alternatively could use &#10122; through &#10131 to get the numbered circles,
+// then style them as appropriate; would need to output them in the text, though
+.conum[data-value] {
+  display: inline-block;
+  color: #fff !important;
+  background-color: $body-font-color;
+  border-radius: 100px;
+  text-align: center;
+  font-size: 0.75em;
+  //width: 1.5em;
+  //height: 1.5em;
+  //line-height: 1.5em;
+  width: 1.67em;
+  height: 1.67em;
+  line-height: 1.67em;
+  // FIXME make this font a variable
+  font-family: "Open Sans", "DejaVu Sans", sans-serif;
+  font-style: normal;
+  // QUESTION should the callout numbers be regular weight?
+  font-weight: bold;
+  // text-indent only seems to be required for webkit
+  //text-indent: -1px;
+
+  & * {
+    color: #fff !important;
+  }
+
+  & + b {
+    display: none;
+  }
+
+  &:after {
+    content: attr(data-value);
+  }
+
+  pre & {
+    position: relative;
+    top: -0.125em;
+  }
+}
+
+// hack to disallow syntax highlighting from changing the color
+b.conum * {
+  color: inherit !important;
+}
+
+// hack for when highlight.js adds a bogus element into DOM
+// QUESTION should we solve this w/ javascript instead?
+.conum:not([data-value]):empty {
+  display: none;
+}
+
diff --git a/netbeans.apache.org/src/content/scss/netbeans.scss b/netbeans.apache.org/src/content/scss/netbeans.scss
index b5e423f..3c26a37 100644
--- a/netbeans.apache.org/src/content/scss/netbeans.scss
+++ b/netbeans.apache.org/src/content/scss/netbeans.scss
@@ -35,6 +35,7 @@
 
 @import "common/netbeans";
 
+@import "components/awesome-icons.scss";
 @import "components/footer";
 @import "components/card";
 @import "components/features";


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists