From ac348360b37de8caae8057eadfad234ab8126d41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jannes=20H=C3=B6ke?= <jhoeke@uni-bremen.de>
Date: Tue, 3 Apr 2018 12:27:31 +0200
Subject: [PATCH] :lipstick: Add some basic styling

---
 assets/logo_full.svg        | 264 ++++++++++++++++++++++++++++++++++++
 assets/logo_small.svg       | 244 +++++++++++++++++++++++++++++++++
 rollup.config.js            |   1 +
 src/components/app-shell.ts |  16 ++-
 src/components/view-home.ts |  27 +++-
 src/index.html              |  10 ++
 6 files changed, 557 insertions(+), 5 deletions(-)
 create mode 100644 assets/logo_full.svg
 create mode 100644 assets/logo_small.svg

diff --git a/assets/logo_full.svg b/assets/logo_full.svg
new file mode 100644
index 0000000..f7e3678
--- /dev/null
+++ b/assets/logo_full.svg
@@ -0,0 +1,264 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="113.78423mm"
+   height="29.173998mm"
+   viewBox="0 0 113.78421 29.173998"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="logo_2.svg">
+  <defs
+     id="defs2">
+    <marker
+       inkscape:stockid="Arrow2Send"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="marker5904"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path5902"
+         style="fill:#ebebeb;fill-opacity:1;fill-rule:evenodd;stroke:#ebebeb;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutM"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutM"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4671"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.4)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker5364"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="Arrow2Send">
+      <path
+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         id="path5362"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="StopS"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="StopS"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4701"
+         d="M 0,5.65 V -5.65"
+         style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ebebeb;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.2)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutS"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutS"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4674"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.2)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow2Send"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Send"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4559"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Send"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Send"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4541"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Mend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Mend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4535"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(-0.4,0,0,-0.4,-4,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4529"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="194.46766"
+     inkscape:cy="78.237486"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1029"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     fit-margin-top="2.5"
+     fit-margin-left="1"
+     fit-margin-right="1"
+     fit-margin-bottom="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="opacity:0.95999995"
+     transform="translate(-66.674287,-73.040534)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:26.26924324px;line-height:1.25;font-family:Nunito;-inkscape-font-specification:'Nunito, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;opacity:1;fill:#ebebeb;fill-opacity:1;stroke:none;stroke-width:0.65673363"
+       x="65.704094"
+       y="94.979774"
+       id="text7446-4"><tspan
+         sodipodi:role="line"
+         id="tspan7444-7"
+         x="65.704094"
+         y="94.979774"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:26.26924324px;font-family:Quicksand;-inkscape-font-specification:'Quicksand, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ebebeb;fill-opacity:1;stroke-width:0.65673363">Forkt</tspan></text>
+    <g
+       transform="translate(89.135776,4.2201453)"
+       style="opacity:1"
+       id="g1345-8">
+      <path
+         sodipodi:nodetypes="csccc"
+         inkscape:connector-curvature="0"
+         id="path7448-6"
+         d="m 46.501225,78.421812 v 5.60182 c 0,1.43284 0.569193,2.806994 1.582363,3.820164 1.013171,1.013171 2.387325,1.582364 3.820164,1.582363 v 3.620175"
+         style="fill:none;stroke:#ebebeb;stroke-width:3.20000005;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+      <g
+         style="fill:#ebebeb;fill-opacity:1;stroke:#ebebeb;stroke-opacity:1"
+         transform="matrix(0.56607127,0,0,0.56607127,35.147895,52.9829)"
+         id="g7452-3">
+        <path
+           inkscape:connector-curvature="0"
+           id="path7450-7"
+           style="fill:#ebebeb;fill-opacity:1;fill-rule:evenodd;stroke:#ebebeb;stroke-width:0.68627137;stroke-linejoin:round;stroke-opacity:1"
+           d="m 33.617625,49.284904 5.51001,-9.605401 5.51001,9.605402 c -3.253107,-1.534542 -7.703923,-1.5257 -11.02002,-1e-6 z" />
+      </g>
+      <path
+         sodipodi:nodetypes="cscc"
+         inkscape:connector-curvature="0"
+         id="path7454-7"
+         d="m 51.903752,89.426159 c 1.43284,10e-7 2.806994,-0.569192 3.820164,-1.582363 1.013171,-1.01317 1.582364,-2.387324 1.582363,-3.820164 v -3.870871"
+         style="fill:none;stroke:#ebebeb;stroke-width:3.20000005;stroke-miterlimit:3.9000001;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+      <circle
+         r="2.360553"
+         cy="94.633835"
+         cx="51.903751"
+         id="path1338-2"
+         style="fill:#ebebeb;fill-opacity:1;stroke:none;stroke-width:2.63604403;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="168.11252"
+       y="115.92489"
+       id="text947"><tspan
+         sodipodi:role="line"
+         id="tspan945"
+         x="168.11252"
+         y="125.28866"
+         style="stroke-width:0.26458332" /></text>
+    <text
+       id="text961"
+       y="94.979774"
+       x="149.4931"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:26.26924324px;line-height:1.25;font-family:Nunito;-inkscape-font-specification:'Nunito, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;opacity:1;fill:#ebebeb;fill-opacity:1;stroke:none;stroke-width:0.65673363"
+       xml:space="preserve"><tspan
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:26.26924324px;font-family:Quicksand;-inkscape-font-specification:'Quicksand, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ebebeb;fill-opacity:1;stroke-width:0.65673363"
+         y="94.979774"
+         x="149.4931"
+         id="tspan959"
+         sodipodi:role="line">ne</tspan></text>
+  </g>
+</svg>
diff --git a/assets/logo_small.svg b/assets/logo_small.svg
new file mode 100644
index 0000000..10f5249
--- /dev/null
+++ b/assets/logo_small.svg
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="27.24428mm"
+   height="27.24428mm"
+   viewBox="0 0 27.244276 27.24428"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="logo_small.svg">
+  <defs
+     id="defs2">
+    <marker
+       inkscape:stockid="Arrow2Send"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="marker5904"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path5902"
+         style="fill:#ebebeb;fill-opacity:1;fill-rule:evenodd;stroke:#ebebeb;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutM"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutM"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4671"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.4)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker5364"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="Arrow2Send">
+      <path
+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         id="path5362"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="StopS"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="StopS"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4701"
+         d="M 0,5.65 V -5.65"
+         style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ebebeb;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.2)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutS"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutS"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4674"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.2)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow2Send"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Send"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4559"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Send"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Send"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4541"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Mend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Mend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4535"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(-0.4,0,0,-0.4,-4,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4529"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="31.998281"
+     inkscape:cy="73.945585"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1029"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     fit-margin-top="2"
+     fit-margin-left="1.1"
+     fit-margin-right="1"
+     fit-margin-bottom="3.5"
+     inkscape:measure-start="74.7197,71.342"
+     inkscape:measure-end="81.1594,71.342" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="opacity:0.95999995"
+     transform="translate(-133.03684,-77.470254)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="168.11252"
+       y="115.92489"
+       id="text947"><tspan
+         sodipodi:role="line"
+         id="tspan945"
+         x="168.11252"
+         y="125.28866"
+         style="stroke-width:0.26458332" /></text>
+    <g
+       transform="translate(94.753775,4.9831069)"
+       style="opacity:1"
+       id="g1345-8">
+      <path
+         sodipodi:nodetypes="csccc"
+         inkscape:connector-curvature="0"
+         id="path7448-6"
+         d="m 46.501225,78.421812 v 5.60182 c 0,1.43284 0.569193,2.806994 1.582363,3.820164 1.013171,1.013171 2.387325,1.582364 3.820164,1.582363 v 3.620175"
+         style="fill:none;stroke:#ebebeb;stroke-width:3.20000005;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+      <g
+         style="fill:#ebebeb;fill-opacity:1;stroke:#ebebeb;stroke-opacity:1"
+         transform="matrix(0.56607127,0,0,0.56607127,35.147895,52.9829)"
+         id="g7452-3">
+        <path
+           inkscape:connector-curvature="0"
+           id="path7450-7"
+           style="fill:#ebebeb;fill-opacity:1;fill-rule:evenodd;stroke:#ebebeb;stroke-width:0.68627137;stroke-linejoin:round;stroke-opacity:1"
+           d="m 33.617625,49.284904 5.51001,-9.605401 5.51001,9.605402 c -3.253107,-1.534542 -7.703923,-1.5257 -11.02002,-1e-6 z" />
+      </g>
+      <path
+         sodipodi:nodetypes="cscc"
+         inkscape:connector-curvature="0"
+         id="path7454-7"
+         d="m 51.903752,89.426159 c 1.43284,10e-7 2.806994,-0.569192 3.820164,-1.582363 1.013171,-1.01317 1.582364,-2.387324 1.582363,-3.820164 v -3.870871"
+         style="fill:none;stroke:#ebebeb;stroke-width:3.20000005;stroke-miterlimit:3.9000001;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+      <circle
+         r="2.360553"
+         cy="94.633835"
+         cx="51.903751"
+         id="path1338-2"
+         style="fill:#ebebeb;fill-opacity:1;stroke:none;stroke-width:2.63604403;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+    </g>
+  </g>
+</svg>
diff --git a/rollup.config.js b/rollup.config.js
index bf63649..5c98a45 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -45,6 +45,7 @@ const frontendConfig = {
     typescript(),
     copy({
       'src/index.html': 'dist/index.html',
+      'assets': 'dist',
     }),
     cjs({
       extensions: ['.js', '.ts'],
diff --git a/src/components/app-shell.ts b/src/components/app-shell.ts
index 041427f..e475d86 100644
--- a/src/components/app-shell.ts
+++ b/src/components/app-shell.ts
@@ -1,11 +1,23 @@
 import { connect, withStore } from 'fit-html';
-import { html } from 'lit-html/lib/lit-extended';
+import { html, svg } from 'lit-html/lib/lit-extended';
 import store from '../store';
 import './view-home';
 
 const View = (props: {}) => html`
-<h1>ForkTune</h1>
+<style>
+a, a:visited, a:hover, a:active {
+    color: #ebebeb;
+    text-decoration: none;
+}
+
+ a:hover {
+    text-decoration: underline;
+ }
+</style>
+
+<div style="text-align: center;"><img src="logo_full.svg" /></div>
 <view-home></view-home>
+<footer><div style="text-align: center;"><a href="https://hacking.studio/">hacking ❤ studio</a></div></footer>
 `;
 
 const Shell = connect(
diff --git a/src/components/view-home.ts b/src/components/view-home.ts
index 2f11bf6..c8e7b11 100644
--- a/src/components/view-home.ts
+++ b/src/components/view-home.ts
@@ -19,12 +19,33 @@ interface ViewHomeDispatch {
 }
 
 const View = (props: ViewHomeProps & ViewHomeDispatch) => html`
-${!props.loggedIn ? html`<button on-click="${ props.loginSpotify }">Login via Spotify</button>` : ''}
-<ol>
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+<style>
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    font-size: 2rem;
+    border-bottom: thin #909090 solid;
+    padding: 0.1rem 0.5rem;
+}
+</style>
+
+${!props.loggedIn ? html`
+<div style="text-align: center">
+    <button style="font-size: 1.5rem;" type="button" class="btn btn-success" on-click="${ props.loginSpotify }">
+        Login via Spotify
+    </button>
+</div>` : ''}
+<ul>
 ${props.playlists.map((playlist) => html`
     <li>${playlist.name}</li>
 `)}
-</ol>
+</ul>
 `;
 
 const mapStateToProps = (state: State): ViewHomeProps => ({
diff --git a/src/index.html b/src/index.html
index 7c21459..b2bc0da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <title>ForkTune</title>
+    <style>
+        body {
+            background-color: #303030;
+            color: #ebebeb;
+            font-family: 'Roboto', 'Noto', sans-serif;
+            line-height: 1.5;
+            margin: 0;
+            min-height: 100vh;
+        }
+    </style>
 </head>
 <body>
     <app-shell></app-shell>