adding

public/css/index.css

@@ -14905,6 +14905,11 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
     font-size: 2.7rem;
   }
 }
+.container--app {
+  max-width: 100%;
+  padding: 15px 30px;
+}
+
 .turbolinks-progress-bar {
   width: 5px;
   height: 100%;

resources/js/components/buckets.riot

@@ -0,0 +1,38 @@
+<app-buckets>
+    <div class="buckets">
+        <div class="grid">
+            <div class="col-12 col-md-4" each={ bucket in buckets }>
+                <a class="panel" href="/bucket/single/{ bucket.id }">
+                    { bucket.title }
+                </a>
+            </div>
+        </div>
+        <div class="buckets__more">
+            <button type="button" class="button" onclick={ handleClick }>
+                More
+                <span class="icon is-small is-left">
+                    <svg aria-hidden="true">
+                        <use xlink:href="/symbol-defs.svg#icon-add-circle"></use>
+                    </svg>
+                </span>
+            </button>
+        </div>
+    </div>
+    <script>
+
+        /**
+         *
+         *
+         *
+         *  @author Björn Hase
+         *
+         */
+
+        export default {
+            handleClick() {
+
+            }
+        }
+
+    </script>
+</app-buckets>

resources/js/critical.js

@@ -1,4 +1,4 @@
 const Turbolinks = require('turbolinks')
 
 Turbolinks.start()
-Turbolinks.setProgressBarDelay(500)
+Turbolinks.setProgressBarDelay(500)

resources/js/index.js

@@ -0,0 +1,2 @@
+window.axios = require('axios')
+window.riot = require('riot')

resources/scss/_container.scss

@@ -0,0 +1,4 @@
+.container--app {
+    max-width: 100%;
+    padding: 15px 30px;
+}

resources/scss/index.scss

@@ -1,5 +1,6 @@
 @import
-    '../../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui';
+    '../../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui',
+    'container';
 
 .turbolinks-progress-bar {
     width: 5px;

resources/views/bucket/form.html

@@ -1,9 +1,9 @@
 <% layout('./../layout.html') %>
 
-<div class="container">
+<div class="container container--app">
     <div class="grid">
         <div class="col-12">
-            <h1 class="highlight m-top-5">
+            <h1 class="highlight">
                 Create Bucket
             </h1>
         </div>
@@ -56,7 +56,7 @@
                     <% }) %>
                 </div>
 
-                <div class="">
+                <div class="m-top-5">
                     <button class="button hover-fill-text-constrast">
                         Create
                         <svg class="icon p-left-3 size-large" aria-hidden="true">

resources/views/bucket/single.html

@@ -1,6 +1,6 @@
 <% layout('./../layout.html') %>
 
-<div class="container">
+<div class="container container--app">
     <div class="grid">
         <div class="col-12">
             <h1><%= it.bucket.title %></h1>

resources/views/index.html

@@ -1,27 +1,19 @@
 <% layout('./layout.html') %>
 
-<div class="container">
+<div class="container container--app">
     <div class="grid">
         <div class="col-12">
-            <section class="flex m-bottom-5"">
-                <h2 class="m-bottom-2 m-right-2 highlight">
-                    Buckets
-                </h2>
-                <a class="button m-0 " href="/bucket/create">
-                    Create
-                </a>
-            </section>
+            <a class="button m-bottom-5" href="/bucket/create">
+                Create Bucket
+                <svg class="icon p-left-3 size-large" aria-hidden="true">
+                    <use xlink:href="/symbol-defs.svg#icon-circle-add"></use>
+                </svg>
+            </a>
             <section class="m-bottom-5">
-                <h3 class="highlight">
-                    Your Buckets
-                </h3>
-                <app-buckets visiblity="private"></app-buckets>
-            </section>
-            <section class="m-bottom-5">
-                <h3 class="highlight">
-                    Other Buckets
-                </h3>
-                <app-buckets visiblity="public,community"></app-buckets>
+                <h2 class="highlight">
+                    Public
+                </h2>
+                <app-buckets visiblity="public"></app-buckets>
             </section>
         </div>
     </div>