Merge remote-tracking branch 'origin/prop/fonts'

7 files changed, 117 insertions, 4 deletions

diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index dcc447a..ef823c6 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -28,6 +28,8 @@
 
 .app-bar > a {
   line-height: var(--app-bar-height);
+  font-family: "Archistico";
+  letter-spacing: 0.25rem;
 }
 
 .app-bar a {
diff --git a/ui/styles/fonts.css b/ui/styles/fonts.css
new file mode 100644
index 0000000..66612e2
--- /dev/null
+++ b/ui/styles/fonts.css
@@ -0,0 +1,95 @@
+/*** Roboto ***/
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../fonts/Roboto-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../fonts/Roboto-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../fonts/Roboto-Italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Roboto";
+  src:
+    url("../fonts/Roboto-BoldItalic.ttf") format("truetype");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+/*** Archistico ***/
+@font-face {
+  font-family: "Archistico";
+  src:
+    url("../fonts/Archistico_Simple.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Archistico";
+  src:
+    url("../fonts/Archistico_Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+/*** FiraCode ***/
+@font-face {
+  font-family: "FiraCode";
+  src:
+    url("../fonts/FiraCode-Regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "FiraCode";
+  src:
+    url("../fonts/FiraCode-Bold.otf") format("opentype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "FiraCode";
+  src:
+    url("../fonts/FiraCode-Italic.otf") format("opentype");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "FiraCode";
+  src:
+    url("../fonts/FiraCode-BoldItalic.otf") format("opentype");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+/*** Overlock ***/
+@font-face {
+  font-family: "Overlock";
+  src:
+    url("../fonts/Overlock-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index 1d6421b..5279f86 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -5,6 +5,7 @@ label {
 }
 
 label input {
+  font-family: "Overlock";
   display: block;
   width: 90%;
   padding: 0.25rem;
@@ -13,7 +14,9 @@ label input {
 }
 
 form.form > button {
+  font-family: "Overlock";
   background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
   padding: 0.25rem;
   border-radius: 0.25rem;
   border: 1px solid var(--colour-input-border);
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index aec9bb8..f32ec3e 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -116,6 +116,7 @@
   padding: 0.25rem;
 }
 
-.message-body code {
-  font-family: monospace;
+.message-body code,
+.message-body pre {
+  font-family: "FiraCode";
 }
diff --git a/ui/styles/reset.css b/ui/styles/reset.css
index a3f7681..f9fa505 100644
--- a/ui/styles/reset.css
+++ b/ui/styles/reset.css
@@ -88,7 +88,9 @@ video {
   padding: 0;
   border: 0;
   font-size: 100%;
-  font: inherit;
+  /* The following seems to make `em` not italic, `code` not monospace, etc.
+   * And that's undesirable. */
+  /* font: inherit; */
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index 595826a..edf8ced 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -18,6 +18,7 @@
   flex-grow: 1;
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
+  font-family: "FiraCode";
 }
 
 .create-message button {
@@ -33,3 +34,12 @@ main {
   justify-content: flex-start;
   align-items: stretch;
 }
+
+/* Workaround for iOS zooming in on the textarea when it gets focus. */
+@media screen and (-webkit-min-device-pixel-ratio:0) { 
+  select,
+  textarea,
+  input {
+    font-size: 16px;
+  }
+}
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 80817f3..c43832c 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -68,5 +68,5 @@
   /* Message handle */
   --colour-message-handle-bg: color-mix(in srgb, var(--colour-base) 90%, black);
   --colour-message-handle-border: color-mix(in srgb, var(--colour-message-handle-bg) 50%, black);
-  --colour-message-handle-text: var(--dark-text);
+  --colour-message-handle-text: var(--light-text);
 }