Fix NerdFont icon alignments. (#143)

* WIP

* Fix nerdfont icon alignments

* Ship needed fonts

* Remove italicised fonts

* Update readme and separate OSD settings into their own category.

* Dashboard styling updates

---------

Co-authored-by: matavach <erik@matijevich.org>

widget/settings/pages/config/osd/index.ts

@@ -0,0 +1,21 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const OSDSettings = () => {
+    return Widget.Box({
+        class_name: "bar-theme-page paged-container",
+        vertical: true,
+        children: [
+            Header('On Screen Display'),
+            Option({ opt: options.theme.osd.enable, title: 'Enabled', type: 'boolean' }),
+            Option({ opt: options.theme.osd.orientation, title: 'Orientation', type: 'enum', enums: ["horizontal", "vertical"] }),
+            Option({ opt: options.theme.osd.location, title: 'Position', subtitle: 'Position of the OSD on the screen', type: 'enum', enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"] }),
+            Option({ opt: options.theme.osd.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the OSD', type: 'number' }),
+            Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }),
+            Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }),
+            Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }),
+        ]
+    })
+}