add readme and preview pics

1 files changed, 93 insertions, 0 deletions

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7131373
--- /dev/null
+++ b/README.md
@@ -0,0 +1,93 @@
+# My Firefox userChrome.css
+This is my Firefox `userChrome.css`.
+This `userChrome` was originally based on tweaks from
+[xiaoxiaoflood/firefox-scripts](https://github.com/xiaoxiaoflood/firefox-scripts),
+but I was not satisfied with the way many of these looked and so I spent some
+time to get them looking like they belong.
+
+In addition to looking nice, this also attempts to make the browser more
+minimal and more functional by removing clutter and maximizing vertical space.
+
+## Features
+* Auto one-line top bar (combines tabs and navbar).
+  Automatically disabled when the window gets too small via a `media query`
+* Chromium style findbar in top right corner
+* Consistent placement of new tab button in the top right
+* Remove overflow button for tabs and navbar
+* Enhanced bookmarks bar readability (adj. margins and padding)
+* Widely compatible with Firefox themes
+* Compact mode targeted for maximum reading area
+
+## Preview
+![Wide UI preview](./pics/wide.png)
+*Wide UI*
+
+![Slim UI preview](./pics/slim.png)
+*Slim UI*
+
+## Setup
+To begin, it is highly suggested that you set `density` to `compact` in the
+"Customize Toolbar" menu in order to sace additional vertical space. Note that
+this `userChrome` is designed and tested only with `compact` mode, other modes
+are not supported.
+
+It is suggested to install this via [home-manager](https://home-manager.dev/).
+If you are not already using `home-manager`, then refer to
+[Legacy installation](#legacy-installation).
+
+### Home-manager (Nix) installation (suggested)
+First, refer to this example `flake.nix` that you might use for a
+`home-manager` setup:
+
+```nix
+{
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    home-manager = {
+      url = "github:nix-community/home-manager";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+    firefox-userchrome.url = "git://git.tjkeller.xyz/firefox-userchrome";
+  };
+
+  outputs = { nixpkgs, home-manager, firefox-userchrome, ... }: {
+    homeConfigurations.timmy = home-manager.lib.homeManagerConfiguration {
+      pkgs = nixpkgs.legacyPackages.x86_64-linux;
+      extraSpecialArgs = { inherit firefox-userchrome; };
+      modules = [ ./home.nix ];
+    };
+  };
+}
+```
+
+Then configure Firefox in `home-manager` (`./home.nix` in this case) as
+follows:
+
+```nix
+{ firefox-userchrome, ... }: {
+  programs.firefox = {
+    enable = true;
+    profiles.Personal = {
+      id = 0;
+      isDefault = true;
+      userChrome = firefox-userchrome.userChrome;
+      settings = {
+        "browser.compactmode.show" = true;
+        "browser.uidensity" = 1;  # Compact
+      };
+    };
+  };
+  # ...
+}
+```
+
+### Legacy installation
+To setup `compact` mode, you will need to set the following in `about:config`:
+* `browser.compactmode.show` = `true`
+* `browser.uidensity` = `1`
+  (or set this in the aformentioned "Customize Toolbar" menu)
+
+You can then enable the `userChrome` settings and install `userChrome.css` in
+your profile as described
+[here (userchrome.org)](https://www.userchrome.org/how-create-userchrome-css.html)
+and elsewhere.