Add grunt and coherent styles
diff --git a/public/scss/base.scss b/public/scss/base.scss
new file mode 100644
index 0000000..8337b78
--- /dev/null
+++ b/public/scss/base.scss
@@ -0,0 +1,8 @@
+@charset "utf-8";
+@import "colors";
+
+body, html, select {
+ color: $dark-grey;
+ font-family: verdana, tahoma, arial;
+ margin: 0;
+}
diff --git a/public/scss/colors.scss b/public/scss/colors.scss
new file mode 100644
index 0000000..40082e1
--- /dev/null
+++ b/public/scss/colors.scss
@@ -0,0 +1,61 @@
+/*
+ * Orange
+ */
+// $light-orange-2: #f4eebb;
+$light-orange: #ffe56a;
+// #ffd080;
+$dark-orange: #ffa500;
+$darker-orange: #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+
+// Yellow: #fff48d
+
+/*
+ * Blue
+ */
+$light-blue: #cfe6f4;
+$dark-blue: #73b2f4;
+$darkest-blue: darken($dark-blue, 40%);
+
+/*
+ * Green
+ */
+$dark-green: #496000;
+$middle-green: #688704;
+$light-green: #7ba400;
+
+/*
+ * Grey
+ */
+$light-grey: #ddd;
+$middle-grey: #999;
+$dark-grey: #333;
+// $nearly-white: #f5f5f5;
+$nearly-white: #fff;
+
+$light-shadow: 3px 3px 3px rgba(0,0,0,0.3);
+
+/**
+ * KWIC colors
+ */
+$kwic-border: $middle-grey;
+$kwic-line-noneven: $nearly-white;
+$kwic-line-even: $light-grey;
+$kwic-match-color: $dark-grey;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-1: #c1002b;
+$kwic-highlight-2: $dark-blue; // #009ee0;
+$kwic-highlight-3: $dark-orange; // #f29400;
+$kwic-highlight-4: $light-green;
+
+$pagination-bg: $light-grey;
+$pagination-border: $middle-grey;
+$pagination-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+
+$standard-border-radius: 6px;
+
+@mixin standard-text-padding {
+ padding-left: .4em;
+ padding-right: .4em;
+}
\ No newline at end of file
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
new file mode 100644
index 0000000..7526d92
--- /dev/null
+++ b/public/scss/kalamar.scss
@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@import "colors"; // Color varia
+
+@import "base"; // Base values
+@import "menu"; // Menu list
+@import "matchinfo"; // Match table and tree
+@import "pagination"; // Pagination
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
new file mode 100644
index 0000000..0ddea47
--- /dev/null
+++ b/public/scss/matchinfo.scss
@@ -0,0 +1,221 @@
+@charset "utf-8";
+@import "colors";
+
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+@mixin matchinfo-head {
+ border-width: 0px;
+ border-top: $border-size solid #ff8000;
+ width: $left-width / 2;
+}
+
+div.matchinfo {
+ position: relative;
+ width: 100%;
+ height: auto;
+ font-size: 10pt;
+ > p {
+ position: relative;
+ background-color: $darker-orange;
+ box-sizing: border-box;
+ color: $nearly-white;
+ font-size: inherit;
+ margin: $border-size 0 0 0 !important;
+ font-weight: bold;
+ width: $left-width;
+ text-align: left !important;
+ cursor: pointer;
+ padding-left: $border-size * 2 !important;
+ *.menu {
+ border-top-right-radius: 8px;
+ position: absolute;
+ top: 0;
+ left: $left-distance;
+ margin-top: 0;
+ > li:first-of-type {
+ border-top-right-radius: 5px;
+ }
+ }
+ &:before {
+ content: '+ '; // FontAwesome
+ }
+ }
+}
+
+div.matchtable {
+ z-index: 20;
+ margin-left: $left-distance - ($border-size / 2);
+ padding: 0;
+ overflow-x: auto;
+ overflow-y: visible;
+ width: auto;
+ table {
+ display: table;
+ border-collapse: separate;
+ border-spacing: 0px;
+ }
+ th {
+ color: $nearly-white;
+ }
+ thead {
+ tr th {
+ background-color: $darker-orange;
+ border-top-width: 0px !important;
+ }
+ }
+ tbody {
+ th {
+ text-overflow: ellipsis;
+ }
+ > tr:nth-of-type(1) > th {
+ border-top-color: transparent;
+ }
+ /**
+ * Click on a row and it's highlighted.
+ */
+ > tr:focus {
+ outline: none;
+ /*
+ outline: (2 * $border-size) solid $light-green;
+ -moz-outline-radius: $border-size;
+ outline-radius: $border-size;
+ */
+ background-color: $light-green;
+ border-color: $light-green;
+ td {
+ background-color: inherit;
+ color: $nearly-white;
+ border-color: $light-green;
+ }
+ }
+ }
+ tr {
+ /**
+ * The first two columns.
+ */
+ > th:nth-of-type(1),
+ > th:nth-of-type(2) {
+ position: absolute;
+ z-index: 80;
+ vertical-align: middle;
+ left: 0px;
+ @include matchinfo-head;
+ }
+ > th:nth-of-type(2) {
+ left: ($left-width / 2) + $border-size;
+ }
+ > * {
+ box-sizing: border-box;
+ padding: 1px 6px;
+ margin: 0px;
+ border: ($border-size / 2) solid $dark-orange;
+ }
+ }
+ tr > td {
+ background-color: $nearly-white;
+ white-space: nowrap;
+ vertical-align: top;
+ text-align: center;
+ }
+ tr:nth-child(even) > td {
+ background-color: $light-orange;
+ }
+}
+
+/**
+ * Tree view
+ */
+div.matchtree {
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: visible;
+ padding: 0;
+ margin-top: 1pt;
+
+ /**
+ * Label
+ */
+ h6 {
+ display: inline;
+ font-size: inherit;
+ color: $nearly-white;
+ text-align: center;
+ margin: 0;
+ padding: 0 !important;
+ float: left;
+ > span {
+ @include matchinfo-head;
+ display: inline-block;
+ margin: 0;
+ &:nth-of-type(2) {
+ margin-left: $border-size;
+ }
+ }
+ }
+ > div {
+ overflow-x: auto;
+ margin: $border-size;
+ box-sizing: border-box;
+ margin-left: $left-distance;
+ background-color: $nearly-white; // $light-orange;
+ > em {
+ background-color: $dark-orange;
+ display: block;
+ width: 1.5em;
+ height: 1.5em;
+ line-height: 1.2em;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ border-radius: 5px;
+ border: $border-size solid $darker-orange;
+ cursor: pointer;
+ text-align: center;
+ color: $nearly-white;
+ font-weight: bold;
+ font-style: normal;
+ &:after {
+ // FontAwesome
+ content: 'x';
+ }
+ }
+ }
+}
+
+/**
+ * SVG tree
+ */
+
+path.edge {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: none;
+}
+
+g.middle > rect {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: $light-orange; // $nearly-white;
+}
+
+g.leaf > rect {
+ display: none;
+}
+
+g > text {
+ text-anchor: middle;
+ font-size: 9pt;
+}
+
+g.leaf > text {
+ font-size: 10pt;
+ overflow: visible;
+}
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
new file mode 100644
index 0000000..43fab57
--- /dev/null
+++ b/public/scss/menu.scss
@@ -0,0 +1,97 @@
+@charset "utf-8";
+@import "colors";
+
+
+/**
+ * Menu list - used nearly everywhere
+ */
+ul.menu {
+ position: absolute;
+ margin: 0;
+ text-indent: 0;
+ list-style-type: none;
+ list-style-position: outside;
+ padding-left: 0;
+ padding-bottom: 3px;
+ background-color: $pagination-bg;
+}
+
+ul.menu,
+ul.menu > span.pref:not(:empty) {
+ box-sizing: border-box;
+ text-shadow: none;
+ font-weight: normal;
+ // Pagination border?
+ border: 2px solid $middle-green;
+ box-shadow: $pagination-box-shadow;
+ z-index: 16;
+ border-radius: $standard-border-radius;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(:empty) {
+ cursor: pointer;
+ padding: 3px 10px;
+ white-space: normal;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(.active) {
+ background-color: $pagination-bg;
+ color: $light-green
+}
+
+/**
+ * List items
+ */
+ul.menu {
+ > li {
+ &:first-of-type {
+ border-top: 3px solid transparent;
+ &:not(.no-more) {
+ border-top-color: $dark-orange;
+ }
+ }
+ &:last-of-type {
+ border-bottom: 3px solid transparent;
+ &:not(.no-more) {
+ border-bottom-color: $dark-orange;
+ }
+ }
+ mark {
+ text-decoration: underline;
+ background-color: transparent;
+ color: inherit;
+ font-weight: bold;
+ }
+ }
+ > *.active {
+ background-color: $light-green;
+ color: $dark-green;
+ }
+ > li:hover,
+ > span.pref:hover {
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+}
+
+
+/**
+ * Default prefix view
+ */
+ul.menu > span.pref:not(:empty) {
+ position: absolute;
+ min-width: 5px;
+/*
+ border-bottom-right-radius: 10px;
+*/
+ font-size: 80%;
+ left: 0;
+ bottom: 0;
+ display: block;
+ margin-bottom: -2.1em;
+ padding: 2px 6px;
+ margin-left: -2px;
+ border-radius: $standard-border-radius;
+}
diff --git a/public/scss/pagination.scss b/public/scss/pagination.scss
new file mode 100644
index 0000000..c0cfdd1
--- /dev/null
+++ b/public/scss/pagination.scss
@@ -0,0 +1,85 @@
+@charset "utf-8";
+@import "colors";
+
+/**
+ * The pagination view
+ */
+/*
+<div id="pagination">
+ <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
+ <a rel="self"><span>1</span></a>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=2"><span>2</span></a>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=3"><span>3</span></a>
+ <span><i class="fa fa-ellipsis-h"></i></span>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=67"><span>67</span></a>
+ <a rel="next" href="/?ql=poliqarp&q=test&action=ok&p=2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+#pagination {
+ /**
+ * Always in fixed position.
+ * This may need to be overwritten in case multiple
+ * paginations have to be activated.
+ */
+ position: fixed;
+ right: 20px;
+
+ bottom: 10px;
+ z-index: 400;
+
+ span {
+ display: inline-block;
+ background-color: $pagination-bg;
+ height: 1.5em;
+ line-height: 1.5em;
+ @include standard-text-padding;
+ text-align: center;
+ border: {
+ top-width: 2px;
+ top-style: solid;
+ bottom-width: 2px;
+ bottom-style: solid;
+ color: $pagination-border;
+ }
+ box-shadow: $pagination-box-shadow;
+ }
+ a {
+ text-shadow: $light-shadow;
+ &[rel=self] span {
+ border: {
+ color: $dark-orange;
+ left-style: solid;
+ right-style: solid;
+ left-width: 2px;
+ right-width: 2px;
+ }
+ background-color: $light-orange;
+ color: $darkest-orange;
+ }
+ &[rel=next] span {
+ border: {
+ right-width: 2px;
+ right-style: solid;
+ top-right-radius: 12px;
+ bottom-right-radius: 12px;
+ }
+ }
+ &[rel=prev] span {
+ border: {
+ left-width: 2px;
+ left-style: solid;
+ top-left-radius: 12px;
+ bottom-left-radius: 12px;
+ }
+ }
+ &[href] {
+ color: $light-green;
+ span:hover {
+ background-color: $light-green;
+ border-color: $dark-green;
+ color: $dark-green;
+ text-shadow: none;
+ }
+ }
+ }
+}