feat(#228): font size variables

deckgo · Nov 1, 2019 · 6c50cc1 · 6c50cc1
1 parent 3e955b3
commit 6c50cc1
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 9 deletions.
diff --git a/remote/src/app/components/app-notes/app-notes.scss b/remote/src/app/components/app-notes/app-notes.scss
@@ -1,14 +1,14 @@
 app-notes {
   p {
-    font-size: 1.4rem;
+    font-size: var(--font-size-small);
     line-height: 1.5rem;
     margin: 0;
     white-space: pre-line;
 
     color: var(--ion-text-color);
 
     &.notes-title {
-      font-size: 1.8rem;
+      font-size: var(--font-size-normal);
     }
   }
 

diff --git a/remote/src/app/components/app-notes/app-notes.tsx b/remote/src/app/components/app-notes/app-notes.tsx
@@ -65,7 +65,7 @@ export class AppNotes {
 
     private renderNotes() {
         return [
-            <p slot="sheet-header" class="ion-margin-start ion-margin-end">Notes</p>,
+            <p slot="sheet-header" class="ion-margin-start ion-margin-end ion-text-uppercase">Notes</p>,
             this.renderNote()
         ]
     }

diff --git a/remote/src/app/pages/app-remote/app-remote.scss b/remote/src/app/pages/app-remote/app-remote.scss
@@ -45,7 +45,7 @@ app-remote {
 
           ion-label {
             text-transform: inherit;
-            font-size: 1.8rem;
+            font-size: var(--font-size-normal);
             font-weight: 300;
             white-space: pre-wrap;
 

diff --git a/remote/src/global/app.scss b/remote/src/global/app.scss
@@ -31,6 +31,7 @@
 */
 
 @import 'theme/variables';
+@import 'theme/fonts';
 @import 'theme/content';
 @import 'theme/menu';
 @import 'theme/toolbar';

diff --git a/remote/src/global/theme/content.scss b/remote/src/global/theme/content.scss
@@ -10,12 +10,12 @@ h1, h2, h3 {
 }
 
 h1 {
-  font-size: 2rem;
+  font-size: var(--font-size-big);
 }
 
 p {
   font-weight: var(--deckgo-font-weight);
-  line-height: 1.4rem;
+  line-height: calc(var(--font-size-normal) + 0.2rem);
 }
 
 ion-content {
@@ -24,7 +24,7 @@ ion-content {
     --ion-safe-area-left: 0;
 
     ion-list-header {
-      font-size: 2rem;
+      font-size: var(--font-size-big);
       font-weight: 300;
       text-transform: uppercase;
     }

diff --git a/remote/src/global/theme/fonts.scss b/remote/src/global/theme/fonts.scss
@@ -0,0 +1,5 @@
+:root {
+  --font-size-small: 1.4rem;
+  --font-size-normal: 1.8rem;
+  --font-size-big: 2rem;
+}
diff --git a/remote/src/global/theme/menu.scss b/remote/src/global/theme/menu.scss
@@ -25,7 +25,7 @@ ion-menu {
         --border-color: transparent;
         --padding-start: 32px;
         --min-height: inherit;
-        font-size: 1.8rem;
+        font-size: var(--font-size-normal);
         height: inherit;
 
         &.item ion-label[class*="sc-ion-label"] {
@@ -50,7 +50,7 @@ ion-menu {
             text-transform: uppercase;
             padding: 0 4px;
             font-weight: 300;
-            font-size: 1.8rem;
+            font-size: var(--font-size-normal);
           }
 
           --deckgo-logo-url: url('/assets/img/deckdeckgo-logo-invert.svg');