Add Flatpak information and download links

apps/index.html

@@ -42,7 +42,7 @@ <h5>Terminal</h5>
       </a>
     </div>
     <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">
-      <h5>Files</h5>
+      <h5 style="display:inline;">Files</h5> <a href="https://repo.liri.io/flatpak/io.liri.Files.flatpakref"><i class="material-icons" style="vertical-align:bottom;">file_download</i></a>
       <img class="materialboxed responsive-img z-depth-1" src="{{ site.baseurl }}/images/apps/files/screen_home_01.png">
       <p>Files is a tool for managing files</p>
       <a href="https://github.com/lirios/files">
@@ -68,7 +68,7 @@ <h4>Cross-platform Apps</h4>
   </p>
   <div class="mdlgrid">
     <div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">
-      <h5>Browser</h5>
+      <h5 style="display:inline;">Browser</h5> <a href="https://repo.liri.io/flatpak/io.liri.Browser.flatpakref"><i class="material-icons" style="vertical-align:bottom;">file_download</i></a>
       <img class="materialboxed responsive-img z-depth-1" src="{{ site.baseurl }}/images/apps/browser/screen_theme_color_01.png"/>
       <p class="flow-text">Liri Browser is a cross-platform, Material design webbrowser</p>
       <a class="waves-effect waves-light btn"
@@ -77,7 +77,7 @@ <h5>Browser</h5>
       </a>
     </div>
     <div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">
-      <h5>Text</h5>
+      <h5 style="display:inline;">Text</h5> <a href="https://repo.liri.io/flatpak/io.liri.Text.flatpakref"><i class="material-icons" style="vertical-align:bottom;">file_download</i></a>
       <img class="materialboxed responsive-img z-depth-1" src="{{ site.baseurl }}/images/apps/text/screen_highlighting_01.png"/>
       <p class="flow-text">Liri Text is a cross-platform text editor with features aimed to ease editing of code and configuration files</p>
       <a class="waves-effect waves-light btn"
@@ -87,3 +87,13 @@ <h5>Text</h5>
     </div>
   </div>
 </section>
+
+<section>
+  <h4>Trying them out</h4>
+
+      <h5>From source</h5>
+      <p class="flow-text">Get and build the apps from <a href="https://github.com/lirios">Github</a>.</p>
+
+      <h5>From a repository</h5>
+      <p>Check the <a href="/download/">Download</a> section.</p>
+</section>

download/index.html

@@ -26,6 +26,7 @@
     <a href="#archlinux-panel" class="mdl-tabs__tab is-active">Arch Linux</a>
     <a href="#iso-panel" class="mdl-tabs__tab">Images</a>
     <a href="#sources-panel" class="mdl-tabs__tab">Sources</a>
+    <a href="#flatpak-panel" class="mdl-tabs__tab">Flatpak</a>
   </div>
 
   <div class="mdl-tabs__panel is-active" id="archlinux-panel">
@@ -92,4 +93,30 @@ <h5>Hardware Support</h5>
       Download source code from <a href="https://github.com/lirios">here</a>.
     </p>
   </div>
+  <div class="mdl-tabs__panel" id="flatpak-panel">
+    <p>We now have Flatpak <a href="https://github.com/lirios/flatpak-runtime">runtime</a> and apps. More information on our <a href="/blog/2017/04/12/flatpak.html">blog article</a>.</p>
+    <p>Install Browser:</p>
+
+    <div class="language-sh highlighter-rouge"><pre class="highlight"><code>flatpak --user install https://repo.liri.io/flatpak/io.liri.Browser.flatpakref
+    </code></pre>
+    </div>
+
+    <p>Install Calculator:</p>
+
+    <div class="language-sh highlighter-rouge"><pre class="highlight"><code>flatpak --user install https://repo.liri.io/flatpak/io.liri.Calculator.flatpakref
+    </code></pre>
+    </div>
+
+    <p>Install Files:</p>
+
+    <div class="language-sh highlighter-rouge"><pre class="highlight"><code>flatpak --user install https://repo.liri.io/flatpak/io.liri.Files.flatpakref
+    </code></pre>
+    </div>
+
+    <p>Install Text:</p>
+
+    <div class="language-sh highlighter-rouge"><pre class="highlight"><code>flatpak --user install https://repo.liri.io/flatpak/io.liri.Text.flatpakref
+    </code></pre>
+    </div>
+  </div>
 </div>