pleroma-fe

commit: a16e158216784071949f91074beca4b2e7382017
parent fc04e24f561ae29a04783b4d8791dc533afc6eca
Author: Henry Jameson <me@hjkos.com>
Date:   Wed, 19 Jun 2024 22:16:31 +0300

better defaults, fonts scale with panel scale

Diffstat:
M
src/components/settings_modal/tabs/appearance_tab.vue
4
++--
M
src/modules/instance.js
8
++++----
M
src/panel.scss
3
++-

3 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -62,7 +62,7 @@
             path="navbarSize"
             step="0.1"
             :units="['px', 'rem']"
-            :reset-default="{ 'px': 64, 'rem': 3.5 }"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
           >
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
@@ -73,7 +73,7 @@
             path="panelHeaderSize"
             step="0.1"
             :units="['px', 'rem']"
-            :reset-default="{ 'px': 64, 'rem': 3.2 }"
+            :reset-default="{ 'px': 52, 'rem': 3.2 }"
             timed-apply-mode
           >
             {{ $t('settings.panel_header_size') }}
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -98,11 +98,11 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
-  emojiReactionsScale: 1.0,
+  emojiReactionsScale: 0.5,
   textSize: '14px',
-  emojiSize: '2.2em',
-  navbarSize: '3.5em',
-  panelHeaderSize: '3.2em',
+  emojiSize: '2.2rem',
+  navbarSize: '3.5rem',
+  panelHeaderSize: '3.2rem',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
diff --git a/src/panel.scss b/src/panel.scss
@@ -60,11 +60,12 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.15);
+  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.2);
   --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
   --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  font-size: calc(var(--panelHeaderSize) / 3.2);
   backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;