Use rem for font-size.

diff --git a/flatnotes/src/components/LoadingIndicator.vue b/flatnotes/src/components/LoadingIndicator.vue
index 6e2d043c5e9d03c33ddaa1b6fd91a5567d47aab3..4d946134f22859895b841bc41881633e816582e1 100644 (file)
--- a/flatnotes/src/components/LoadingIndicator.vue
+++ b/flatnotes/src/components/LoadingIndicator.vue
@@ -23,7 +23,7 @@ p {
 
 .failed-icon {
   color: var(--colour-brand);
-  font-size: 60px;
+  font-size: 4rem;
 }
 
 .failure-message {
@@ -45,7 +45,7 @@ p {
   text-indent: -9999em;
   margin: 33% auto;
   position: relative;
-  font-size: 11px;
+  font-size: 0.75rem;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);

diff --git a/flatnotes/src/components/NoteViewerEditor.vue b/flatnotes/src/components/NoteViewerEditor.vue
index f5348194f5fb7ea68c65d7e37090fe0343a3597f..4def6add8364b64d13c046bc97d3f113f9b47306 100644 (file)
--- a/flatnotes/src/components/NoteViewerEditor.vue
+++ b/flatnotes/src/components/NoteViewerEditor.vue
@@ -20,9 +20,9 @@
         class="d-flex justify-content-between flex-wrap align-items-end mb-3"
       >
         <!-- Title -->
-        <h2 v-if="editMode == false" class="title" :title="currentNote.title">
+        <h1 v-if="editMode == false" class="title" :title="currentNote.title">
           {{ currentNote.title }}
-        </h2>
+        </h1>
         <input
           v-else
           type="text"
@@ -138,14 +138,36 @@
 
 .toastui-editor-contents {
   font-family: "Inter", sans-serif;
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  font-size: 1rem;
+  h1 {
+    font-size: 2.25rem;
+    font-weight: 500;
+    border-bottom: none;
+  }
+  h2 {
+    font-size: 2rem;
+    font-weight: 500;
     border-bottom: none;
   }
+  h3 {
+    font-size: 1.75rem;
+    font-weight: 500;
+  }
+  h4 {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+  h5 {
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+  h6 {
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  p {
+    margin-bottom: 1.5rem;
+  }
   @include note-padding;
 }
 

diff --git a/flatnotes/src/components/RecentlyModified.vue b/flatnotes/src/components/RecentlyModified.vue
index 05399f79178569715a13048470cd8442619bbc9f..789d29822a96fa06535ad4a3bffacadf5d1f2b22 100644 (file)
--- a/flatnotes/src/components/RecentlyModified.vue
+++ b/flatnotes/src/components/RecentlyModified.vue
@@ -33,7 +33,7 @@
 @import "../colours";
 
 .mini-header {
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: bold;
   color: var(--colour-text-very-muted);
 }

diff --git a/flatnotes/src/components/SearchResults.vue b/flatnotes/src/components/SearchResults.vue
index e0f55547fd4f07d1db597ed17406a9b98d90f392..b8122c8b87fa5a6941445a94a017e4017cd014e9 100644 (file)
--- a/flatnotes/src/components/SearchResults.vue
+++ b/flatnotes/src/components/SearchResults.vue
@@ -97,7 +97,7 @@
 .group-name {
   padding-left: 8px;
   font-weight: bold;
-  font-size: 32px;
+  font-size: 2rem;
   color: var(--colour-text-very-muted);
   margin-bottom: 8px;
 }
@@ -112,7 +112,7 @@
 
 .last-modified {
   color: var(--colour-text-muted);
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 .result-contents {
@@ -130,10 +130,12 @@
 
 .tag {
   color: white;
-  font-size: 14px;
+  font-size: 0.75rem;
   background-color: var(--colour-brand);
   padding: 2px 6px;
   border-radius: 4px;
+  margin: 4px 0;
+  display: inline-block;
 }
 </style>