Fixed tutorial design
diff --git a/public/img/korap-bg-kalamar.svg b/public/img/korap-bg-kalamar.svg
index 2d885e0..7ec3c0a 100644
--- a/public/img/korap-bg-kalamar.svg
+++ b/public/img/korap-bg-kalamar.svg
@@ -1,50 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
- xmlns:cc="http://creativecommons.org/ns#"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
+<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="195.90726"
height="195.79347">
- <g transform="matrix(-2.555441,0,0,2.555441,-265.32464,-14.501228)" style="opacity:0.2">
- <g
- transform="matrix(0.47473464,0,0,0.47473464,-90.679487,-143.90007)"
- id="g4167"
- style="fill:#496000;fill-opacity:1">
- <g
- id="g4171"
- style="fill:#496000;fill-opacity:1">
- <path
- d="m -41.0625,316.71875 c -9.576308,1.01227 -20.437266,3.97659 -29.25,7.9375 -12.689388,4.5451 -17.191568,11.74018 -24.8125,23.4375 -11.15001,-20.80692 -41.92684,-26.49295 -41.8125,21.8125 19.56928,-37.23779 25.50612,-2.99825 18.56887,0.52807 -6.86631,3.49026 -13.44723,13.16503 -18.87854,20.52748 -4.82783,2.6553 -11.25044,5.91984 -19.19033,14.56945 -12.14063,1.68579 -22.40697,-0.0589 -25.34375,5.0625 -1.92028,4.88459 -0.83547,28.6183 -1.34375,35.5625 -0.55023,7.5173 -4.47505,20.2185 -4.40625,27.78125 0.0449,4.93417 13.37698,-12.52554 26.0625,-13.9375 14.32568,-1.59452 20.40751,-0.6761 31.21875,-1.84375 3.43365,-0.38537 6.60948,-1.10948 8.71875,-3.21875 4.52684,-4.79348 0.17472,-20.54012 -0.29959,-24.04322 8.88011,-4.01684 12.99872,-10.88406 16.73709,-16.70678 3.77753,-0.95969 15.445077,-3.54975 21,-16.34375 7.291276,-0.62721 24.237611,-3.90486 11.375,16.46875 -6.517142,10.32276 3.151699,23.79009 20.8125,23.75 1.965174,-0.004 -17.965788,-13.53523 -1.5,-27.15625 6.115872,-5.05925 1.147006,-24.90772 -1.8125,-28.03125 8.5569,-3.5296 16.780975,-7.81843 24.028066,-11.61639 -5.695239,-3.30642 -12.406435,-4.85672 -18.403066,-4.82111 5.354884,-3.41771 16.921224,-11.53597 20.25,-16.09375 -11.616163,-0.86442 -19.285929,-0.0412 -27.78125,2.8125 9.452491,-6.90785 8.090662,-15.36938 18.71875,-24 -8.87593,1.32852 -13.462677,3.88184 -18.255425,7.21014 6.099195,-6.84313 11.408663,-11.09351 15.599175,-19.64764 z m -12.441804,7.73597 c -11.095923,11.19905 -13.975386,11.23168 -18.558196,17.23278 -6.054124,7.92777 -5.560879,14.47415 -6.5625,18.21875 -1.7769,6.64303 -7.715317,4.85942 -13.0625,15.53125 14.183728,-6.21639 24.683497,-12.45862 46.25,-18.375 -9.461391,8.73077 -24.403941,17.1424 -25.21875,18.25 -2.183992,3.18854 -5.444043,10.06958 -11.15625,15.3125 2.408839,-7.40462 1.715415,-13.1914 0.25,-11.875 -5.549237,4.98497 -4.613076,19.29372 -12.65625,24.78125 -19.7524,13.47626 -22.75335,1.44128 -25.46875,3.53125 -3.95231,3.04198 5.19443,6.03907 8.84375,7.09375 -12.45497,22.57734 -15.33207,-1.01345 -17.5625,0.9375 -2.34427,3.49555 -4.94017,10.31391 1.65625,27.03125 4.79214,12.14474 -5.64918,9.38439 -28.6875,10.03125 -6.33671,0.17792 -7.40723,0.64601 -16.875,3.40625 -3.67924,1.07265 -6.43347,0.3457 -4.09375,-7.375 6.22132,-21.48923 25.63482,-51.11456 47.1875,-51.78125 5.41258,0.0202 -2.85402,-4.43244 -1.15625,-7 1.14364,-1.71649 1.69063,-3.07836 4.875,-6.78125 3.1993,-3.72024 7.1807,-7.23815 10.6875,-8.4375 9.9105,-3.38947 16.179182,-10.5037 20.9375,-17.75 4.758318,-7.2463 9.760842,-14.98099 13.790979,-19.5625 8.399265,-7.13109 17.947719,-11.1466 26.579717,-12.42028 z m -46.383609,29.16486 c -2.130107,3.06203 -4.848197,5.48276 -8.829717,8.99027 -0.70108,-9.35992 -4.24033,-21.15662 -15.27919,-16.24664 6.35844,-8.45156 16.77027,-5.51365 24.108907,7.25637 z m -11.674587,23.91167 c -4.03898,0.1203 -13.63356,6.71296 -11.3125,7.3125 3.448,0.89065 5.85746,-3.06506 6.65625,-2 0.79879,1.06505 -3.98884,6.11989 -2.125,8.25 1.86385,2.13011 10.52138,-10.92425 8.125,-13.1875 -0.29955,-0.28291 -0.76675,-0.39219 -1.34375,-0.375 z m 13.78125,5.6875 c -12.17132,-0.16801 -21.14791,15.22012 -16.3125,23.46875 1.53677,2.62156 3.3125,-3.75 3.3125,-3.75 0,0 3.11795,3.53663 14,-2.375 8.402975,-4.56488 4,-12 4,-12 0,0 4.71202,-2.54027 0.375,-4.25 -1.837848,-0.72451 -3.636241,-1.06975 -5.375,-1.09375 z m 35.75,1.59375 c 2.263242,2.13011 10.208153,17.39173 3.34375,24 -10.703205,10.30384 -6.124144,19.34772 -2.063621,23.07541 0,0 -16.825481,-4.92207 -3.316804,-22.83402 5.115247,-6.78261 -1.725255,-19.11178 -10.487087,-17.76291 4.526484,-3.3283 9.31616,-5.23421 12.523762,-6.47848 z M -96,389.34375 c 3.349039,6.48058 -5.80905,12.7184 -13.5625,10.6875 3.59456,-5.45841 7.17217,-9.62245 13.5625,-10.6875 z m -3.28125,2.28125 c -0.93337,0.009 -2.08278,0.50309 -3.03125,1.40625 -1.51756,1.44506 -2.00642,3.38529 -1.09375,4.34375 0.91267,0.95846 2.88869,0.57006 4.40625,-0.875 1.517557,-1.44506 2.006417,-3.38529 1.09375,-4.34375 -0.34225,-0.35942 -0.814977,-0.5364 -1.375,-0.53125 z"
- id="path4173"
- style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#496000;fill-opacity:1;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
- </g>
- </g>
- <path
- d="m -176.97468,76.132038 c 3.66892,-22.18235 14.96757,-30.383963 22.94726,-33.347803 1.27219,-5.14938 6.59805,-9.4801 9.57511,-11.39108 0.68163,-6.57435 0.11697,-10.26917 -7.42897,-9.07985 4.67098,-11.431859 9.85548,-5.06313 16.26642,1.25279 4.87196,-8.593909 12.80709,-13.405639 22.03403,-15.1201895 -10.85637,14.2560195 -13.23298,18.2087195 4.63293,15.8484595 -13.16158,10.00294 -9.87643,11.28363 -7.36105,18.67589 3.60963,9.323133 -9.91949,10.306293 -0.69901,20.139683 -11.87742,-4.81211 -7.3161,-6.57437 -4.75936,-15.985363 -1.36508,-4.65767 -4.24601,-3.42634 -9.23554,-3.65072 -2.88772,5.960093 -5.5152,6.463833 -10.53638,8.516663 -2.43179,4.2103 -4.4081,6.88534 -8.77893,8.11858 0,0 1.71986,3.18045 1.33117,10.75998 -8.96555,3.22634 -13.2267,-1.42912 -27.98768,5.26296 z"
- id="path4177"
- style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- d="m -128.47797,42.300723 c 2.34699,-3.935129 5.13394,-5.872187 9.23746,-7.145693 2.94179,6.287649 5.36031,10.921465 1.6071,16.10053 -3.23294,4.461148 -1.86432,6.61053 -0.98684,11.51872 -15.442,-5.658242 6.22305,-16.18535 -9.85772,-20.473557 z"
- id="path3849"
- style="fill:#7ba400;fill-opacity:1;stroke:none" />
- <path
- d="m -164.87316,72.481865 c -0.74468,-14.044694 7.86713,-23.388402 14.77871,-27.182268 0,0 -0.32824,-5.905702 7.38936,-9.764503 4.22248,-2.111245 8.44497,-5.805921 9.50059,-7.917165 1.05563,-2.111244 2.63906,-8.972788 13.19528,-12.139654 2.33047,-0.699142 5.27811,-6.8615423 5.27811,-6.8615423 0,0 -15.30652,0.7917165 -20.84854,15.5704243 -6.63964,-10.838563 -15.66632,-9.257562 -17.41776,-0.527811 l 6.33373,-2.37515 2.90296,6.333733 0,4.222488 c -6.12474,2.815086 -8.99771,6.053032 -12.13965,11.611842 -17.19331,10.885233 -16.23564,14.016018 -21.64025,31.404755 z"
- id="path3847"
- style="fill:#7ba400;fill-opacity:1;stroke:none" />
- <g
- transform="matrix(0.47473464,0,0,0.47473464,-90.679487,-143.90007)"
- id="g4179"
- style="fill:#496000;fill-opacity:1">
- <g
- id="g4183"
- style="fill:#496000;fill-opacity:1">
- <path
- d="m -41.0625,316.71875 c -9.576308,1.01227 -20.437266,3.97659 -29.25,7.9375 -12.689388,4.5451 -17.191568,11.74018 -24.8125,23.4375 -11.15001,-20.80692 -41.92684,-26.49295 -41.8125,21.8125 19.56928,-37.23779 25.50612,-2.99825 18.56887,0.52807 -6.86631,3.49026 -13.44723,13.16503 -18.87854,20.52748 -4.82783,2.6553 -11.25044,5.91984 -19.19033,14.56945 -12.14063,1.68579 -22.40697,-0.0589 -25.34375,5.0625 -1.92028,4.88459 -0.83547,28.6183 -1.34375,35.5625 -0.55023,7.5173 -4.47505,20.2185 -4.40625,27.78125 0.0449,4.93417 13.37698,-12.52554 26.0625,-13.9375 14.32568,-1.59452 20.40751,-0.6761 31.21875,-1.84375 3.43365,-0.38537 6.60948,-1.10948 8.71875,-3.21875 4.52684,-4.79348 0.17472,-20.54012 -0.29959,-24.04322 8.88011,-4.01684 12.99872,-10.88406 16.73709,-16.70678 3.77753,-0.95969 15.445077,-3.54975 21,-16.34375 7.291276,-0.62721 24.237611,-3.90486 11.375,16.46875 -6.517142,10.32276 3.151699,23.79009 20.8125,23.75 1.965174,-0.004 -17.965788,-13.53523 -1.5,-27.15625 6.115872,-5.05925 1.147006,-24.90772 -1.8125,-28.03125 8.5569,-3.5296 16.780975,-7.81843 24.028066,-11.61639 -5.695239,-3.30642 -12.406435,-4.85672 -18.403066,-4.82111 5.354884,-3.41771 16.921224,-11.53597 20.25,-16.09375 -11.616163,-0.86442 -19.285929,-0.0412 -27.78125,2.8125 9.452491,-6.90785 8.090662,-15.36938 18.71875,-24 -8.87593,1.32852 -13.462677,3.88184 -18.255425,7.21014 6.099195,-6.84313 11.408663,-11.09351 15.599175,-19.64764 z m -12.441804,7.73597 c -11.095923,11.19905 -13.975386,11.23168 -18.558196,17.23278 -6.054124,7.92777 -5.560879,14.47415 -6.5625,18.21875 -1.7769,6.64303 -7.715317,4.85942 -13.0625,15.53125 14.183728,-6.21639 24.683497,-12.45862 46.25,-18.375 -9.461391,8.73077 -24.403941,17.1424 -25.21875,18.25 -2.183992,3.18854 -5.444043,10.06958 -11.15625,15.3125 2.408839,-7.40462 1.715415,-13.1914 0.25,-11.875 -5.549237,4.98497 -4.613076,19.29372 -12.65625,24.78125 -19.7524,13.47626 -22.75335,1.44128 -25.46875,3.53125 -3.95231,3.04198 5.19443,6.03907 8.84375,7.09375 -12.45497,22.57734 -15.33207,-1.01345 -17.5625,0.9375 -2.34427,3.49555 -4.94017,10.31391 1.65625,27.03125 4.79214,12.14474 -5.64918,9.38439 -28.6875,10.03125 -6.33671,0.17792 -7.40723,0.64601 -16.875,3.40625 -3.67924,1.07265 -6.43347,0.3457 -4.09375,-7.375 6.22132,-21.48923 25.63482,-51.11456 47.1875,-51.78125 5.41258,0.0202 -2.85402,-4.43244 -1.15625,-7 1.14364,-1.71649 1.69063,-3.07836 4.875,-6.78125 3.1993,-3.72024 7.1807,-7.23815 10.6875,-8.4375 9.9105,-3.38947 16.179182,-10.5037 20.9375,-17.75 4.758318,-7.2463 9.760842,-14.98099 13.790979,-19.5625 8.399265,-7.13109 17.947719,-11.1466 26.579717,-12.42028 z m -46.383609,29.16486 c -2.130107,3.06203 -4.848197,5.48276 -8.829717,8.99027 -0.70108,-9.35992 -4.24033,-21.15662 -15.27919,-16.24664 6.35844,-8.45156 16.77027,-5.51365 24.108907,7.25637 z m -11.674587,23.91167 c -4.03898,0.1203 -13.63356,6.71296 -11.3125,7.3125 3.448,0.89065 5.85746,-3.06506 6.65625,-2 0.79879,1.06505 -3.98884,6.11989 -2.125,8.25 1.86385,2.13011 10.52138,-10.92425 8.125,-13.1875 -0.29955,-0.28291 -0.76675,-0.39219 -1.34375,-0.375 z m 13.78125,5.6875 c -12.17132,-0.16801 -21.14791,15.22012 -16.3125,23.46875 1.53677,2.62156 3.3125,-3.75 3.3125,-3.75 0,0 3.11795,3.53663 14,-2.375 8.402975,-4.56488 4,-12 4,-12 0,0 4.71202,-2.54027 0.375,-4.25 -1.837848,-0.72451 -3.636241,-1.06975 -5.375,-1.09375 z m 35.75,1.59375 c 2.263242,2.13011 10.208153,17.39173 3.34375,24 -10.703205,10.30384 -6.124144,19.34772 -2.063621,23.07541 0,0 -16.825481,-4.92207 -3.316804,-22.83402 5.115247,-6.78261 -1.725255,-19.11178 -10.487087,-17.76291 4.526484,-3.3283 9.31616,-5.23421 12.523762,-6.47848 z M -96,389.34375 c 3.349039,6.48058 -5.80905,12.7184 -13.5625,10.6875 3.59456,-5.45841 7.17217,-9.62245 13.5625,-10.6875 z m -3.28125,2.28125 c -0.93337,0.009 -2.08278,0.50309 -3.03125,1.40625 -1.51756,1.44506 -2.00642,3.38529 -1.09375,4.34375 0.91267,0.95846 2.88869,0.57006 4.40625,-0.875 1.517557,-1.44506 2.006417,-3.38529 1.09375,-4.34375 -0.34225,-0.35942 -0.814977,-0.5364 -1.375,-0.53125 z"
- id="path4185"
- style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#496000;fill-opacity:1;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
- </g>
+ <defs>
+ <style type="text/css">
+.kalamar-white {
+ fill:#fff;
+ stroke:none;
+}
+.kalamar-shade {
+ fill: #9bad0b;
+ fill-opacity:1;
+ stroke:none
+}
+.kalamar-contour {
+ fill:#636f07;
+ stroke:none;
+}
+ </style>
+ </defs>
+ <g transform="matrix(-2.555441,0,0,2.555441,-265.32464,-14.501228)">
+ <path d="m -176.97468,76.132038 c 3.66892,-22.18235 14.96757,-30.383963 22.94726,-33.347803 1.27219,-5.14938 6.59805,-9.4801 9.57511,-11.39108 0.68163,-6.57435 0.11697,-10.26917 -7.42897,-9.07985 4.67098,-11.431859 9.85548,-5.06313 16.26642,1.25279 4.87196,-8.593909 12.80709,-13.405639 22.03403,-15.1201895 -10.85637,14.2560195 -13.23298,18.2087195 4.63293,15.8484595 -13.16158,10.00294 -9.87643,11.28363 -7.36105,18.67589 3.60963,9.323133 -9.91949,10.306293 -0.69901,20.139683 -11.87742,-4.81211 -7.3161,-6.57437 -4.75936,-15.985363 -1.36508,-4.65767 -4.24601,-3.42634 -9.23554,-3.65072 -2.88772,5.960093 -5.5152,6.463833 -10.53638,8.516663 -2.43179,4.2103 -4.4081,6.88534 -8.77893,8.11858 0,0 1.71986,3.18045 1.33117,10.75998 -8.96555,3.22634 -13.2267,-1.42912 -27.98768,5.26296 z" class="kalamar-white" />
+ <path d="m -128.47797,42.300723 c 2.34699,-3.935129 5.13394,-5.872187 9.23746,-7.145693 2.94179,6.287649 5.36031,10.921465 1.6071,16.10053 -3.23294,4.461148 -1.86432,6.61053 -0.98684,11.51872 -15.442,-5.658242 6.22305,-16.18535 -9.85772,-20.473557 z" class="kalamar-shade" />
+ <path d="m -164.87316,72.481865 c -0.74468,-14.044694 7.86713,-23.388402 14.77871,-27.182268 0,0 -0.32824,-5.905702 7.38936,-9.764503 4.22248,-2.111245 8.44497,-5.805921 9.50059,-7.917165 1.05563,-2.111244 2.63906,-8.972788 13.19528,-12.139654 2.33047,-0.699142 5.27811,-6.8615423 5.27811,-6.8615423 0,0 -15.30652,0.7917165 -20.84854,15.5704243 -6.63964,-10.838563 -15.66632,-9.257562 -17.41776,-0.527811 l 6.33373,-2.37515 2.90296,6.333733 0,4.222488 c -6.12474,2.815086 -8.99771,6.053032 -12.13965,11.611842 -17.19331,10.885233 -16.23564,14.016018 -21.64025,31.404755 z" class="kalamar-shade" />
+ <g transform="matrix(0.47473464,0,0,0.47473464,-90.679487,-143.90007)">
+ <path d="m -41.0625,316.71875 c -9.576308,1.01227 -20.437266,3.97659 -29.25,7.9375 -12.689388,4.5451 -17.191568,11.74018 -24.8125,23.4375 -11.15001,-20.80692 -41.92684,-26.49295 -41.8125,21.8125 19.56928,-37.23779 25.50612,-2.99825 18.56887,0.52807 -6.86631,3.49026 -13.44723,13.16503 -18.87854,20.52748 -4.82783,2.6553 -11.25044,5.91984 -19.19033,14.56945 -12.14063,1.68579 -22.40697,-0.0589 -25.34375,5.0625 -1.92028,4.88459 -0.83547,28.6183 -1.34375,35.5625 -0.55023,7.5173 -4.47505,20.2185 -4.40625,27.78125 0.0449,4.93417 13.37698,-12.52554 26.0625,-13.9375 14.32568,-1.59452 20.40751,-0.6761 31.21875,-1.84375 3.43365,-0.38537 6.60948,-1.10948 8.71875,-3.21875 4.52684,-4.79348 0.17472,-20.54012 -0.29959,-24.04322 8.88011,-4.01684 12.99872,-10.88406 16.73709,-16.70678 3.77753,-0.95969 15.445077,-3.54975 21,-16.34375 7.291276,-0.62721 24.237611,-3.90486 11.375,16.46875 -6.517142,10.32276 3.151699,23.79009 20.8125,23.75 1.965174,-0.004 -17.965788,-13.53523 -1.5,-27.15625 6.115872,-5.05925 1.147006,-24.90772 -1.8125,-28.03125 8.5569,-3.5296 16.780975,-7.81843 24.028066,-11.61639 -5.695239,-3.30642 -12.406435,-4.85672 -18.403066,-4.82111 5.354884,-3.41771 16.921224,-11.53597 20.25,-16.09375 -11.616163,-0.86442 -19.285929,-0.0412 -27.78125,2.8125 9.452491,-6.90785 8.090662,-15.36938 18.71875,-24 -8.87593,1.32852 -13.462677,3.88184 -18.255425,7.21014 6.099195,-6.84313 11.408663,-11.09351 15.599175,-19.64764 z m -12.441804,7.73597 c -11.095923,11.19905 -13.975386,11.23168 -18.558196,17.23278 -6.054124,7.92777 -5.560879,14.47415 -6.5625,18.21875 -1.7769,6.64303 -7.715317,4.85942 -13.0625,15.53125 14.183728,-6.21639 24.683497,-12.45862 46.25,-18.375 -9.461391,8.73077 -24.403941,17.1424 -25.21875,18.25 -2.183992,3.18854 -5.444043,10.06958 -11.15625,15.3125 2.408839,-7.40462 1.715415,-13.1914 0.25,-11.875 -5.549237,4.98497 -4.613076,19.29372 -12.65625,24.78125 -19.7524,13.47626 -22.75335,1.44128 -25.46875,3.53125 -3.95231,3.04198 5.19443,6.03907 8.84375,7.09375 -12.45497,22.57734 -15.33207,-1.01345 -17.5625,0.9375 -2.34427,3.49555 -4.94017,10.31391 1.65625,27.03125 4.79214,12.14474 -5.64918,9.38439 -28.6875,10.03125 -6.33671,0.17792 -7.40723,0.64601 -16.875,3.40625 -3.67924,1.07265 -6.43347,0.3457 -4.09375,-7.375 6.22132,-21.48923 25.63482,-51.11456 47.1875,-51.78125 5.41258,0.0202 -2.85402,-4.43244 -1.15625,-7 1.14364,-1.71649 1.69063,-3.07836 4.875,-6.78125 3.1993,-3.72024 7.1807,-7.23815 10.6875,-8.4375 9.9105,-3.38947 16.179182,-10.5037 20.9375,-17.75 4.758318,-7.2463 9.760842,-14.98099 13.790979,-19.5625 8.399265,-7.13109 17.947719,-11.1466 26.579717,-12.42028 z m -46.383609,29.16486 c -2.130107,3.06203 -4.848197,5.48276 -8.829717,8.99027 -0.70108,-9.35992 -4.24033,-21.15662 -15.27919,-16.24664 6.35844,-8.45156 16.77027,-5.51365 24.108907,7.25637 z m -11.674587,23.91167 c -4.03898,0.1203 -13.63356,6.71296 -11.3125,7.3125 3.448,0.89065 5.85746,-3.06506 6.65625,-2 0.79879,1.06505 -3.98884,6.11989 -2.125,8.25 1.86385,2.13011 10.52138,-10.92425 8.125,-13.1875 -0.29955,-0.28291 -0.76675,-0.39219 -1.34375,-0.375 z m 13.78125,5.6875 c -12.17132,-0.16801 -21.14791,15.22012 -16.3125,23.46875 1.53677,2.62156 3.3125,-3.75 3.3125,-3.75 0,0 3.11795,3.53663 14,-2.375 8.402975,-4.56488 4,-12 4,-12 0,0 4.71202,-2.54027 0.375,-4.25 -1.837848,-0.72451 -3.636241,-1.06975 -5.375,-1.09375 z m 35.75,1.59375 c 2.263242,2.13011 10.208153,17.39173 3.34375,24 -10.703205,10.30384 -6.124144,19.34772 -2.063621,23.07541 0,0 -16.825481,-4.92207 -3.316804,-22.83402 5.115247,-6.78261 -1.725255,-19.11178 -10.487087,-17.76291 4.526484,-3.3283 9.31616,-5.23421 12.523762,-6.47848 z M -96,389.34375 c 3.349039,6.48058 -5.80905,12.7184 -13.5625,10.6875 3.59456,-5.45841 7.17217,-9.62245 13.5625,-10.6875 z m -3.28125,2.28125 c -0.93337,0.009 -2.08278,0.50309 -3.03125,1.40625 -1.51756,1.44506 -2.00642,3.38529 -1.09375,4.34375 0.91267,0.95846 2.88869,0.57006 4.40625,-0.875 1.517557,-1.44506 2.006417,-3.38529 1.09375,-4.34375 -0.34225,-0.35942 -0.814977,-0.5364 -1.375,-0.53125 z" class="kalamar-contour" />
</g>
</g>
</svg>
diff --git a/public/img/korap-logo-kalamar.svg b/public/img/korap-logo-kalamar.svg
index 8645212..4ea629b 100644
--- a/public/img/korap-logo-kalamar.svg
+++ b/public/img/korap-logo-kalamar.svg
@@ -4,7 +4,7 @@
<style type="text/css">
path { stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4 }
.logoinit { fill:#fff; stroke:#636f07; stroke-width:4 }
-.logoend { fill:#636f07; fill-opacity:1; stroke:#8e9f0a; stroke-width:2; }
+.logoend { fill:#636f07; fill-opacity:1; stroke:#9bad0b; stroke-width:2; }
#karl-fill { fill:#ffffff; }
#karl { fill:#636f07; stroke:none; }
#karl-arm { fill:#636f07; stroke:none; }
diff --git a/public/js/demo/about.html b/public/js/demo/about.html
index 8381ae5..39afb46 100644
--- a/public/js/demo/about.html
+++ b/public/js/demo/about.html
@@ -8,53 +8,59 @@
</head>
<body class="embedded">
<div id="sidebar" tabindex="0" class="active">
- <h2>Tutorial</h2>
- <nav>
- <ul>
- <li>About ...
- <ul>
- <li>Kalamar</li>
- <li>Koral</li>
- <li>Kustvakt</li>
- <li>Krill</li>
- <!-- <li>Karang</li> -->
- </ul>
- </li>
- <li>Query Languages
- <ul>
- <li>Cosmas II</li>
- <li>Poliqarp</li>
- <li>Annis QL</li>
- <li>CQL</li>
- <li>RegExp</li>
- </ul>
- </li>
- <li>Data
- <ul>
- <li>Corpora
- <ul>
- <li>DeReKo</li>
- </ul>
- </li>
- <li>Annotations
- <ul>
- <li>Connexor</li>
- <li>Mate</li>
- <li>TreeTagger</li>
- </ul>
- </li>
- </ul>
- </li>
- <li>API
- <ul>
- <li>KoralQuery</li>
- <li>Search API</li>
- <li>Match Information API</li>
- <li>User API</li>
- </ul>
- </li>
- </ul>
- </nav>
+ <div>
+<!-- Not embedded:
+ <h2>Tutorial</h2>
+-->
+ <nav>
+ <ul>
+ <li><a href="/doc/korap">KorAP</a>
+ <ul>
+ <li><a href="/doc/kalamar" class="active">Kalamar</a></li>
+ <li><a href="/doc/koral">Koral</a></li>
+ <li><a href="/doc/kustvakt">Kustvakt</a></li>
+ <li><a href="/doc/krill">Krill</a></li>
+ <!-- <li>Karang</li> -->
+ </ul>
+ </li>
+ <li><a href="/doc/ql">Query Languages</a>
+ <ul>
+ <li><a href="/doc/ql/cosmas-2">Cosmas II</a></li>
+ <li><a href="/doc/ql/poliqarp-plus">Poliqarp+</a></li>
+ <li><a href="/doc/ql/annis">Annis QL</a></li>
+ <li><a href="/doc/ql/cql">CQL</a></li>
+ <li><a href="/doc/ql/regexp">RegExp</a></li>
+ </ul>
+ </li>
+ <li><a href="/doc/data">Data</a>
+ <ul>
+ <li><a href="/doc/data/corpus">Corpora</a>
+ <ul>
+ <li><a href="/doc/data/corpus/dereko">DeReKo</a></li>
+ </ul>
+ </li>
+ <li><a href="/doc/data/annotation">Annotations</a>
+ <ul>
+ <li><a href="/doc/data/annotation/connexor">Connexor</a></li>
+ <li><a href="/doc/data/annotation/mate">Mate</a></li>
+ <li><a href="/doc/data/annotation/treetagger">TreeTagger</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="/doc/api">API</a>
+<!--
+ <ul>
+ <li><a href="/doc/api/koralquery">KoralQuery</a></li>
+ <li><a href="/doc/api/search">Search API</a></li>
+ <li><a href="/doc/api/match">Match Information API</a></li>
+ <li><a href="/doc/api/user">User API</a></li>
+ </ul>
+-->
+ </li>
+ </ul>
+ </nav>
+ </div>
</div>
<main class="tutorial">
<h2>KorAP-Tutorial</h2>
diff --git a/public/js/demo/all.html b/public/js/demo/all.html
index 7809da4..ec6d017 100644
--- a/public/js/demo/all.html
+++ b/public/js/demo/all.html
@@ -3,20 +3,7 @@
<head>
<title>CSS demo</title>
<meta charset="utf-8" />
- <script src="../lib/dagre/dagre.min.js"></script>
- <script src="../src/api.js"></script>
- <script src="../src/hint.js"></script>
- <script src="../src/match.js"></script>
- <script src="../src/menu.js"></script>
- <script src="../src/vc.js"></script>
- <script src="../src/session.js"></script>
- <script src="../src/tutorial.js"></script>
- <script src="../src/util.js"></script>
- <script src="./all.js"></script>
<link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
- <script>
- KorAP.URL = 'http://localhost:3000';
- </script>
</head>
<body>
<div id="kalamar-bg"></div>
@@ -30,15 +17,13 @@
id="q-field"
autofocus="autofocus" />
<button type="submit"><span>Go</span></button>
-<!--
- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i>
--->
+ <!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
</div>
<div id="vc-view"></div>
in <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
<input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
with <span class="select">
-<!-- Change this to js-menu -->
+ <!-- Change this to js-menu -->
<select name="ql" id="ql-field">
<option value="poliqarp">Poliqarp</option>
<option value="cosmas2">Cosmas II</option>
@@ -145,15 +130,27 @@
<p><strong>New to KorAP?</strong> Please check out our <a href="#">tutorial</a>!</p>
- <p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Institute for German Language</a> and funded by the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
+ <p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Institute for the German Language</a> and funded by the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
</div>
<div id="logos">
<div>
- <a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Developed at the Institute for German Language (IDS)</span></p></a>
- <a href="http://www.leibniz-gemeinschaft.de/" class="logo"><p id="leibniz-logo"><span>Funded by the Leibniz Association</span></p></a>
+ <a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Developed at the Institute for the German Language (IDS)</span></p></a>
+ <a href="http://www.leibniz-gemeinschaft.de/" class="logo"><p id="leibniz-logo"><span>Member of the Leibniz Association</span></p></a>
</div>
</div>
-
</main>
+ <script src="../lib/dagre/dagre.min.js"></script>
+ <script src="../src/api.js"></script>
+ <script src="../src/hint.js"></script>
+ <script src="../src/match.js"></script>
+ <script src="../src/menu.js"></script>
+ <script src="../src/vc.js"></script>
+ <script src="../src/session.js"></script>
+ <script src="../src/tutorial.js"></script>
+ <script src="../src/util.js"></script>
+ <script>
+ KorAP.URL = 'http://localhost:3000';
+ </script>
+ <script src="./all.js"></script>
</body>
</html>
diff --git a/public/js/demo/all.js b/public/js/demo/all.js
index 0a72f73..b29b0b5 100644
--- a/public/js/demo/all.js
+++ b/public/js/demo/all.js
@@ -444,7 +444,7 @@
// document.getElementById('vc-choose').click();
-// init.tutorial.show();
+ // init.tutorial.show();
// Don't hide!!!
menu.hide = function () {};
diff --git a/public/scss/logos.scss b/public/scss/logos.scss
index 715bf71..e9058ae 100644
--- a/public/scss/logos.scss
+++ b/public/scss/logos.scss
@@ -26,6 +26,7 @@
width: 175%;
top: 0;
z-index: -5000;
+ opacity: .1;
background: {
image:url('#{$img-path}/korap-bg-kalamar.svg');
size: 50%;
@@ -64,7 +65,7 @@
width: (910 / 60) + em;
height: (176 / 60) + em;
background: {
- image:url('#{$img-path}/ids-institute-for-german-language.svg');
+ image:url('#{$img-path}/ids-institute-for-the-german-language.svg');
}
}
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
index 2c3f24d..5e2d084 100644
--- a/public/scss/menu.scss
+++ b/public/scss/menu.scss
@@ -27,7 +27,7 @@
}
@include choose-item;
cursor: pointer;
- padding: 3px 10px;
+ padding: $item-padding;
white-space: normal;
}
diff --git a/public/scss/sidebar.scss b/public/scss/sidebar.scss
index 3920ef5..5829600 100644
--- a/public/scss/sidebar.scss
+++ b/public/scss/sidebar.scss
@@ -1,11 +1,11 @@
@charset "utf-8";
@import "util";
+$border-size: 2px;
+
#sidebar {
-/*
- box-shadow: 2px 2px 5px darken($dark-green, 15%);
-*/
-// box-shadow: $choose-box-shadow;
+ // box-shadow: 2px 2px 5px darken($dark-green, 15%);
+ // box-shadow: $choose-box-shadow;
outline: none;
display: block;
background-color: $dark-green;
@@ -18,7 +18,11 @@
height: 100%;
padding-top: 80px;
transition: all .3s ease-in-out;
-
+ > div {
+ overflow-y: auto;
+ overflow-x: visible;
+ max-height: 100%;
+ }
> * {
opacity: 1;
}
@@ -38,11 +42,92 @@
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 {
+ @include choose-item;
+ padding: $item-padding;
+
+ border-right: {
+ width: $border-size;
+ style: solid;
+ }
+
+ display: block;
+ &:link, &: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;
+ }
}
+
#sidebar:not(:focus):not(.active) {
margin-left: -1 * ($logo-left-distance - 15px);
// box-shadow: none;
+/*
+ overflow-y: hidden;
+ overflow-x: visible;
+*/
&::after {
opacity: 1;
}
@@ -83,43 +168,6 @@
left: 0;
border-top-right-radius: 5pt;
}
- h2 {
- font: {
- size: 100%;
- weight: bold;
- }
- text-align: center;
- padding: 0;
- margin: 0 0 5pt 0;
- }
- ul {
- list-style-type: none;
- margin: 0;
- font-size: 10pt;
- text-indent: 0;
- padding: 0;
- li {
- padding: 4pt 10pt;
- h3 {
- font: {
- weight: bold;
- size: 100%;
- }
- padding: 0;
- margin: 0;
- }
- &.active {
- background-color: $light-green;
-// text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
- text-shadow: none;
- h3 {
- margin-bottom: 2pt;
- padding-bottom: 2pt;
- border-bottom: 1px solid black;
- }
- }
- }
- }
dl.info {
font-size: 9pt;
padding: 0 10pt;
diff --git a/public/scss/tutorial.scss b/public/scss/tutorial.scss
index 74937fc..0b03cd0 100644
--- a/public/scss/tutorial.scss
+++ b/public/scss/tutorial.scss
@@ -1,11 +1,7 @@
@charset "utf-8";
@import "util";
-$border-size: 3px;
-
-body.embedded {
- background-color: $nearly-white;
-}
+$border-size: 2px;
#tutorial {
position: fixed;
@@ -15,22 +11,28 @@
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: $border-size;
- color: $dark-orange;
+ width: 2 * $border-size;
+// color: $dark-orange;
+ color: $dark-grey;
style: solid;
radius: $standard-border-radius;
}
box-shadow: $choose-box-shadow;
iframe {
- margin: 0;
- width: 100%;
- min-height: 100%;
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;
@@ -40,6 +42,29 @@
}
}
+body.embedded {
+ background-color: $nearly-white;
+ #sidebar {
+/*
+ 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;
}
diff --git a/public/scss/util.scss b/public/scss/util.scss
index d81b7f9..a4971c4 100644
--- a/public/scss/util.scss
+++ b/public/scss/util.scss
@@ -28,22 +28,23 @@
*/
$dark-green: $ids-green-1; // #496000;
$middle-green: lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
-$light-green: lighten($ids-green-1, 10%); // #7ba400;
+$light-green: lighten($ids-green-1, 13%); // #7ba400;
/**
* Blue Colors
*/
-$light-blue: #cfe6f4;
-$dark-blue: #73b2f4;
+$light-blue: $ids-blue-2; // #cfe6f4;
+$dark-blue: $ids-blue-1; // #73b2f4;
$darkest-blue: darken($dark-blue, 40%);
/*
* Grey
*/
+$middle-grey: $ids-grey-1; // #999;
$light-grey: $ids-grey-2; // #ddd;
-$dark-grey: #555;
-$middle-grey: #999;
+// $dark-grey: darken($light-grey, 55%); // #555;
+$dark-grey: darken($middle-grey, 15%); // #555;
// $nearly-white: #f5f5f5;
$nearly-white: #fff;
@@ -77,6 +78,7 @@
$choose-blind-color: $middle-grey;
$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
$standard-border-radius: 6px;
+$item-padding: 3pt 6pt;
/**
* Path information
