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 <vie...@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 ➊ through ➓ 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-unsubscr...@netbeans.apache.org
For additional commands, e-mail: commits-h...@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists
