help page where distribusi is explained a bit

verse/static/css/style.css

@@ -251,6 +251,17 @@ div.maincontent{
   visibility: visible;
   opacity: 1;
 }
+
+.code-example {
+  width: 100%;
+  color: black;
+  padding: 1em;
+  box-sizing: border-box;
+  background: #E0B0FF;
+  outline: none;
+  font-family: Courier, sans-serif;
+  font-size: 16px;
+}
 /*
 Project colors so far.
 light

verse/templates/help.html

@@ -1,6 +1,11 @@
 {% extends "base.html" %}
 {% block main %}
 <div id="buttons">
+	<div class="overview">
+		<a href="/">
+			<input type="button" name="button" value="Main page"></input>
+		</a>
+	</div>
 	{% if not current_user.is_authenticated %}
 	<div class="signin">
 		<a href="/login">
@@ -39,12 +44,74 @@
 	{% endif %}
 <div class="maincontent">
 	<h2>Distribusi-verse</h2>
-	<h3>Zipfiles become websites</h3>
-	<h3>Folders become links and pages</h3>
-	<h3>Media files become visible</h3>
-	<h3>Text files become readable</h3>
-	<h3>Use Css to style your page</h3>
+	<h3>1. Zipfiles become websites</h3>
+	<p>Distribusi is a content management system for the web that produces static
+index pages based on folders in the files system. For distrubisverse this means
+that you can upload a zip file <em>(".zip file extension")</em> with content and have
+distrubsi turn it into a webpage for you. Making a zip file is very easy for all
+desktop operating systems (Windows, Mac OS and Linux)</p>
+	<h4>Windows 10</h4>
+	<h4>Mac OS</h4>
+	<hr>
+	<h3>2. Media files become visible</h3>
+	<p>Whenever Distribusi discovers media files in your zipfile it turns them
+into the appropriate html tags. image files become img tags, audio files become
+audio tags and so on. Currently distribusi supports images, videos, audio,
+pdf and textfiles <em>(only ".txt" see 4. Text files become readable)</em>
+</p>
+<h4>Example:</h4>
+<p>If your zipfile contains the image <strong>"cover.png"</strong> it becomes
+the following html in your distribusi page:</p>
+<pre class="code-example">&lt;div&nbsp;id=&quot;cover&quot;&nbsp;class=&quot;png&quot;&gt;
+&nbsp;&nbsp;&lt;figure&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;class=&quot;image&quot;&nbsp;src=&quot;cover.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&lt;figcaption&gt;cover.png&lt;/figcaption&gt;
+&nbsp;&nbsp;&lt;/figure&gt;
+&lt;/div&gt;</pre>
+<p>The encapsulating <strong>div</strong> tag gets an id that is the same as the
+<em>file name.</em> The <strong>img</strong> tag gets a class attribute <em>image</em>
+This is handy for styling your files with css (See 5.)</p>
+	<hr>
+	<h3>3. Folders become links and pages</h3>
+	<p>When you make your zipfile, this zipfile can contain folders with more
+content. Distribusi turns these automatically into links and behind those links
+a new page! These pages look identical to your main page because they share the
+same style. </p>
+<h4>Example:</h4>
+<pre class="code-example">&lt;div&nbsp;id=&quot;folder&quot;&nbsp;class=&quot;dir&quot;&gt;
+&nbsp;&nbsp;&lt;a&nbsp;href=&#39;new_folder/index.html&#39;&gt;new_folder&lt;/a&gt;
+&lt;/div&gt;</pre>
+<p>The encapsulating <strong>div</strong> tag gets an id
+<em>folder.</em> and a class attribute <em>dir</em>
+This is handy for styling your files with css (See 5.)</p>
+<p>the anchor <em>(a)</em> tag will get an href attribute pointing to the
+subfolder</p>
+	<hr>
+	<h3>4. Text files become readable</h3>
+	<p>When distribusi discovers a text file <em>(".txt file extension")</em> it
+turns it into a pre tag with the text from the file in it. This enables users to
+add simple text elements to their pages.</p>
+<h4>Example:</h4>
+<pre class="code-example">&lt;div&nbsp;id=&quot;my_textfile&quot;&nbsp;class=&quot;plain&quot;&gt;
+&nbsp;&nbsp;&lt;pre&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;contents&nbsp;of&nbsp;my_textfile.txt&nbsp;gets&nbsp;rendered&nbsp;inside&nbsp;a&nbsp;pre&nbsp;tag.
+&nbsp;&nbsp;&lt;/pre&gt;
+&nbsp;&nbsp;&lt;span&nbsp;class=&quot;filename&quot;&gt;my_textfile.txt&lt;/span&gt;
+&lt;/div&gt;</pre>
+<p>The encapsulating <strong>div</strong> tag gets an id that is the same as the
+<em>file name.</em> and a class attribute <em>plain</em>
+This is handy for styling your files with css (See 5.)</p>
+	<hr>
+	<h3>5. Use Css to style your page</h3>
+	<p>Distribusi offers almost full support for styling your page with CSS.
+Because all content is auto generated your Distribusi Css will be places in a
+style tag in the head of each HTML file.</p>
+<p>Distrbusi-verse allows its users to skip this step by just selecting a basic
+theme or by selecting one of the themes other users have made <em>public.</em>
+<p>Alternatively a user can opt to make their own custom theme, either in a
+simple online editor or by uploading their own Css file.</p>
+</p>
+	<hr>
 </div>
 	<!-- a div with all the distribusis listed in the distribusiverse	-->
-
 {% endblock %}

verse/templates/index.html

@@ -48,7 +48,7 @@
 	</p>
 	<hr>
 	<p>
-	This particular work in progress project is an attempt to make distribusi into a webinterface that can be operated remotely without any knowlegde of CLI. Trying to combine the ideas of distribusi with the ideas of a <a href="https://tildeverse.org/">Tildeverse</a> and <a href="https://tilde.club/">Tilde club</a>, but also be neither of these ideas. See a full list of tildeverse members <a href="https://tildeverse.org/members/">here</a>.</p>
+	This particular work in progress project <strong>Distribusi-verse</strong> is an attempt to make distribusi into a webinterface that can be operated remotely without any knowlegde of CLI. Attempting to combine the ideas of distribusi with the ideas of a <a href="https://tildeverse.org/">Tildeverse</a> and <a href="https://tilde.club/">Tilde club</a>, but also be neither of these ideas. See a full list of tildeverse members <a href="https://tildeverse.org/members/">here</a>.</p>
 	<hr>
 	<p>This project is made for <a href="https://www.wdka.nl/practices/autonomous-practices/">Autonomous Practices </a>at the <a href="https://www.wdka.nl/">WDKA</a> in Rotterdam.</p>
 </div>