feat: add css/manual index/install/update

docs/about/index.rst

@@ -1,8 +1,10 @@
+
+#####
 About
-=====
+#####
 
 .. toctree::
    :maxdepth: 1
    :name: toc-about
 
-   introduction
+   introduction.rst

docs/about/introduction.rst

@@ -1,7 +1,9 @@
-============
+===============
-Introduction
+About Multi-user
-============
+===============
 
+The idea
+========
 
 A film is an idea carved along the whole production process by many different peoples. A traditional animation pipeline involve a linear succession of tasks. From storyboard to compositing by passing upon different step, its fundamental work flow is similar to an industrial assembly line. Since each step is almost a department, its common that one person on department B doesn't know what another person did on a previous step in a department A. This lack of visibility/communication could be a source of problems which could produce a bad impact on the final production result.
 
@@ -13,3 +15,8 @@ A film is an idea carved along the whole production process by many different pe
 Nowadays it's a known fact that real-time rendering technologies allows to speedup traditional linear production by reducing drastically the iteration time across different steps. All majors industrial CG solutions are moving toward real-time horizons to bring innovative interactive workflows. But this is a microscopic, per-task/solution vision of real-time rendering benefits for the animation production. What if we step-back, get a macroscopic picture of an animation movie pipeline and ask ourself how real-time could change our global workflow ? Could-it bring better ways of working together by giving more visibility between departments during the whole production ?
 
 The multi-user addon is an attempt to experiment real-time parallelism between different production stage. By replicating blender data blocks over the networks, it allows different artists to collaborate on a same scene in real-time.
+
+Others ?
+========
+
+What it is/Key Features/Creator/Community

docs/advanced/index.rst

@@ -0,0 +1,17 @@
+###############
+Advanced
+###############
+
+Side Pannel
+===========
+
+.. toctree::
+    :maxdepth: 1
+ 
+    Introduction <server/introduction.rst>
+    server/splash.rst
+
+Presence
+=========
+
+ui

docs/conf.py

@@ -12,7 +12,6 @@
 #
 import os
 import sys
-# sys.path.insert(0, os.path.abspath('.'))
 
 
 # -- Project information -----------------------------------------------------
@@ -22,7 +21,7 @@ copyright = '2020, Swann Martinez'
 author = 'Swann Martinez, Poochy, Fabian'
 
 # The full version, including alpha/beta/rc tags
-release = '0.5.0-develop'
+version_release = '0.5.1-develop'
 
 
 # -- General configuration ---------------------------------------------------
@@ -42,12 +41,15 @@ source_suffix = ".rst"
 # The master toctree document.
 master_doc = "index"
 
+# General information about the projet
+projet = 'Multi-User %s Doc' % version_release
+
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.
-#
+
 # This is also used if you do content translation via gettext catalogs.
 # Usually you set "language" from the command line for these cases.
-language = 'python'
+language = 'en'
 
 # List of patterns, relative to source directory, that match files and
 # directories to ignore when looking for source files.
@@ -60,28 +62,61 @@ exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
 # on_rtd is whether we are on readthedocs.org, this line of code grabbed from docs.readthedocs.org
 on_rtd = os.environ.get('READTHEDOCS', None) == 'True'
 
-import sphinx_rtd_theme
+html_theme = "default"
-html_theme = 'sphinx_rtd_theme'
+
-html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
+try:
+    import sphinx_rtd_theme
+    html_theme = 'sphinx_rtd_theme'
+    del sphinx_rtd_theme
+except ModuleNotFoundError:
+    pass
+
 if on_rtd:
     using_rtd_theme = True
 
-# Theme options
+
+# Theme options are theme-specific and customize the look and feel of a theme
+# further.  For a list of options available for each theme, see the
+# documentation.
 html_theme_options = {
-    # 'typekit_id': 'hiw1hhg',
-    # 'analytics_id': '',
-    # 'sticky_navigation': True  # Set to False to disable the sticky nav while scrolling.
-    # 'logo_only': True,  # if we have a html_logo below, this shows /only/ the logo with no title text
     'collapse_navigation': False,  # Collapse navigation (False makes it tree-like)
-    # 'display_version': True,  # Display the docs version
-    # 'navigation_depth': 4,  # Depth of the headers shown in the navigation bar
 }
 
