feat: resize header font size based on font size options

foray1010 · Nov 8, 2020 · 084cc5a · 084cc5a
1 parent c537f71
commit 084cc5a
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/src/popup/components/BookmarkTree/tree-header.css b/src/popup/components/BookmarkTree/tree-header.css
@@ -1,7 +1,3 @@
-:root {
-  --tree-header-height: 30px;
-}
-
 .close {
   height: 100%;
   box-sizing: border-box;
@@ -15,19 +11,22 @@
 }
 
 .main {
+  --font-size: 1.75em;
+  --padding: var(--golden-gap-2x);
+
   display: flex;
-  height: var(--tree-header-height);
+  height: calc(var(--font-size) + var(--padding) * 2);
   justify-content: space-between;
   margin-bottom: var(--golden-gap);
   background-color: currentColor;
 }
 
 .title {
   composes: no-text-overflow from '../../../core/styles/composes.css';
-  padding: 0 var(--golden-gap-2x);
+  padding: var(--padding);
   margin: 0;
   color: var(--main-background-color);
   cursor: default;
-  font: 22px 'Archivo Narrow', simhei, sans-serif;
-  line-height: calc(var(--tree-header-height) + 1px);
+  font: var(--font-size) 'Archivo Narrow', simhei, sans-serif;
+  line-height: 1;
 }