Tweak layout, add Leto and Domine fonts, tweak copy

client/components/indieHeader.vue

@@ -163,7 +163,7 @@ export default {
 }
 
 .profile-name {
-  font-size: 3rem;
+  font-size: 4rem;
 
   /* Numbered font weights won’t work in all browsers, will default to bold weight. */
   font-weight: 400;
@@ -176,8 +176,9 @@ export default {
 }
 
 .profile-bio {
-  font-size: 1.2rem;
-  margin: 0.25rem auto 0.75rem;
+  font-size: 1.5rem;
+  margin: 0 auto 0.25rem;
+  line-height: 1.5;
 
   /* Same max-width as on main in default.vue. */
   max-width: 45rem;
@@ -229,11 +230,11 @@ nav.tabs {
   parent li and turn off pointer events to disable the link for disabled tabs.
 */
 .tabs li.disabled {
-  cursor:not-allowed;
+  cursor: not-allowed;
 }
 
 .tabs li.disabled > a {
   color: lightgray;
-  pointer-events:none;
+  pointer-events: none;
 }
 </style>

client/components/textComposer.vue

@@ -31,7 +31,7 @@ export default {
       editorContent: this.content || '<p><br></p>',
       editorHasContentToSubmit: false,
       editorOption: {
-        placeholder: 'What’s on your mind?',
+        placeholder: 'What would you like to share publicly?',
         theme: 'snow',
         modules: {
           markdownShortcuts: {},
@@ -107,9 +107,17 @@ export default {
   padding-top: 0;
 }
 
+.ql-editor p {
+  line-height: 2.25rem; /* 36px @ 16px root em */
+  margin: 1.5rem 0;
+}
+
 .ql-container {
   /* Overwrite so that it doesn’t use px for font size. */
-  font-size: 1rem;
+  font-family: 'Domine', sans-serif;
+  font-size: 1.25rem; /* 20px @ 16px root em */
+  hyphens: auto;
+  -webkit-hyphens: auto;
 }
 
 /*

client/layouts/default.vue

@@ -52,8 +52,8 @@ html {
 }
 
 body {
-  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
-  line-height: 1.2;
+  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  line-height: 1.5rem;
 
   /* Remove browsers’ default padding on body. */
   margin: 0;
@@ -62,7 +62,7 @@ body {
 main {
   margin-right: auto;
   margin-left: auto;
-  max-width: 45em;
+  max-width: 45rem;
 
   /* Pad for space on either side of content on narrower viewports. */
   padding: 0 1rem 1rem;
@@ -94,6 +94,11 @@ h1, h2, h3, h4, h5, h6,
   margin: 1rem 0 0.75rem;
 }
 
+.ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6,
+.ql-snow .ql-editor h1, .ql-snow .ql-editor h2, .ql-snow .ql-editor h3, .ql-snow .ql-editor h4, .ql-snow .ql-editor h5, .ql-snow .ql-editor h6 {
+  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+}
+
 h1, .ql-editor h1, .ql-snow .ql-editor h1 {
   font-size: 2.5rem;
   margin: 2.5rem 0 1.5rem;
@@ -127,7 +132,7 @@ h6, .ql-editor h6, .ql-snow .ql-editor h6 {
 p, ul, ol, blockquote, figure,
 .ql-editor p, .ql-editor ul, .ql-editor ol, .ql-editor blockquote, .ql-editor figure,
 .ql-snow .ql-editor p, .ql-snow .ql-editor ul, .ql-snow .ql-editor ol, .ql-snow .ql-editor blockquote, .ql-snow .ql-editor figure {
-  margin: 1rem 0 0.75rem;
+  margin: 1rem 0 1.5rem;
 }
 
 ul, ol,
@@ -165,6 +170,7 @@ li,
 
 /* Placeholder message inside editor. */
 .ql-editor.ql-blank::before {
+  font-family: 'LatoItalic', 'Helvetica Neue Italic', 'Helvetica Italic', 'Arial Italic', sans-serif;
   margin-top: 1rem;
 }
 
@@ -172,6 +178,6 @@ li,
 
 .tabs a {
   /* Override Bulma’s use of ems for padding. */
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 2rem;
 }
 </style>