diff --git a/verse/static/css/style.css b/verse/static/css/style.css index 5731c1c..75923df 100644 --- a/verse/static/css/style.css +++ b/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 diff --git a/verse/templates/help.html b/verse/templates/help.html index 2a6be49..ea636f2 100644 --- a/verse/templates/help.html +++ b/verse/templates/help.html @@ -1,6 +1,11 @@ {% extends "base.html" %} {% block main %}
+
+ + + +
{% if not current_user.is_authenticated %}
@@ -39,12 +44,74 @@ {% endif %}

Distribusi-verse

-

Zipfiles become websites

-

Folders become links and pages

-

Media files become visible

-

Text files become readable

-

Use Css to style your page

+

1. Zipfiles become websites

+

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 (".zip file extension") 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)

+

Windows 10

+

Mac OS

+
+

2. Media files become visible

+

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 (only ".txt" see 4. Text files become readable) +

+

Example:

+

If your zipfile contains the image "cover.png" it becomes +the following html in your distribusi page:

+
<div id="cover" class="png">
+  <figure>
+    <img class="image" src="cover.png">
+    <figcaption>cover.png</figcaption>
+  </figure>
+</div>
+

The encapsulating div tag gets an id that is the same as the +file name. The img tag gets a class attribute image +This is handy for styling your files with css (See 5.)

+
+

3. Folders become links and pages

+

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.

+

Example:

+
<div id="folder" class="dir">
+  <a href='new_folder/index.html'>new_folder</a>
+</div>
+

The encapsulating div tag gets an id +folder. and a class attribute dir +This is handy for styling your files with css (See 5.)

+

the anchor (a) tag will get an href attribute pointing to the +subfolder

+
+

4. Text files become readable

+

When distribusi discovers a text file (".txt file extension") 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.

+

Example:

+
<div id="my_textfile" class="plain">
+  <pre>
+    contents of my_textfile.txt gets rendered inside a pre tag.
+  </pre>
+  <span class="filename">my_textfile.txt</span>
+</div>
+

The encapsulating div tag gets an id that is the same as the +file name. and a class attribute plain +This is handy for styling your files with css (See 5.)

+
+

5. Use Css to style your page

+

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.

+

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 public. +

Alternatively a user can opt to make their own custom theme, either in a +simple online editor or by uploading their own Css file.

+

+
- {% endblock %} diff --git a/verse/templates/index.html b/verse/templates/index.html index 79c0a18..fa3befe 100644 --- a/verse/templates/index.html +++ b/verse/templates/index.html @@ -48,7 +48,7 @@

- 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 Tildeverse and Tilde club, but also be neither of these ideas. See a full list of tildeverse members here.

+ This particular work in progress project Distribusi-verse 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 Tildeverse and Tilde club, but also be neither of these ideas. See a full list of tildeverse members here.

This project is made for Autonomous Practices at the WDKA in Rotterdam.