+# Add any paths that contain custom themes here, relative to this directory.
+html_theme_path = []
+
+if html_theme == "sphinx_rtd_theme":
+    html_theme_options = {
+        "analytics_id": "UA-1418081-1",
+        # included in the title
+        "display_version": False,
+        "collapse_navigation": True,
+        "navigation_depth": -1,
+    }
+
+    extensions.append('sphinx_rtd_theme')
+
+# The name for this set of Sphinx documents.
+# "<project> v<release> documentation" by default.
+html_title = "Multi-User Doc"
+
+# The name of an image file (relative to this directory) to place at the top
+# of the sidebar.
+#
+# html_logo = "resources/theme/multi-user-logo.svg"
+
+# Add any paths that contain custom static files (such as style sheets) here,
+# relative to this directory. They are copied after the builtin static files,
+# so a file named "default.css" will overwrite the builtin "default.css".
+html_static_path = ["resources"]
+
+if html_theme == "sphinx_rtd_theme":
+    html_css_files = ["css/theme_overrides.css"]
 
 # -- Options for HTMLHelp output ------------------------------------------
 
 # Output file base name for HTML help builder.
-htmlhelp_basename = 'multiusrdoc'
+htmlhelp_basename = 'Multi-User Manual'
 
 # sphinx-notfound-page
 # https://github.com/readthedocs/sphinx-notfound-page

docs/getting_started/index.rst

@@ -3,10 +3,10 @@ Getting started
 ===============
 
 .. toctree::
-   :maxdepth: 1
+   :maxdepth: 2
-   :name: toc-getting-started
 
    install
+   update
    quickstart
    troubleshooting
    glossary

docs/getting_started/install.rst

@@ -1,58 +1,37 @@
-============
+=====================
-Installation
+Installing Multi-User
-============
+=====================
+
+Multi-User is often updated. You can keep up to date with the latest changes through the release notes on our `Discord Server <https://discord.com/invite/aBPvGws>`_.
+
+Download Multi-User
+===================
+
+`Stable Release <https://gitlab.com/slumber/multi-user/-/jobs/artifacts/master/download?job=build>`__
+    **Recommended**. A package packed with the latest features and is considered stable without regressions.
+
+`Latest Release <https://gitlab.com/slumber/multi-user/-/jobs/artifacts/develop/download?job=build>`__
+    **Experimental**. A package updated almost daily to include the newest changes in development.
+    These versions are not as thoroughly tested as the stable release, and might break.
+
+Install
+=======
 
 .. hint::
     The process is the same for linux, mac and windows.
 
-1. Download `LATEST build <https://gitlab.com/slumber/multi-user/-/jobs/artifacts/develop/download?job=build>`_ or `STABLE build <https://gitlab.com/slumber/multi-user/-/jobs/artifacts/master/download?job=build>`_.
+1. Download the addon zip file
 2. Run blender as administrator (to allow python dependencies auto-installation).
-3. Install **multi-user.zip** from your addon preferences.
+3. Install **multi-user.zip** from your addon preferences (Edit >> Preferences >> Add-ons >> Install).
 
-Once the addon is succesfully installed, I strongly recommend you to follow the :ref:`quickstart`
+.. figure:: img/settings.png
+    :align: center
+    :width: 500px
+
+    The Addon Preferences Pannel
+
+Once the addon is succesfully installed, we strongly recommend you to follow the :ref:`quickstart`
 tutorial.
 
-.. _update-version:
+.. toctree::
-
+    :maxdepth: 1
-Updates
-=======
-
-Multi-User has a built-in auto-update function.
-
-1. Navigate to Edit >> Preferences pane in Blender, and go to the 'Add-ons' section.
-2. Search 'multi-user', select the 'Update' tab, click 'Auto-check for Update' and choose the frequency you'd like.
-3. Make sure to click the three bars in the bottom-left, and save this to your preferences (userpref.blend).
-
-Sometimes you'd like to perform manual update, or even side-grade or rollback your multi-user version. Perhaps you are trying out new features from the 'develop' branch in a test session.
-
-1. Click on 'Check now for multiuser update'. Multi-user will now find new versions
-
-.. figure:: img/update_1.jpg
-    :align: center
-    :width: 300px
-
-    Check for updates
-
-2. Select 'Install latest master / old version'
-
-.. figure:: img/update_2.jpg
-    :align: center
-    :width: 300px
-
-    Install
-
-3. In most cases, select 'master' branch for the latest stable release. The unstable 'develop' branch and older releases are available
-
-.. figure:: img/update_3.jpg
-    :align: center
-    :width: 300px
-
-    Select version
-
-4. Finally, restart blender to use the updated version
-
-.. figure:: img/update_4.jpg
-    :align: center
-    :width: 300px
-
-    Restart blender

