Typography
authorAdam Dullage <redacted>
Mon, 27 Nov 2023 12:47:49 +0000 (12:47 +0000)
committerAdam Dullage <redacted>
Mon, 27 Nov 2023 12:47:49 +0000 (12:47 +0000)
flatnotes/src/components/NoteViewerEditor.vue
flatnotes/src/global.scss
flatnotes/src/index.html
flatnotes/src/toastui-editor-overrides.scss

index 3346624a1aee01aaff6115d6419dbfaf6841b693..43410377b7e5484258c515e434b1aac9621c49a1 100644 (file)
 @import "../toastui-editor-overrides.scss";
 @import "../colours";
 
+.title,
+.title-input {
+  font-size: 2.25rem;
+  font-weight: bold;
+  line-height: 1.4;
+}
+
 .title {
   min-width: 300px;
   white-space: nowrap;
   background-color: transparent;
   color: var(--colour-text);
   padding: 0;
-  min-width:0;
+  min-width: 0;
 
   &:focus {
     outline: none;
   }
 }
-
-.note {
-  background-color: var(--colour-background);
-}
 </style>
 
 <script>
@@ -145,7 +148,7 @@ import { Note } from "../classes";
 import { Viewer } from "@toast-ui/vue-editor";
 import api from "../api";
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
-import { extendedAutolinks } from '../autolinkParsers';
+import { extendedAutolinks } from "../autolinkParsers";
 
 const reservedFilenameCharacters = /[<>:"/\\|?*]/;
 
index 35197523d190e8e0980f8c632d3c5aafff8a9987..2b326233f1c3124009bd47f280ebbfc5626866cb 100644 (file)
@@ -5,9 +5,6 @@
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 
-// Google Font
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100&display=swap");
-
 // Colours
 @import "./colours";
 
@@ -15,7 +12,7 @@
 body {
   background-color: var(--colour-background);
   color: var(--colour-text);
-  font-family: "Inter", sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
 a {
@@ -59,7 +56,9 @@ a {
 }
 
 .modal-content {
-  .modal-header, .modal-body, .modal-footer {
+  .modal-header,
+  .modal-body,
+  .modal-footer {
     border: 0;
   }
 }
index d6f3e11121c49a3bc8f8c4fc10bc9a13fd3526fa..7769828767676d2be224b03b94851ecf8e8770f4 100644 (file)
@@ -1,28 +1,49 @@
 <!DOCTYPE html>
 <html lang="en" class="h-100">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
 
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="assets/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="assets/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="assets/favicon-16x16.png"
+    />
+    <link rel="manifest" href="site.webmanifest" />
+    <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#F8A66B" />
+    <link rel="shortcut icon" href="assets/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#2b5797" />
+    <meta name="msapplication-config" content="assets/browserconfig.xml" />
+    <meta name="theme-color" content="#F8A66B" />
 
-  <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
-  <link rel="manifest" href="site.webmanifest">
-  <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#F8A66B">
-  <link rel="shortcut icon" href="assets/favicon.ico">
-  <meta name="msapplication-TileColor" content="#2b5797">
-  <meta name="msapplication-config" content="assets/browserconfig.xml">
-  <meta name="theme-color" content="#F8A66B">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap"
+      rel="stylesheet"
+    />
 
-  <title>flatnotes</title>
+    <title>flatnotes</title>
+  </head>
 
-</head>
-
-<body class="h-100 pt-3">
-  <div id="app"></div>
-  <script src="index.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body class="h-100 pt-3">
+    <div id="app"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
index 892897730bf124dcae7445e885d63bd1e02dc312..5cd86973c6611cddadfd755d6fc841ddbfc08afd 100644 (file)
@@ -1,21 +1,79 @@
 @import "../colours";
 
-.ProseMirror {
-  font-family: "Inter", sans-serif;
+// Disable checkboxes in view mode. See https://github.com/nhn/tui.editor/issues/1087.
+.note-viewer li.task-list-item {
+  pointer-events: none;
+  a {
+    pointer-events: auto;
+  }
 }
 
+// Typography
+.ProseMirror,
 .toastui-editor-contents {
-  font-family: "Inter", sans-serif;
+  font-family: "Open Sans", sans-serif;
+  font-size: 1rem;
+}
+
+.toastui-editor-contents,
+.ProseMirror {
   h1,
+  h1:first-of-type,
+  .toastui-editor-md-heading1,
   h2,
+  .toastui-editor-md-heading2,
   h3,
+  .toastui-editor-md-heading3,
   h4,
+  .toastui-editor-md-heading4,
   h5,
-  h6 {
+  .toastui-editor-md-heading5,
+  h6,
+  .toastui-editor-md-heading6 {
+    font-weight: bold;
+    line-height: 1.6rem;
+    margin: 1em 0 0.5em 0;
+    padding: 0;
     border-bottom: none;
   }
+
+  h1,
+  .toastui-editor-md-heading1 {
+    font-size: 2.25rem;
+  }
+
+  h2,
+  .toastui-editor-md-heading2 {
+    font-size: 2rem;
+  }
+
+  h3,
+  .toastui-editor-md-heading3 {
+    font-size: 1.75rem;
+  }
+
+  h4,
+  .toastui-editor-md-heading4 {
+    font-size: 1.5rem;
+  }
+
+  h5,
+  .toastui-editor-md-heading5 {
+    font-size: 1.25rem;
+  }
+
+  h6,
+  .toastui-editor-md-heading6 {
+    font-size: 1rem;
+  }
+
+  p {
+    line-height: 1.6rem;
+    margin: 0 0 1rem 0;
+  }
 }
 
+.ProseMirror,
 .toastui-editor-defaultUI .ProseMirror {
   padding: 1rem 0 0 0;
 }
   font-family: Consolas, "Lucida Console", Monaco, "Andale Mono", monospace;
 }
 
-// Disable checkboxes in view mode. See https://github.com/nhn/tui.editor/issues/1087.
-.note-viewer li.task-list-item {
-  pointer-events: none;
-  a {
-    pointer-events: auto;
-  }
-}
-
 // Colours
 .toastui-editor-defaultUI {
   border: none;
git clone https://git.99rst.org/PROJECT