Added features

content/features/index.en.md

@@ -2,11 +2,124 @@
 title: "Features"
 date: 2018-10-13T21:59:47+02:00
 draft: false
-type: "page"
+type: "features"
 menu:
   page:
     title: "Features"
     weight: 20
 ---
 
-# Features
+<div class="container">
+    <div class="content">
+        <h1>Features</h1>
+        <p>Vikunja is a TODO-List app. Think of it like the notebook you have with all your things to keep track of, but better.</p>
+    
+        <div class="columns">
+            <div class="column theimage">
+                <img src="lists.png" alt="Lists"/>
+            </div>
+            <div class="column is-half">
+                <h2>Lists</h2>
+            
+                <p>First things first: Vikunja can create lists. And yes, you can add tasks to a list. But it can do so much more 
+                <i>(or at least, it will be able to do a lot more at <a href="#roadmap">some point</a>)</i>.</p>
+                
+                <h2>Namespaces</h2>
+                
+                <p>A... what? A namespace is something like a group of lists. Every list is part of a particular namespace which you can then share
+                or simply use as a method to keep track of multiple lists more easily.</p>
+                
+                <h2>Tasks</h2>
+                
+                <p>Tasks are not only simple tasks. You can let Vikunja remind you of tasks when they're due. Never miss an important deadline again!</p
+            </div>
+        </div>
+    </div>
+
+<div class="columns">
+            <div class="column is-half">
+                <h2>Sharing</h2>
+            
+                <p>
+                Ever wished you could just share that grocery list with your roomate instead of having to send dozens of texts on your way to the supermarket?
+                   With Vikunja, you can. Simply share a list or a namespace with all its lists to another user.
+                   Don't want your roommate to add new things to the grocery list and only do the shopping? 
+                   You can also share a list with _read-only_ access!</p>
+                   
+                <p>
+                 Planning a bigger thing? You can use teams to share a list or namespace with multiple people at a time!
+                </p>
+            </div>
+            <div class="column theimage">
+                <img src="sharing-user.png" alt="Sharing with a user" style="margin-top:3em"/>
+            </div>
+        </div>
+
+### CalDAV
+
+Ever discovered that web app with all its great features, but somewhat... not good to use? Not to say [our app](https://vikunja.io/download) is not easy to
+use - but you don't have to use it! Vikunja comes with a calDAV-integration which lets you use the tools you already use and love.
+
+</div>
+</div>
+
+<section class="hero is-medium is-warning is-bold">
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title">
+        Can't wait to see it in action?
+      </h1>
+      <a href="http://try.vikunja.io" class="button is-success">Try it</a>
+    </div>
+  </div>
+</section>
+
+<div class="container" style="margin-top:1.5em">
+    <div class="content">
+        <div class="columns">
+            <div class="column is-half">
+
+<h2>Self-Hosted</h2>
+
+<p>Use Vikunja on your own server or hosted*. Your data will always be yours we won't sell your grocery list to Amazon. Don't trust us? 
+<a href="http://code.vikunja.io">Check for yourself</a>.</p>
+
+<p>Also, did I mention "the cloud"? Vikunja syncs across all your devices, no matter if you created a task on the mobile app or on your laptop, enabling
+you to continue where you left off.
+<br/>
+<small style="color:#636363">\* We don't have any stable hosted instances of Vikunja available, yet.</small>
+
+</p>
+
+</div>
+            <div class="column is-half">
+<h2>Open-Source</h2>
+
+<p>Vikunja is completly open source and released under the <a href="http://code.vikunja.io/api/src/branch/master/LICENSE">LGPLv3</a>.</p>
+
+<p>You can contribute in multiple ways, even if you're not a developer! It already helps a lot when you use Vikunja and report 
+<a href="http://code.vikunja.io/api/issues">features you'd like or bugs you find</a>.</p>
+
+<p>And if you are a developer and know your way around <a href="http://code.vikunja.io/api">Go</a> or 
+<a href="http://code.vikunja.io/frontend">Vue.js</a> any help is appreceated.</p>
+
+</div>
+</div>
+
+## Roadmap
+
+But of course, there's more to come! Take a look at this list of things we've planned to add:
+
+* Labels for todo lists and tasks
+* Prioritize tasks
+* Assign users to tasks
+* Subtasks
+* Repeating tasks
+* Attachments on tasks
+* Get all tasks for you per interval (day/month/period)
+* More sharing features
+  * Share via a world-readable link with or without password, like Nextcloud
+  
+  
+</div>
+</div>

themes/vikunja/layouts/features/single.html

@@ -0,0 +1,8 @@
+{{ partial "header.html" . }}
+{{ partial "navbar.html" . }}
+
+<div class="features">
+	{{ .Content }}
+</div>
+
+{{ partial "footer.html" . }}

themes/vikunja/src/main.scss

@@ -171,4 +171,89 @@ h1, h2, h3, h4, h5, h6 {
   right: 0;
   z-index: 1;
   opacity: 1;
+}
+
+/// Test if `$value` is a valid direction
+/// @param {*} $value - Value to test
+/// @return {Bool}
+@function is-direction($value) {
+  $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
+  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+
+  @return $is-keyword or $is-angle;
+}
+
+/// Convert a direction to legacy syntax
+/// @param {Keyword | Angle} $value - Value to convert
+/// @require {function} is-direction
+/// @require {function} convert-angle
+/// @throw Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.;
+@function legacy-direction($value) {
+  @if is-direction($value) == false {
+    @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
+  }
+
+  $conversion-map: (
+          to top          : bottom,
+          to top right    : bottom left,
+          to right top    : left bottom,
+          to right        : left,
+          to bottom right : top left,
+          to right bottom : left top,
+          to bottom       : top,
+          to bottom left  : top right,
+          to left bottom  : right top,
+          to left         : right,
+          to left top     : right bottom,
+          to top left     : bottom right
+  );
+
+  @if map-has-key($conversion-map, $value) {
+    @return map-get($conversion-map, $value);
+  }
+
+  @return 90deg - $value;
+}
+
+/// Mixin printing a linear-gradient
+/// as well as a plain color fallback
+/// and the `-webkit-` prefixed declaration
+/// @access public
+/// @param {Keyword | Angle} $direction - Linear gradient direction
+/// @param {Arglist} $color-stops - List of color-stops composing the gradient
+@mixin linear-gradient($direction, $color-stops...) {
+
+  @if is-direction($direction) == false {
+    $color-stops: $direction, $color-stops;
+    $direction: 180deg;
+  }
+
+  background: nth(nth($color-stops, 1), 1);
+  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
+  background: linear-gradient($direction, $color-stops);
+}
+
+// Features page
+.features{
+  @include linear-gradient(180deg, $primary, lighten($green, 15%));
+
+  h1,h2,h3,&{
+    color: #fff;
+  }
+
+  a{
+    color: lighten($dark, 10%);
+  }
+
+  .column{
+
+  }
+
+  .column.theimage {
+    text-align: center;
+
+    img{
+      box-shadow: .4em .4em 1em lighten($dark, 15%);
+    }
+  }
 }