Add chapter about repositories

Signed-off-by: trivernis <trivernis@protonmail.com>

_docs/10_installation.md

@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: doc
 title: Installation
 sort_key: 10
 ---

_docs/20_repositories.md

@@ -0,0 +1,31 @@
+---
+layout: doc
+title: Repositories
+sort_key: 20
+draft: false
+---
+
+When opening mediarepo you will be greeted by an (empty) overview of configured repositories.
+A repository is a contained unit of imported files, settings and tags. 
+By using the *Add Repository* button you can create a new repository.
+
+![](/assets/images/mediarepo-empty-repo-view.png)
+
+A dialog should open where you can specify the name of the repository, the type and further related options.
+
+![](/assets/images/add-repository-dialog.png)
+
+When choosing the type *Local* you have to specify the path where the repository should be created. 
+If no repository exists at the selected path, you can initialize it by clicking on the *Init* button.
+After that you can save the configuration by clicking on *Save*.
+
+![](/assets/images/add-remote-repository-dialog.png)
+
+When choosing the *Remote* type you have to specify the IP address and port of the remote repository. 
+You can check connection to make sure the entered address is correct.
+Remote repositories are repositories that have a daemon running with TCP enabled and a fixed port.
+You can read more about configuring daemons and repositories [here](50_repo_configuration).
+
+After adding a repository it should appear in the repository overview.
+
+![](/assets/images/mediarepo-first-repository.png)

_docs/50_repo_configuration.md

@@ -0,0 +1,8 @@
+---
+layout: doc
+title: Repository Configuration
+sort_key: 1
+draft: true
+---
+
+Coming soon

_docs/doc2.md

@@ -1,6 +0,0 @@
----
-layout: page
-title: doc2
-sort_key: 1
-draft: true
----

_includes/previous-next.html

@@ -1,7 +1,7 @@
 <!-- Use if you want to show previous and next for all posts. -->
 {% assign user_url = site.url | append: site.baseurl %}
 {% assign full_base_url = user_url | default: site.github.url %}
-{% if page.previous.url %}
+{% if page.previous.url and page.previous.draft == false %}
   <div class="col-4 sm-width-full left mr-lg-4 mt-3">
     <a class="no-underline border-top-thin py-1 block" href="{{ page.previous.url | prepend: full_base_url }}">
       <span class="h5 bold text-accent">Previous</span>
@@ -10,7 +10,7 @@
     </a>
   </div>
   {% endif %}
-  {% if page.next.url %}
+  {% if page.next.url and page.next.draft == false %}
   <div class="col-4 sm-width-full left mt-3">
     <a class="no-underline border-top-thin py-1 block" href="{{ page.next.url | prepend: full_base_url }}">
       <span class="h5 bold text-accent">Next</span>

_layouts/doc.html

@@ -0,0 +1,19 @@
+---
+layout: default
+---
+<article class="container px-2 mx-auto mb4" itemscope itemtype="http://schema.org/BlogPosting">
+  <h1 class="post-headline col-9 sm-width-full mt-3 inline-block" itemprop="name headline">{{ page.title }}</h1>
+  <div class="col-4 sm-width-full mt-1 border-top-thin ">
+    <p class="mb-3 py-2 bold h4"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{
+        page.date | date: "%b %-d, %Y" }}</time></p>
+  </div>
+
+  <div class="prose" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+</article>
+
+<div class="container mx-auto px-2 py-2 clearfix">
+  {% include previous-next.html %}
+</div>

_layouts/post.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 <article class="container px-2 mx-auto mb4" itemscope itemtype="http://schema.org/BlogPosting">
-  <h1 class="h0 col-9 sm-width-full py-4 mt-3 inline-block" itemprop="name headline">{{ page.title }}</h1>
+  <h1 class="post-headline col-9 sm-width-full mt-3 inline-block" itemprop="name headline">{{ page.title }}</h1>
   <div class="col-4 sm-width-full mt-1 border-top-thin ">
     <p class="mb-3 py-2 bold h4"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{
         page.date | date: "%b %-d, %Y" }}</time></p>

_sass/_components.scss

@@ -147,4 +147,17 @@ code {
   @media (min-width: $breakpoint-lg) {
     margin-bottom: 0;
   }
+}
+
+.post-headline {
+  font-size: 3em;
+  line-height: 1.0125;
+  margin-top: 0.85em;
+  word-wrap: break-word;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+
+  @media (min-width: $breakpoint-lg) {
+    font-size: 5em;
+  }
 }