Improved tutorials
diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
new file mode 100644
index 0000000..0eb3194
--- /dev/null
+++ b/dev/scss/main/alertify.scss
@@ -0,0 +1,11 @@
+@import "../util";
+
+/*
+article.alertify-log {
+ text-shadow:none;
+}
+*/
+
+article.alertify-log-warn {
+ background-color: $dark-orange;
+}
diff --git a/dev/scss/main/highlight.scss b/dev/scss/main/highlight.scss
new file mode 100644
index 0000000..1c3cb99
--- /dev/null
+++ b/dev/scss/main/highlight.scss
@@ -0,0 +1,121 @@
+/*
+ * Based on github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+ */
+.hljs {
+ display: block;
+ padding: 0.5em;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+ color: #998;
+ font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+ color: #333;
+ font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+ color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+ color: #d14
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+ color: #900;
+ font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+ font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+ color: #458;
+ font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+ color: #000080;
+ font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+ color: #008080
+}
+
+.hljs-regexp {
+ color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+ color: #990073
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+ color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+ color: #999;
+ font-weight: bold
+}
+
+.hljs-deletion {
+ background: #fdd
+}
+
+.hljs-addition {
+ background: #dfd
+}
+
+.diff .hljs-change {
+ background: #0086b3
+}
+
+.hljs-chunk {
+ color: #aaa
+}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
new file mode 100644
index 0000000..f04cf9b
--- /dev/null
+++ b/dev/scss/main/kwic.scss
@@ -0,0 +1,293 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+#search {
+ position: relative;
+ margin-bottom: 44px;
+ overflow: visible;
+
+ &.match {
+ margin-top: 14pt;
+ }
+
+ ol {
+ width: auto;
+ overflow-x: hidden;
+ overflow-y: visible;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-indent: 0;
+ border: 1px solid $kwic-border;
+ font-size: 10pt;
+ > li {
+ border: {
+ style: solid;
+ color: $dark-orange;
+ width: 0;
+ }
+ &:not(.active):not(:target) {
+ width: 99999%;
+ margin-left: -49999.5%;
+ background-color: $kwic-line-noneven;
+ overflow-x: hidden;
+ overflow-y: visible;
+ white-space: no-wrap;
+ cursor: pointer;
+ padding: 5pt 0 6pt 0;
+ &:nth-of-type(even) {
+ background-color: $kwic-line-even;
+ }
+ .matchinfo {
+ display: none;
+ }
+ > div > div.snippet {
+ text-overflow: ellipsis;
+ text-indent: 0;
+ text-shadow: $light-shadow;
+ }
+ }
+ > div {
+ > div.snippet {
+ > span,
+ > mark {
+ white-space: no-wrap !important;
+ > span {
+ white-space: no-wrap !important;
+ }
+ color: #666;
+ }
+ > mark,
+ > span.match {
+ font-weight: bold;
+ /* text-shadow: $kwic-match-shadow; */
+ color: $kwic-match-color;
+ padding-left: 4pt;
+ padding-right: 2pt;
+ }
+ }
+ }
+ }
+
+ /* active view */
+ > li.active,
+ > li:target {
+ text-align: left;
+ width: auto;
+ cursor: normal;
+ white-space: wrap;
+ height: auto;
+ border-width: 2px;
+ background-color: $dark-orange;
+// @include light-noise;
+ position: relative;
+ > div {
+ min-height: 42pt;
+ > div.snippet {
+ background-color: $light-orange;
+ > * {
+ background-color: transparent;
+ }
+ padding: {
+ top: 0;
+ right: 0;
+ bottom: 5pt;
+ left: 5pt;
+ };
+ margin: {
+ top: 0;
+ right: $right-match-distance; // 3em;
+ bottom: 0;
+ left: 0; // 5pt margin-top
+ }
+ > span {
+ line-height: 1.4em;
+ width: auto;
+ &.context-left {
+ margin-left: 0;
+ display: inline;
+ overflow: visible;
+ text-align: left;
+ width: auto;
+ }
+ }
+ }
+ }
+ }
+
+ /* Actions */
+ > li {
+ ul.action {
+ display: none;
+ }
+
+ /* active actions */
+ &.active, &:target {
+ ul.action {
+ display: block;
+ }
+ }
+ &:not(.active):not(:target) p.ref {
+ display: none;
+ }
+ &.active p.ref,
+ &:target p.ref {
+// background-color: $dark-orange;
+ color: white;
+ padding: 3pt 10pt;
+ padding-right: $right-match-distance;
+ margin: 0pt;
+ width: 100%;
+ bottom: 0;
+ z-index: 30;
+ }
+ }
+ }
+}
+
+ul.action {
+// background-color: $dark-orange;
+ font-size: 12pt;
+ color: white;
+ text: {
+ shadow: none;
+ indent: 0;
+ }
+ margin: 0;
+ padding: 0;
+ z-index: 5;
+
+ list-style: {
+ type: none;
+ position: inline;
+ }
+ &.right {
+ position: absolute;
+ width: $right-match-distance;
+ float: right;
+ text-align: center;
+ padding: 0pt 3pt;
+ height: 100%;
+ right: 0;
+ top: 0;
+ li {
+ cursor: pointer;
+ color: white;
+ text-decoration: none;
+
+ > span {
+ @include blind;
+ }
+ &.close::after {
+ font-family: "FontAwesome";
+ content: $fa-close;
+ }
+ &.info::after {
+ font-family: "FontAwesome";
+ content: $fa-info;
+ }
+ }
+ }
+}
+
+/*
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
+ display: inline-block;
+ text-align: right;
+ width: 50.046%;
+}
+
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.separator {
+ width: 0px;
+ height: 1em;
+ margin-bottom: -2px;
+ display: inline-block;
+ line-height: 100%;
+ border: 1px solid #009EE0;
+ margin-left: 2px;
+ margin-right: 2px;
+}
+
+ol.align-free > li > div > div.snippet > span.right {
+ text-align: left;
+}
+*/
+
+ol.align-left > li > div > div.snippet > span.context-left {
+ display: inline-block;
+ text-align: right;
+ width: 50.01%;
+}
+
+ol.align-right {
+ text-align: right;
+ > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+ display: inline-block;
+ text-align: left;
+ width: 49.915%;
+ }
+}
+
+/**
+ * Highlights
+ */
+mark {
+ background-color: inherit;
+ color: inherit;
+}
+
+mark > mark,
+em,
+.level-0 {
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ padding-bottom: 0px;
+ font-style: normal;
+}
+
+mark > mark > mark,
+em > em,
+.level-1 {
+ padding-bottom: 3px;
+}
+
+mark > mark > mark > mark,
+em > em > em,
+.level-2 {
+ padding-bottom: 6px;
+}
+
+li {
+ &:not(.active) mark > mark > mark > mark,
+ &:not(.active) em > em > em {
+ line-height: 180%;
+ }
+ &.active mark > mark > mark > mark,
+ &.active em > em > em {
+ line-height: 250%;
+ }
+}
+
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+.class-3 { border-color: $kwic-highlight-3; }
+.class-4 { border-color: $kwic-highlight-4; }
+
+/*
+span.more:before {
+ content: "…";
+ padding-left: 2pt;
+ padding-right: 2pt;
+}
+*/
+
+div.snippet.startMore:before,
+div.snippet.endMore:after {
+ content: "…";
+ padding-left: 2pt;
+ padding-right: 2pt;
+}
+
+
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
new file mode 100644
index 0000000..1512a56
--- /dev/null
+++ b/dev/scss/main/logos.scss
@@ -0,0 +1,112 @@
+@charset "utf-8";
+@import "../util";
+
+.logo {
+ &::after {
+ content: "" !important;
+ }
+ > * {
+ background: {
+ repeat: no-repeat;
+ size: 90%;
+ position: 50% 50%;
+ }
+ > span {
+ margin-left: -3000px;
+ }
+ }
+}
+
+/**
+ * Background image for the front page
+ */
+#kalamar-bg {
+ position: fixed;
+ height: 110%;
+ width: 175%;
+ top: 0;
+ z-index: -5000;
+ opacity: .1;
+ background: {
+ image:url('#{$img-path}/korap-bg-kalamar.svg');
+ size: 50%;
+ repeat: no-repeat;
+ position: 50% 50%;
+ }
+}
+
+/**
+ * Logo table of the front page
+ */
+#logos {
+ position: relative;
+ text-align: right;
+ font-size: 85%;
+ right: 0;
+ width: 100%;
+ margin-left: $standard-margin;
+ padding-left: 60%;
+ > div {
+ border-top: 26px solid $dark-orange;
+ padding-right: 2em;
+ }
+ p {
+ text-align: left;
+ display: inline-block;
+ }
+}
+
+
+/**
+ * Logo: Institute for German Language
+ */
+#ids-logo {
+ display: block;
+ width: (910 / 60) + em;
+ height: (176 / 60) + em;
+ background: {
+ image:url('#{$img-path}/ids-institute-for-the-german-language.svg');
+ }
+}
+
+/**
+ * Logo: Member of the Leibniz Association
+ */
+#leibniz-logo {
+ display: block;
+ width: (199 / 20) + em;
+ height: (130 / 20) + em;
+ background: {
+ image:url('#{$img-path}/member-of-the-leibniz-association.svg');
+ }
+}
+
+/**
+ * Logo: KorAP
+ */
+h1 {
+ position: absolute;
+ margin: 0;
+ margin-left:15px;
+ left: 0;
+ top: 0;
+ width: 7.8em;
+ height: 2.4em;
+ z-index: 7200;
+ background: {
+ size: 72%;
+ image: url('#{$img-path}/korap-logo-kalamar.svg');
+ }
+}
+
+#overview {
+ text-align: center;
+ width: 100%;
+}
+
+/*
+#leibniz-logo, #ids-logo {
+ height: (130 / 20) + em;
+}
+
+*/
\ No newline at end of file
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
new file mode 100644
index 0000000..ea569fa
--- /dev/null
+++ b/dev/scss/main/main.scss
@@ -0,0 +1,12 @@
+@import "highlight"; // Navigation on the left side
+@import "kwic"; // Kwic view information
+@import "logos"; // Logo images
+@import "matchinfo"; // Match table and tree
+@import "pagination"; // Pagination
+@import "query"; // View query
+@import "resultinfo"; // Information on results
+@import "sidebar"; // Navigation on the left side
+@import "tutorial"; // Embedded and non-embedded tutorial
+@import "alertify";
+@import "alertify/alertify.core.css";
+@import "alertify/alertify.default.css";
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
new file mode 100644
index 0000000..a0be411
--- /dev/null
+++ b/dev/scss/main/matchinfo.scss
@@ -0,0 +1,241 @@
+@charset "utf-8";
+@import "../util";
+
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+@mixin cell-info {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 1px 6px;
+ margin: 0px;
+}
+
+/**
+ * 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 $darker-orange; // #ff8000;
+ width: $left-width / 2;
+}
+
+div.matchinfo {
+ position: relative;
+ width: 100%;
+ padding-top: $border-size;
+// background-color: $dark-orange;
+ height: auto;
+ font-size: 10pt;
+ text-align: left;
+ > p.addtree {
+ position: relative;
+ @include choose-item;
+ border: {
+ width: $border-size;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+
+ font-size: inherit;
+ margin: $border-size $border-size 0 $border-size !important;
+ width: $left-width;
+ text-align: center;
+ cursor: pointer;
+ padding: 0 !important;
+
+ &:hover {
+ cursor:pointer;
+ @include choose-hover;
+ }
+
+ *.menu {
+ border-top-right-radius: 8px;
+ position: absolute;
+ width: $left-width;
+ left: 0;
+ bottom: 0;
+ text-align: left;
+ margin: -1* $border-size;
+ margin-top: 0;
+ > li:first-of-type {
+ border-top-right-radius: 5px;
+ }
+ }
+ }
+}
+
+div.matchtable {
+ z-index: 20;
+ margin-left: $left-distance - ($border-size / 2);
+ margin-right: $right-match-distance;
+ 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 {
+ > 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;
+ }
+ > * {
+ @include cell-info;
+ border: ($border-size / 2) solid $dark-orange;
+ }
+ }
+ tr > td {
+ background-color: $middle-orange; // $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;
+ margin: 0;
+ padding: 0 !important;
+ float: left;
+ > span {
+ @include matchinfo-head;
+ @include cell-info;
+ display: inline-block;
+ margin: 0;
+ &:nth-of-type(2) {
+ margin-left: $border-size;
+ }
+ }
+ }
+ > div {
+ overflow-x: auto;
+ margin: $border-size;
+ margin-left: $left-distance;
+ margin-right: $right-match-distance;
+
+ background-color: $light-orange; // $nearly-white; // $light-orange;
+ > em {
+ color: $nearly-white;
+ cursor: pointer;
+ display: block;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: $right-match-distance;
+ border-width: 0;
+ z-index: 8;
+ text-decoration:none;
+ text-align: center;
+ font-weight: bold;
+ font-style: normal;
+
+ &::after {
+ font-family: 'FontAwesome';
+ content: $fa-close;
+ }
+ }
+ }
+}
+
+/**
+ * SVG tree
+ */
+path.edge {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: none;
+}
+
+g.root rect.empty {
+ stroke: $darker-orange;
+ fill: $darker-orange;
+ stroke-width: 2px;
+}
+
+g.middle rect {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: $middle-orange;
+}
+
+g.leaf > rect {
+ display: none;
+}
+
+g > text {
+ text-anchor: middle;
+ font-size: 9pt;
+}
+
+g.leaf > text {
+ font-size: 10pt;
+ overflow: visible;
+}
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
new file mode 100644
index 0000000..d057dd0
--- /dev/null
+++ b/dev/scss/main/pagination.scss
@@ -0,0 +1,114 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size : 2px;
+
+/**
+ * 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="#p=2"><span>2</span></a>
+ <a href="#3"><span>3</span></a>
+ <span><i class="fa fa-ellipsis-h"></i></span>
+ <a href="#67"><span>67</span></a>
+ <a rel="next" href="#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.
+ */
+ font-size: 0;
+ position: fixed;
+ right: 20px;
+ bottom: 24px;
+ z-index: 400;
+ padding: 0;
+ height: auto;
+ line-height: 0;
+
+ > a {
+ margin: 0;
+ font-size: 10pt;
+ padding: 0;
+
+ > span {
+ box-shadow: $choose-box-shadow;
+ @include standard-text-padding;
+ @include choose-item;
+ display: inline-block;
+ line-height: 2em;
+ text-align: center;
+ border: {
+ top-width: $border-size;
+ bottom-width: $border-size;
+ top-style: solid;
+ bottom-style: solid;
+ }
+ }
+
+ &:not(:link):not([rel=self]) span {
+ color: $choose-blind-color;
+ }
+
+ &.ellipsis > span {
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: $fa-elipsis;
+ }
+ }
+
+ &[rel=self] > span {
+ @include choose-active;
+ border {
+ left-width: $border-size;
+ right-width: $border-size;
+ left-style: solid;
+ right-style: solid;
+ }
+ }
+
+ &[rel=prev] > span {
+ border: {
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ left-width: $border-size;
+ left-style: solid;
+ }
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: $fa-previous;
+ }
+ }
+
+ &[rel=next] > span {
+ border: {
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ right-width: $border-size;
+ right-style: solid;
+ }
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: $fa-next;
+ }
+ }
+ &:link:hover span {
+ @include choose-hover;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/main/query.scss b/dev/scss/main/query.scss
new file mode 100644
index 0000000..ab45238
--- /dev/null
+++ b/dev/scss/main/query.scss
@@ -0,0 +1,24 @@
+@charset "utf-8";
+@import "../util";
+
+
+pre.query {
+ overflow-x: hidden;
+ cursor: pointer;
+ padding: .5em;
+ @include choose-item;
+ position:relative;
+ border: {
+ width: 2px;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ box-shadow: $choose-box-shadow;
+
+ &:hover {
+ @include choose-hover;
+ }
+ &:active {
+ @include choose-active;
+ }
+}
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
new file mode 100644
index 0000000..8717f72
--- /dev/null
+++ b/dev/scss/main/resultinfo.scss
@@ -0,0 +1,19 @@
+@charset "utf-8";
+@import "../util";
+
+div.resultinfo {
+ clear: both;
+
+ p.found {
+ font-size: 10pt;
+ padding: 0;
+ margin: 0;
+ text-align: right;
+ }
+}
+
+#total-results {
+ color: $total-results;
+ font-weight: bold;
+}
+
diff --git a/dev/scss/main/sidebar.scss b/dev/scss/main/sidebar.scss
new file mode 100644
index 0000000..7c74912
--- /dev/null
+++ b/dev/scss/main/sidebar.scss
@@ -0,0 +1,185 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+aside {
+ // box-shadow: 2px 2px 5px darken($dark-green, 15%);
+ // box-shadow: $choose-box-shadow;
+ outline: none;
+ display: block;
+ background-color: $dark-green;
+ position: fixed;
+ z-index: 7100;
+ color: $nearly-white;
+ width: $logo-left-distance;
+ top: 0;
+ left: 0;
+ height: 100%;
+ padding-top: 80px;
+ transition: all .3s ease-in-out;
+ > div {
+ overflow-y: auto;
+ overflow-x: visible;
+ max-height: 100%;
+ }
+ > * {
+ opacity: 1;
+ }
+ &::after {
+ display: block;
+ opacity: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin-right: -30px;
+ background-color: $dark-green;
+ font-family: FontAwesome;
+ content: $fa-bars;
+ font-size: 16pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ border-top-right-radius: $standard-border-radius;
+ }
+ h2 {
+ font: {
+ size: 100%;
+ weight: bold;
+ }
+ line-height: 2em;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ }
+
+ ul {
+ list-style-type: none;
+/*
+ background-color: $light-green;
+*/
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
+ li {
+ padding: 0;
+ > a {
+ padding: $item-padding;
+ }
+ > a:link {
+ @include choose-item;
+ border-right: {
+ width: $border-size;
+ style: solid;
+ }
+
+ display: block;
+ &:visited {
+ color: inherited;
+ }
+ &:hover {
+ // color: inherit;
+ transition: none;
+ @include choose-hover;
+ }
+ &.active, &:active {
+ @include choose-active;
+ }
+ }
+ h3 {
+ font: {
+ weight: bold;
+ size: 100%;
+ }
+ padding: 0;
+ margin: 0;
+ }
+/*
+ &.active {
+ text-shadow: none;
+ h3 {
+ margin-bottom: 2pt;
+ padding-bottom: 2pt;
+ border-bottom: 1px solid black;
+ }
+ }
+*/
+ > a {
+ padding-left: 6pt;
+ }
+ li > a {
+ padding-left: 18pt;
+ }
+ li li > a {
+ padding-left: 36pt;
+ }
+ }
+ }
+ nav > ul > li > a {
+ font-weight: bold;
+ }
+}
+
+
+aside:not(:focus):not(.active) {
+ margin-left: -1 * ($logo-left-distance - 15px);
+// box-shadow: none;
+/*
+ overflow-y: hidden;
+ overflow-x: visible;
+*/
+ &::after {
+ opacity: 1;
+ }
+ > * {
+ opacity: 0;
+ // TODO
+ transition: {
+ property: opacity;
+ duration: .3s;
+ }
+ }
+}
+
+/*
+#sidebar {
+ text-shadow: none;
+ height: 105%;
+ margin-top: -10px;
+ background-color: #496000;
+ left: 0;
+ top: 0;
+ &.active {
+ box-shadow: 2px 2px 5px darken($dark-green, 15%);
+ margin-left: 0px;
+ left: 0;
+ top: 0;
+ }
+ &:not(.active) > i.fa-bars {
+ opacity: 1;
+ cursor: pointer;
+ background-color: #496000;
+ position: fixed;
+ font-size: 16pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ bottom: 0;
+ left: 0;
+ border-top-right-radius: 5pt;
+ }
+ dl.info {
+ font-size: 9pt;
+ padding: 0 10pt;
+ > dt {
+ font-weight: bold;
+ float: left;
+ }
+ > dd {
+ text-align: right;
+ }
+ }
+}
+*/
\ No newline at end of file
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
new file mode 100644
index 0000000..3aeebb3
--- /dev/null
+++ b/dev/scss/main/tutorial.scss
@@ -0,0 +1,132 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+#tutorial {
+ position: fixed;
+ z-index: 9999;
+ top: 5%;
+ bottom: 5%;
+ left: 2%;
+ right: 2%;
+ padding-right: $right-match-distance;
+/*
+ padding: 0;
+ margin: 0;
+*/
+ background-color: $nearly-white;
+ ul.action {
+ background-color: $middle-grey;
+ display: block;
+ }
+ border: {
+ width: 2 * $border-size;
+// color: $dark-orange;
+ color: $dark-grey;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ box-shadow: $choose-box-shadow;
+ iframe {
+ border-width: 0;
+ width: 100%;
+ // Hack for a Firefox bug
+ min-height: 100.1%;
+ background: {
+ image:url('#{$img-path}/korap-bg-kalamar.svg');
+ repeat: no-repeat;
+ position: center center;
+ size: 20%;
+ }
+ }
+}
+
+body.embedded {
+ background-color: $nearly-white;
+ aside {
+/*
+ border-right: {
+ width: $border-size;
+ style: solid;
+ }
+*/
+ padding-top: 0;
+ @include choose-item;
+ background-color: $middle-grey;
+ > div {
+ position: relative;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ // margin-right: -1 * $border-size;
+ }
+ }
+}
+
+main.tutorial {
+ margin-left: $logo-left-distance + 15px;
+}
+
+/*
+#tutorial {
+ iframe {
+ width: 100%;
+ min-height: 100%;
+ border: {
+ width: 0;
+ radius: 10px;
+ }
+ background: {
+ image:url('#{$basepath}/img/korap-bg-kalamar.svg');
+ size: 10%;
+ repeat: no-repeat;
+ position: center center;
+ color: white;
+ }
+ }
+
+ display: block;
+ background-color: $dark-green;
+ border-radius: 15px;
+ &:not(.active) {
+ display: none;
+ }
+ &.active {
+ display: block;
+ }
+ > i,
+ > a > i {
+ font-size: 20pt;
+ color: $dark-green;
+ position: absolute;
+ background-color: rgba(255,255,255,0.5);
+ z-index: 100;
+ top: 10pt;
+ right: 20pt;
+ cursor: pointer;
+ }
+ > a > i {
+ right: 40pt;
+ }
+}
+
+div.test {
+ display: block;
+ border-left: 10px solid $dark-green;
+ margin: 1em;
+ padding-left: 5px;
+ p {
+ color: black;
+ &.fail {
+ font-weight: bold;
+ color: red;
+ }
+ &.pass {
+ font-weight: bold;
+ color: green;
+ }
+ }
+}
+*/
\ No newline at end of file