Refine spacing between elements in responsive mode; Make sticky menu more touch friendly

Now that we have clearer separated sections in responsive mode the different
spacing stand out so unify them a bit.

Also in case the menu is in sticky mode it's kinda small and hard to hit via touch
so add some padding there and remove some margin from the headline instead to keep
the overall height the same.

packages/app-shell/assets/index.html

@@ -7,6 +7,12 @@
     <style>
         :root {
             font-family: sans-serif;
+            font-weight: 300;
+            font-size: 11pt;
+        }
+
+        body {
+            margin: 0;
         }
     </style>
 

packages/app-shell/src/app-shell.js

@@ -445,10 +445,10 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
                 margin: 0 auto;
             }
 
-            aside { grid-area: sidebar; margin: 30px 15px; }
-            #headline { grid-area: headline; margin: 15px; text-align: center; }
-            main { grid-area: main; margin: 30px 15px; }
-            footer { grid-area: footer; margin: 30px; text-align: right; }
+            aside { grid-area: sidebar; margin: 15px 15px; }
+            #headline { grid-area: headline; margin: 10px; text-align: center; }
+            main { grid-area: main; margin: 15px 15px; }
+            footer { grid-area: footer; margin: 15px; text-align: right; }
 
             header .hd1-left {
                 display: flex;
@@ -614,7 +614,7 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
                 aside h2.subtitle {
                     display: block;
                     border-bottom: 1px solid black;
-                    padding: 0.25em 0.5em;
+                    padding: 0.5em 0.5em;
                 }
 
                 aside .menu {