docs/getting_started/quickstart.rst

@@ -14,6 +14,30 @@ In this guide, you will quickly learn how to use the collaborative session manag
 - :ref:`how-to-join`
 - :ref:`how-to-manage`
 
+First launch
+============
+
+Welcome to the Multi-User manual.
+You will find here all the documentation necessary for the good use of the addon: :ref:`index-manual`
+
+First of all, let's have a quick look at the Multi-User features.
+
+Username and color
+------------------
+
+When you launch the addon for the first time you can find this panel in the Sidebar of your View3D:
+
+.. figure:: img/first_time_menu.png
+   :align: center
+
+1. Choose a **name** and a **color** that will be specific to you and that will allow others to identify you easily once in session. Don't worry, they can be changed at any time in *Edit >> Prerecences >> Add-ons >> Multi-user*.
+2. Press **Continue**
+
+Server list
+-----------
+
+
+
 .. _how-to-host:
 
 How to host a session

docs/getting_started/update.rst

@@ -0,0 +1,57 @@
+================
+Update the Addon
+================
+
+Multi-User has a built-in auto-update function in its preferences.
+
+Auto-Update
+-----------
+
+1. Enable it by clicking 'Auto-check for Update' and choose the frequency you'd like.
+2. **Make sure to click the three bars in the bottom-left, and save this to your preferences**
+
+.. figure:: img/auto_updater_location.png
+    :align: center
+    :width: 500px
+
+    Update menu in the addon preferences pannel
+
+Manual Update
+-------------
+
+Sometimes you'd like to perform manual update, or even side-grade or rollback your multi-user version. Perhaps you are trying out new features from the 'develop' branch in a test session.
+
+1. Click on 'Check now for multiuser update'. Multi-user will now find new versions
+
+.. figure:: img/auto_updater_check.png
+    :align: center
+    :width: 500px
+
+    Check for updates
+
+1. Select 'Install latest master / old version'
+
+.. figure:: img/auto_updater_last.png
+    :align: center
+    :width: 500px
+
+    Install
+
+1. In most cases, select 'master' branch for the latest stable release. The unstable 'develop' branch and older releases are available
+
+.. figure:: img/auto_updater_version.png
+    :align: center
+    :width: 500px
+
+    Select version
+
+4. Finally, restart blender to use the updated version
+
+.. figure:: img/auto_updater_restart.png
+    :align: center
+    :width: 500px
+
+    Restart blender
+
+.. toctree::
+    :maxdepth: 1

docs/glossary/index.rst

@@ -0,0 +1,17 @@
+###############
+User Interface
+###############
+
+Side Pannel
+===========
+
+.. toctree::
+    :maxdepth: 1
+ 
+    Introduction <server/introduction.rst>
+    server/splash.rst
+
+Presence
+=========
+
+ui

docs/hosting_internet/index.rst

@@ -0,0 +1,17 @@
+###################
+Hosting on Internet
+###################
+
+Side Pannel
+===========
+
+.. toctree::
+    :maxdepth: 1
+ 
+    Introduction <server/introduction.rst>
+    server/splash.rst
+
+Presence
+=========
+
+ui

docs/index.rst

@@ -1,66 +1,143 @@
+.. _index-manual:
+
 =====================================
-Welcome to Multi-user's documentation
+Multi-user 0.5.0 Reference Manual
 =====================================
 
+Welcome to the manual of the Multi-user, a free and open source blender addon. It tool aims to bring multiple users to work on the same .blend over the network.
+
 .. image:: img/homepage_ban.png
 
-The multi-user addon is a free and open source blender plugin. It tool aims to bring multiple users to work on the same .blend over the network.
-
 .. warning::  Under development, use it at your own risks.
 
 
+Getting started
+===============
 
-Main Features
+.. only:: builder_html and (not singlehtml)
-=============
 
-- Collaborative workflow in blender
+    .. container:: tocdescr
-- Viewport users presence (active selection, POV)
-- Datablocks right managment
-- Tested under Windows 
 
