pleroma-fe

commit: f27226b55cefe6e351e562bbc908f5517e236804
parent 666498e7b76144b35d245d4b1c09e1dc62fac84b
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 10 Apr 2022 22:09:46 +0300

improvements to relative font sizes

Diffstat:
M
src/App.scss
6
+++---
M
src/components/popover/popover.vue
2
+-
M
src/panel.scss
13
+++++++------

3 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -301,7 +301,7 @@ nav {
   cursor: pointer;
   box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
-  font-size: 1rem;
+  font-size: 1em;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
@@ -429,7 +429,7 @@ textarea,
   color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
-  font-size: 1rem;
+  font-size: 1em;
   margin: 0;
   box-sizing: border-box;
   display: inline-block;
@@ -730,7 +730,7 @@ i[class*=icon-],
 }
 
 .btn.button-default {
-  min-height: 28px;
+  min-height: 2em;
 }
 
 .new-status-notification {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
@@ -65,7 +65,7 @@
 .dropdown-menu {
   display: block;
   padding: .5rem 0;
-  font-size: 1rem;
+  font-size: 1em;
   text-align: left;
   list-style: none;
   max-width: 100vw;
diff --git a/src/panel.scss b/src/panel.scss
@@ -28,7 +28,8 @@
 
 .panel-body:empty::before {
   content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
-  display: block; margin: 1em;
+  display: block;
+  margin: 1em;
   text-align: center;
 }
 
@@ -42,18 +43,18 @@
   background-size: cover;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: 28px;
+  line-height: calc(var(--panel-heading-height) / 2);
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
   align-items: baseline;
-  height: var(--panelHeadingHeight);
+  height: var(--panel-heading-height);
   z-index: -2;
 
-  --panelHeadingHeight: 45px;
+  --panel-heading-height: 3.2em;
 
   &.-flexible-height {
-    --panelHeadingHeight: auto;
+    --panel-heading-height: auto;
 
     &::after,
     &::before {
@@ -92,7 +93,7 @@
     z-index: -1;
     border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
     border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    mask: linear-gradient(to bottom, white var(--panelHeadingHeight), transparent var(--panelHeadingHeight));
+    mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height));
   }
 
   .title {