add custom iosevka font

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) <year> <copyright holders>
+Copyright (c) 2022 hippoz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -2,6 +2,10 @@
 
 Waffle is a simple, focused chat application and protocol meant to be self-hosted.
 
+# License
+
+This software is licensed under the MIT license. The fonts included in this source tree (`frontend/public/assets/woff2`) and the Iosevka build plans (`frontend/webfonts/iosevka/private-build-plans.toml`) are licensed under the SIL Open Font License 1.1. Please visit https://github.com/be5invis/Iosevka/blob/master/LICENSE.md for more information.
+
 # Hosting
 
 ## Docker

frontend/public/global.css

@@ -1,25 +1,18 @@
 @font-face {
-	font-family: 'Iosevka Aile Web';
+	font-family: "Iosevka Waffle Web";
 	font-display: swap;
 	font-weight: 400;
 	font-stretch: normal;
 	font-style: normal;
-	src: url('assets/woff2/iosevka-aile-regular.woff2') format('woff2');
+	src: url('assets/woff2/iosevka-waffle-regular.woff2') format('woff2');
 }
 
-@font-face {
-	font-family: 'Iosevka Aile Web';
-	font-display: swap;
-	font-weight: 700;
-	font-stretch: normal;
-	font-style: normal;
-	src: url('assets/woff2/iosevka-aile-bold.woff2') format('woff2');
-}
 
 :root {
+	--background-color-0: hsl(180, 11%, 6%);
 	--background-color-1: hsl(180, 11%, 7%);
-	--background-color-2: hsl(180, 11%, 12%);
-	--background-color-3: hsl(180, 11%, 17%);
+	--background-color-2: hsl(180, 11%, 11%);
+	--background-color-3: hsl(180, 11%, 15%);
 	--foreground-color-1: rgb(253, 254, 255);
 	--foreground-color-2: rgb(218, 219, 220);
 	--foreground-color-3: rgb(153, 154, 155);
@@ -63,15 +56,15 @@
 }
 
 html, body {
-	width: var(--100vw);
-	height: var(--100vh);
+	width: 100%;
+	height: 100%;
 }
 
 body {
 	color: var(--foreground-color-1);
 	background-color: var(--background-color-1);
 	font-size: 100%;
-	font-family: "Iosevka Aile Web", sans-serif;
+	font-family: "Iosevka Waffle Web", sans-serif;
 	font-weight: 400;
 	line-height: 1.75;
 
@@ -101,7 +94,6 @@ body {
 	padding-right: var(--space-sm);
 	padding-top: var(--space-xs);
 	padding-bottom: var(--space-xs);
-	border-bottom: 1px solid var(--background-color-2);
 	flex-grow: 0;
 	flex-shrink: 0;
 }

frontend/src/components/MessageInput.svelte

@@ -6,10 +6,13 @@
 
     export let channel;
     let messageInput = "";
+    let messageTextarea;
 
     $: messages = messagesStoreProvider.getStore(channel.id);
 
     const sendMessage = async () => {
+        messageTextarea.focus();
+
         if (messageInput.trim() === "" || !$userInfoStore)
             return;
 
@@ -93,6 +96,7 @@
         rows="1"
         on:keydown={ onKeydown }
         bind:value={ messageInput }
+        bind:this={ messageTextarea }
     />
     {#if $smallViewport}
         <button class="icon-button send-button" on:click="{ sendMessage }">

frontend/src/components/Sidebar.svelte

@@ -73,8 +73,7 @@
     .sidebar-container {
         display: flex;
         flex-direction: column;
-        background-color: var(--background-color-1);
-        border-right: 1px solid var(--background-color-2);
+        background-color: var(--background-color-0);
         height: 100%;
         min-width: 255px;
         max-width: 255px;
@@ -102,7 +101,7 @@
         align-items: center;
         justify-content: left;
         border: none;
-        background-color: var(--background-color-1);
+        background-color: var(--background-color-0);
         padding: var(--space-xs);
         margin-bottom: var(--space-xxs);
         color: currentColor;

frontend/webfonts/iosevka/private-build-plans.toml

@@ -0,0 +1,117 @@
+# Iosevka Waffle build plan
+# SIL Open Font License 1.1
+# derived from iosevka-aile, which is licensed under SIL Open Font License 1.1
+
+[buildPlans.iosevka-waffle]
+family = "Iosevka Waffle"
+spacing = "quasi-proportional"
+serifs = "sans"
+snapshotFamily = 'Iosevka Aile'
+snapshotFeature = {"NWID" = 0}
+no-cv-ss = true
+no-ligation = true
+
+[buildPlans.iosevka-waffle.weights.regular]
+shape = 400
+menu = 400
+css = 400
+
+[buildPlans.iosevka-waffle.weights.medium]
+shape = 500
+menu = 500
+css = 500
+
+[buildPlans.iosevka-waffle.weights.semibold]
+shape = 600
+menu = 600
+css = 600
+
+[buildPlans.iosevka-waffle.weights.bold]
+shape = 700
+menu = 700
+css = 700
+
+[buildPlans.iosevka-waffle.weights.extrabold]
+shape = 800
+menu = 800
+css = 800
+
+[buildPlans.iosevka-waffle.slopes.upright]
+angle = 0
+shape = "upright"
+menu = "upright"
+css = "normal"
+
+[buildPlans.iosevka-waffle.slopes.italic]
+angle = 9.4
+shape = "italic"
+menu = "italic"
+css = "italic"
+
+[buildPlans.iosevka-waffle.variants.design]
+capital-i = "serifless"
+capital-j = "serifless"
+capital-k = "straight-serifless"
+capital-m = "flat-bottom"
+capital-w = "straight-flat-top"
+a = "double-storey-serifless"
+d = "toothed-serifless"
+e = "flat-crossbar"
+f = "flat-hook"
+g = "single-storey-serifless"
+i = "serifless"
+j = "flat-hook-serifless"
+k = "straight-serifless"
+l = "serifless"
+r = "compact"
+t = "flat-hook"
+u = "toothed"
+w = "straight-flat-top"
+y = "straight"
+long-s = "flat-hook"
+eszet = "longs-s-lig"
+lower-iota = "flat-tailed"
+lower-lambda = "straight-turn"
+cyrl-ef = "serifless"
+cyrl-capital-ka = "symmetric-connected-serifless"
+cyrl-ka = "symmetric-connected-serifless"
+cyrl-capital-u = "straight"
+at = "fourfold"
+percent = "rings-continuous-slash"
+
+# Letterform control for U+1D670 ... U+1D6A3
+[buildPlans.iosevka-waffle.derivingVariants.mathtt.design]
+capital-i = "serifed"
+capital-j = "serifless"
+capital-k = "straight-serifless"
+capital-m = "flat-bottom"
+capital-w = "straight-flat-top"
+a = "double-storey-serifless"
+d = "toothed-serifless"
+e = "flat-crossbar"
+f = "flat-hook"
+g = "single-storey-serifless"
+i = "serifed"
+j = "flat-hook-serifed"
+k = "straight-serifless"
+l = "serifed"
+r = "compact"
+t = "flat-hook"
+u = "toothed"
+w = "straight-flat-top"
+y = "straight"
+long-s = "flat-hook"
+eszet = "longs-s-lig"
+lower-iota = "flat-tailed"
+lower-lambda = "straight-turn"
+cyrl-ef = "serifless"
+cyrl-capital-ka = "symmetric-connected-serifless"
+cyrl-ka = "symmetric-connected-serifless"
+cyrl-capital-u = "straight"
+at = "fourfold"
+percent = "rings-continuous-slash"
+
+[buildPlans.iosevka-waffle.widths.normal]
+shape = 600
+menu  = 5
+css   = "normal"