-Community
+        .. container:: descr
+
+            :doc:`about/introduction`
+
+        .. container:: descr
+   
+            :doc:`getting_started/install`
+
+        .. container:: descr
+       
+            :doc:`getting_started/quickstart`
+        
+        .. container:: descr
+       
+            :doc:`getting_started/troubleshooting`
+
+
+Sections
 =========
 
-A `discord server <https://discord.gg/aBPvGws>`_ have been created to provide help for new users and 
+.. only:: builder_html and (not singlehtml)
-organize collaborative creation sessions.
 
-Status
+   .. container:: tocdescr
-======
 
-.. image:: img/homepage_roadmap.png
+      .. container:: descr
+
+         .. figure:: /img/index_ui.png
+            :target: ui/index.html
+
+         :doc:`/ui/index`
+            An introduction to Multi-User's interface.
+
+      .. container:: descr
+
+         .. figure:: /img/index_advanced.png
+            :target: advanced/index.html
+
+         :doc:`/advanced/index`
+            Overview of the advanced settings.
+
+      .. container:: descr
+
+         .. figure:: /img/index_hosting_internet.png
+            :target: hosting_internet/index.html
+
+         :doc:`/hosting_internet/index`
+            A tutorial to host a collaborative Multi-User session on the internet.
+
+      .. container:: descr
+
+         .. figure:: /img/index_workflow.png
+            :target: workflow/index.html
+
+         :doc:`/workflow/index`
+            A guide to understand collaborative workflow in 3D.
 
 
-Follow the `roadmap <https://gitlab.com/slumber/multi-user/-/boards/929107>`_ to be aware of last news.
+.. only:: latex or epub or singlehtml
 
-Documentation is organized into the following sections:
+    .. toctree::
-
-.. toctree::
         :maxdepth: 1
-    :caption: About
-    :name: sec-about
     
-    about/introduction
+        getting_started/index.rst
+        ui/index.rst
+        advanced/index.rst
+        hosting_internet/index.rst
+        workflow/index.rst
 
-.. toctree::
-    :maxdepth: 1
-    :caption: Getting started
-    :name: sec-learn
 
-    getting_started/install
+.. Main Features
-    getting_started/quickstart
+.. =============
-    getting_started/glossary
-    getting_started/troubleshooting
 
-.. toctree::
+.. - Collaborative workflow in blender
-   :maxdepth: 1
+.. - Viewport users presence (active selection, POV)
-   :caption: Tutorials
+.. - Datablocks right managment
-   :name: sec-tutorials
+.. - Tested under Windows 
 
-   tutorials/hosting_guide
+.. Community
+.. =========
 
-.. toctree::
+.. A `discord server <https://discord.gg/aBPvGws>`_ have been created to provide help for new users and 
-    :maxdepth: 1
+.. organize collaborative creation sessions.
-    :caption: Community
-    :name: sec-community
 
-    ways_to_contribute
+.. Status
+.. ======
+
+.. .. image:: img/homepage_roadmap.png
+
+
+.. Follow the `roadmap <https://gitlab.com/slumber/multi-user/-/boards/929107>`_ to be aware of last news.
+
+.. Documentation is organized into the following sections:
+
+.. .. toctree::
+..     :maxdepth: 1
+..     :caption: About
+..     :name: sec-about
+
+..     about/introduction
+
+.. .. toctree::
+..     :maxdepth: 1
+..     :caption: Getting started
+..     :name: sec-learn
+    
+..     getting_started/install
+..     getting_started/quickstart
+..     getting_started/glossary
+..     getting_started/troubleshooting
+
+.. .. toctree::
+..    :maxdepth: 1
+..    :caption: Tutorials
+..    :name: sec-tutorials
+
+..    tutorials/hosting_guide
+
+.. .. toctree::
+..     :maxdepth: 1
+..     :caption: Community
+..     :name: sec-community
+    
+..     ways_to_contribute

docs/resources/css/epub_overrides.css

@@ -0,0 +1,18 @@
+/*
+ * This stylesheet is applied after the theme's default one,
+ * and thus any overrides or additions can be added here.
+ *
+ * More info:
+ *		https://www.sphinx-doc.org/en/master/extdev/appapi.html#sphinx.application.Sphinx.add_css_file
+ */
+
+/* Allow text to flow around right aligned images */
+.align-right {
+    float: right;
+    margin: 0 0 24px 24px;
+ }
+ 
+ /* Prevent images from flowing into other headings */
+ h1, h2, h3, h4, h5, h6 {
+   clear: both;
+ }

