From 1269325e427612a1ff3cee369c22ae545eea6237 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 17 Nov 2020 11:47:04 +0100
Subject: [PATCH] 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 | 6 ++++++
packages/app-shell/src/app-shell.js | 10 +++++-----
2 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/packages/app-shell/assets/index.html b/packages/app-shell/assets/index.html
index 45b8b474..054b3316 100644
--- a/packages/app-shell/assets/index.html
+++ b/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>
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index f1d98e1c..90e405c4 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/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 {
--
GitLab