A bit of responsiveness
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 5d18d45..a483390 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -7,6 +7,7 @@
%= stylesheet '/table.css'
%= stylesheet '/kwic-4.0.css'
%= stylesheet '/fontawesome/font-awesome.min.css'
+%= stylesheet '/responsive.css', media => '(max-width: 640px)'
%= javascript '/jquery-2.0.0.min.js'
%= javascript '/translateTable.js'
%= javascript '/hint.js'
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
index 459572c..9caa15b 100644
--- a/templates/tutorial.html.ep
+++ b/templates/tutorial.html.ep
@@ -1,10 +1,13 @@
-<div style="padding: 20pt">
+<main>
-<p>Links to Blog, FAQ, About, Contact ...</p>
+%# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
+%# This should be stored when clicking on a specific query
+%# but the remembered section contains the id - not the query
<h2>KorAP-Tutorial</h2>
<!--
+<p>Links to Blog, FAQ, About, Contact ...</p>
<ul>
<li>Introduction to KorAP</li>
<li>How to use Poliqarp+ QL?</li>
@@ -13,6 +16,8 @@
</ul>
-->
+<section id="intro">
+<h3>Introduction</h3>
<p>This is a Tutorial to KorAP. It may be maintained separately (as a Wiki?) and
has some nice features - like embedded example queries - just click on the queries below:</p>
@@ -21,53 +26,57 @@
%= korap_tut_query cosmas2 => 'der /w5 Baum'
<p>And here is a short cheat sheet for foundries and layers</p>
+</section>
-<ul>
- <li><strong>base</strong>
- <ul>
- <li>Supports two types of spans: <strong><s></strong> for sentences and <strong><p></strong> for paragraphs - this will likely change in the next index version. These spans lack prefix information!</li>
- </ul>
- </li>
- <li><strong>cnx</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leit" and "fähigkeit" - not by the lemma "leitfähigkeit"</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- <li><strong>syn</strong> (Token:Syntactical information): Includes token based information like @PREMOD, @NH, @MAIN ...</li>
- <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("PRES" ...), mode ("IND&qut;), number ("PL" ...) etc.</li>
- <li><strong>c</strong> (Span:Phrases): Only nominal phrases are available and all nominal phrases are written in lower case ("np")</li>
- </ul>
- </li>
- <li><strong>corenlp</strong>
- <ul>
- <li><strong>ne_hgc_175m_600</strong> (Token:Named Entity): Contains named entities like "I-PER", "I-ORG" etc. </li>
- <li><strong>ne_dewac_175_175m_600</strong> (Token:Named Entity): see above</li>
- </ul>
- </li>
- <li><strong>tt</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita stay intact (e.g. "Normalbedingung")</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- </ul>
- </li>
- <li><strong>mate</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita stay intact (e.g. "buchstabenbezeichnung")</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("tense:pres" ...), mode ("mood:ind&qut;), number ("number:pl" ...), gender ("gender:masc" etc.</li>
- </ul>
- </li>
- <li><strong>opennlp</strong>
- <ul>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- </ul>
- </li>
- <li><strong>xip</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leiten" and "Fähigkeit" - and by a merged and pretty useless "leitenfähigkeit" (This is going to change)</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- <li><strong>c</strong> (Span:Phrases): Some phrases to create sentences, all upper case ("NP", "NPA", "NOUN", "VERB", "PREP", "AP" ...)</li>
- </ul>
- </li>
-</ul>
+<section id="cheatsheet">
+ <h3>Cheatsheet</h3>
+ <ul>
+ <li><strong>base</strong>
+ <ul>
+ <li>Supports two types of spans: <strong><s></strong> for sentences and <strong><p></strong> for paragraphs - this will likely change in the next index version. These spans lack prefix information!</li>
+ </ul>
+ </li>
+ <li><strong>cnx</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leit" and "fähigkeit" - not by the lemma "leitfähigkeit"</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ <li><strong>syn</strong> (Token:Syntactical information): Includes token based information like @PREMOD, @NH, @MAIN ...</li>
+ <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("PRES" ...), mode ("IND&qut;), number ("PL" ...) etc.</li>
+ <li><strong>c</strong> (Span:Phrases): Only nominal phrases are available and all nominal phrases are written in lower case ("np")</li>
+ </ul>
+ </li>
+ <li><strong>corenlp</strong>
+ <ul>
+ <li><strong>ne_hgc_175m_600</strong> (Token:Named Entity): Contains named entities like "I-PER", "I-ORG" etc. </li>
+ <li><strong>ne_dewac_175_175m_600</strong> (Token:Named Entity): see above</li>
+ </ul>
+ </li>
+ <li><strong>tt</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita stay intact (e.g. "Normalbedingung")</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ </ul>
+ </li>
+ <li><strong>mate</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita stay intact (e.g. "buchstabenbezeichnung")</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("tense:pres" ...), mode ("mood:ind&qut;), number ("number:pl" ...), gender ("gender:masc" etc.</li>
+ </ul>
+ </li>
+ <li><strong>opennlp</strong>
+ <ul>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ </ul>
+ </li>
+ <li><strong>xip</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leiten" and "Fähigkeit" - and by a merged and pretty useless "leitenfähigkeit" (This is going to change)</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ <li><strong>c</strong> (Span:Phrases): Some phrases to create sentences, all upper case ("NP", "NPA", "NOUN", "VERB", "PREP", "AP" ...)</li>
+ </ul>
+ </li>
+ </ul>
+</section>
-</div>
+</main>