docs/resources/css/theme_overrides.css

@@ -0,0 +1,326 @@
+/*
+ * This stylesheet is applied after the theme's default one,
+ * and thus any overrides or additions can be added here.
+ *
+ * More info:
+ *		https://www.sphinx-doc.org/en/master/extdev/appapi.html#sphinx.application.Sphinx.add_css_file
+ */
+
+ h5 {margin-bottom: 5px}
+
+ /* Sidebar menu links. */
+ .wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a:hover {background: #c0c0c0}
+ .wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a:hover {background: #b5b5b5}
+ .wy-menu-vertical li.toctree-l4 {font-size: 1em}
+ .wy-menu-vertical li.current a {border: 0}
+ .wy-side-nav-search > a:hover {background: none; opacity: 0.9}
+ .wy-side-nav-search > a.icon::before {content: none}
+ 
+ /* Ensure background of input fields is light color even when a local theme wants it to be dark. */
+ input[type="text"], input[type="search"], input[type="password"],
+ input[type="email"], input[type="url"],
+ input[type="date"], input[type="month"], input[type="week"], input[type="time"],
+ input[type="datetime"], input[type="datetime-local"],
+ input[type="number"], input[type="tel"], input[type="color"] {
+     background-color:#FCFCFC;
+ }
+ 
+ /* Boxed paragraphs. */
+ .rst-content .refbox .admonition-title {background-color: #bbb}
+ .rst-content .refbox {background-color: #e3e3e3}
+ .rst-content .seealso .admonition-title {background-color: #7a87e6}
+ .rst-content .seealso {background-color: #e7ebfa}
+ .rst-content .important .admonition-title {background-color: #ddca3b}
+ .rst-content .important {background-color: #f6f3a5}
+ 
+ /* refbox =, seealso ( > ), note ( i ), tip i , hint (+), warn / ! \ */
+ .refbox .admonition-title::before {content:"\f00b"}
+ .seealso .admonition-title::before{content:"\f138"}
+ .note .admonition-title::before{content:"\f05a"}
+ .tip .admonition-title::before{content:"\f129"; width: 0.75em; text-align: center}
+ .hint .admonition-title::before{content:"\f055"}
+ .warning .admonition-title::before{content:"\f071"}
+ 
+ /* 'refbox' field. */
+ .refbox .field-list .field-name, .refbox .field-list .field-body {
+     padding: 0px;
+ }
+ .refbox dl dt {font-weight: normal}
+ 
+ /* Ugly 'red' literals. */
+ .rst-content tt.literal, .rst-content tt.literal, .rst-content code.literal {
+     color:#404040;
+ }
+ 
+ /* Literal blocks that use too much padding, make them look like regular literals. */
+ .rst-content pre.literal-block {
+     font-size: 75%;
+     margin:0;
+     padding:2px 4px;
+     color:#404040;
+     background: #ffffff;
+     white-space: normal;
+     display: inline;
+ }
+ 
+ /* Fix definisions with different ids. */
+ .rst-content dl.simple {
+     margin-bottom: 0px;
+ }
+ 
+ /* Fix nested block spacing. */
+ .rst-content .document dl dt,
+ .rst-content dd dl,
+ .rst-content dl.field-list dd > p {
+     margin: 0;
+ }
+ 
+ /* Dont indent field lists */
+ .rst-content dl.field-list dt {
+     padding-left: 0 !important;
+ }
+ 
+ /* Fix padding for normal definitions nested in field lists */
+ .rst-content dl.field-list dd > dl.simple {
+     padding-top: 12px;
+ }
+ 
+ /* Without this, paragraphs in bullet points within definition lists have too much vertical padding. */
+ .rst-content li > p {
+     margin-bottom: 0px !important;
+ }
+ 
+ /* TABLE & FIGURE */
+ 
+ /* captions text style */
+ .rst-content .figure .caption,
+ .rst-content table.docutils caption,
+ .rst-content table.field-list caption {
+     font: italic 90%/18px Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
+     color: #808080;
+ }
+ 
+ /* Captions top padding. */
+ .rst-content .figure .caption { margin-top: 4px; }
+ .rst-content table.docutils caption { padding: 0.5em; }
+ 
+ /* Text word wrap. */
+ .wy-table-responsive table td,
+ .wy-table-responsive table th { white-space: normal; }
+ 
+ /* Cell's vertical align. */
+ /* use "valign" class for middle align. */
+ .rst-content table.docutils:not(.valign) td { vertical-align: baseline; }
+ 
+ /* Field list align. */
+ .rst-content table.field-list td { padding-top: 8px; }
+ 
+ /* Table header cells border color. */
+ .rst-content table.docutils th { border-color: #e1e4e5; }
+ 
+ /* Figure in table margin. */
+ .rst-content td div.figure {
+     margin-top: 4px; margin-bottom: 0;
+ }
+ 
+ /* Figure legend. */
+ .legend {
+     font-size: 90%;
+     color: #484848;
+     margin-top: -20px;
+ }
+ .rst-content dl .legend { margin-top: -10px; }
+ 
+ @media screen and (max-width: 768px){
+ 
+     .wy-table-responsive table:not(.footnote) { min-width: 520px; }
+     .rst-content table.docutils caption { text-align: left; }
+     img { width: auto; }
+ 
+ }
+ 
+ /* End TABLE & FIGURE. */
+ 
+ /* Video center. */
+ iframe {
+     display: block;
+     margin: 0 auto 24px auto;
+     border: 0;
+     max-width: 100%;
+ }
+ 
+ /* Copyright font scale down. */
+ footer p{ font-size: smaller}
+ 
+ .footer-contribute {
+     display: block;
+     font-size: smaller;
+     margin-top: -12px
+ }
+ 
+ .footer-contribute li {
+     display: inline;
+     list-style-type: none;
+     padding-right: 20px;
+ }
+ 
+ /* Quotes for Fig. "link". */
+ a[href^="#fig-"]::before {content: "\201c";}
+ a[href^="#fig-"]::after {content: "\201d";}
+ 
+ /* Intermediate headline. */
+ .rubric {font-family: "Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif}
+ 
+ /* ".. container::" lead, block text float around image. */
+ .lead {
+     clear: both; width: 100%;
+ }
+ 
+ /* Mark external links. */
+ a.external {color:#656AE0;}
+ /* List blender.org as internal. */
+ .external[href^="https://www.blender.org"], .external[href^="https://docs.blender.org"], .external[href^="https://wiki.blender.org"] {
+     color:#2980B9;
+ }
+ 
+ /* Draws a box around menuselection and kbd role. */
+ .menuselection, .kbd.docutils.literal {
+     font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
+     font-size: 90%;
+     font-weight: normal;
+     background-color: rgba(255, 255, 255, 0.65);
+     border: solid #E1E4E5 1px;
+     white-space: nowrap;
+     padding: 2px 5px;
+ }
+ @media screen and (max-width: 420px) {
+     .menuselection {white-space: normal}
+ }
+ .caption .menuselection {
+     background-color: transparent;
+     border: none;
+ }
+ .caption .kbd {background-color: transparent}
+ 
+ /* Remove indent on line break. */
+ .rst-content .line-block {margin-left:0px}
+ 
+ /* Applied on main index:sections. */
+ /* Start section description. */
+ @media screen and (min-width: 450px){
+     .tocdescr {
+         display: flex; display: -webkit-flex;
+         flex-flow: row wrap; -webkit-flex-flow: row wrap;
+         justify-content: space-between; -webkit-justify-content: space-between;
+         align-items: flex-start; -webkit-align-items: flex-start;
+         align-content: flex-start; -webkit-align-content: flex-start;
+         list-style-type: none;
+         margin-bottom: 10px;
+     }
+     /* Dan Andreasson on Stack Overflow. */
+     .tocdescr:after {
+         content: "";
+         flex: 1 0 33.3%; -webkit-flex: 1 0 33.3%;
+         margin-left: 45px;
+         align-self: stretch; -webkit-align-self: stretch;
+     }
+ }
+ @media screen and (max-width: 450px) {
+     .tocdescr {
+         display: flex; display: -webkit-flex;
+         flex-flow: column wrap; -webkit-flex-flow: column wrap;
+         justify-content: space-between; -webkit-justify-content: space-between;
+         align-items: flex-start; -webkit-align-items: flex-start;
+         align-content: flex-start; -webkit-align-content: flex-start;
+         list-style-type: none;
+         margin-bottom: 10px;
+     }
+     .tocdescr:after {
+         content: "";
+         flex: none; -webkit-flex: none;
+     }
+ }
+ .descr {
+     flex: 2 0 33.3%; -webkit-flex: 2 0 33.3%;
+     margin: 10px 15px;
+     border-radius: .3em;
+     user-select: none;
+ }
+ .descr div.figure {
+     margin-bottom: 0px;
+     display: block;
+ }
+ .descr img {
+     border-top-left-radius: .3em;
+     border-top-right-radius: .3em;
+ }
+ .descr dl {margin-bottom: 10px}
+ .descr dl dt > a {
+     display: block;
+     width: 100%;
+     margin-bottom: 10px;
+ }
+ .descr dl dt a em, .descr dl dt a span{
+     font-weight: bold;
+     font-style: normal;
+     font-size: 1.3em;
+ }
+ .descr dl dt{padding: 18px 15px 0px!important}
+ .descr dl dd{
+     padding: 0px 15px;
+     font-style: normal;
+     margin: 0px;
+     color: #808080;
+     font-size: 90%;
+ }
+ .descr {
+     box-shadow: rgba(0,0,0,0.05) 0px 1px 4px 0px,
+                     rgba(211,216,223,0.33) 0px 15px 20px -1px;
+ }
+ #getting-started .descr {
+     box-shadow: none;
+ }
+ /* End section description. */
+ 
+ /* Start custom toctree. */
+ .toctree-wrapper .toctree-l1 > a {margin-bottom: 0.15em}
+ /* Indent all lines following the first. */
+ .toctree-wrapper * a {
+     display: block;
+     width: 90%;
+     text-indent: -1em;
+     margin-left: 1em;/*invert indent*/
+     padding-top: 0.25em;
+     line-height: 1.25em;
+ }
+ 
+ /* Underline provided by nested ul (not li). */
+ .toctree-wrapper * ul {
+     padding-left: 2em;
+     border-top: solid #ececec 1px;
+ }
+ .toctree-wrapper > ul {margin-left: 1em}
+ .rst-content .toctree-wrapper ul li ul {
+     margin-bottom: 0.75em;
+     padding-top: 0.5em;
+ }
+ .rst-content .toctree-wrapper ul li a:hover {color: #25afef}
+ .rst-content .toctree-wrapper ul li a:visited:hover {color: #C961DA}
+ .toctree-wrapper .toctree-l1 > a{font-size: 104%}
+ .toctree-wrapper .toctree-l2 > a{font-size: 102%}
+ .toctree-wrapper .toctree-l3 > a{font-size: 100%}
+ .toctree-wrapper .toctree-l1 > ul{border-color: #bfbfbf}
+ .toctree-wrapper .toctree-l2 > ul{border-color: #e1e0e0}
+ .toctree-wrapper .toctree-l3 > ul{border-color: #ececec}
+ /* Remove list styling, css rule hierarchy. */
+ .rst-content .toctree-wrapper ul li, .rst-content .toctree-wrapper ul li li , .rst-content .toctree-wrapper ul li li li {
+     list-style-type: none;
+     margin-left: 0px;
+ }
+ /* End custom toctree. */
+ 
+ /* Start genindex consistency. */
+ .genindextable * strong {font-weight: normal}
+ .genindex-jumpbox {margin-bottom: 1.245em}
+ .indextable {margin-bottom: 1.245em}
+ /* End genindex consistency. */

docs/troubleshooting/index.rst

@@ -0,0 +1,17 @@
+###############
+User Interface
+###############
+
+Side Pannel
+===========
+
+.. toctree::
+    :maxdepth: 1
+ 
+    Introduction <server/introduction.rst>
+    server/splash.rst
+
+Presence
+=========
+
+ui

docs/ui/index.rst

@@ -0,0 +1,17 @@
+###############
+User Interface
+###############
+
+Side Pannel
+===========
+
+.. toctree::
+    :maxdepth: 1
+ 
+    Introduction <server/introduction.rst>
+    server/splash.rst
+
+Presence
+=========
+
+ui

docs/workflow/index.rst

@@ -0,0 +1,17 @@
+########
+Workflow
+########
+
+Side Pannel
+===========
+
+.. toctree::
+    :maxdepth: 1
+ 
+    Introduction <server/introduction.rst>
+    server/splash.rst
+
+Presence
+=========
+
+ui