From: Adam Dullage <redacted>
Date: Thu, 20 Apr 2023 12:46:33 +0000 (+0100)
Subject: Use rem for font-size.
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=9797e7fad2c4e2c8d66ee1edc2f2b5824f81dd6b;p=flatnotes.git

Use rem for font-size.
---

diff --git a/flatnotes/src/components/LoadingIndicator.vue b/flatnotes/src/components/LoadingIndicator.vue
index 6e2d043..4d94613 100644
--- 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 f534819..4def6ad 100644
--- 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 05399f7..789d298 100644
--- 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 e0f5554..b8122c8 100644
--- 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>