docs(readme): update text and screenshots

README.md

@@ -1,36 +1,43 @@
-tt-rss-feedly-theme
-===================
+# Feedly theme for Tiny Tiny RSS
 
-Feedly theme for [Tiny Tiny RSS](https://tt-rss.org).
+This is a theme for the popular self-hosted RSS reader [Tiny Tiny RSS](https://tt-rss.org) that provides a Feedly-inspired interface. Enjoy a clean, minimalist design that makes it easy to quickly scan and read your feeds.
 
-If you are using an older version of TT-RSS, have a look at the branches.
+For the best experience, please use a current browser.
 
-For the best experience, use a current browser. IE9 and older versions are not supported.
+## Quick Start
 
-This theme is tested in recent versions of Chromium based browsers (Chrome, Edge, Brave, Vivaldi, Opera) on a regular basis and should work fine in Firefox as well.
+1. [Download the theme](levito/tt-rss-feedly-theme/archive/refs/heads/dist.zip) or clone the [*dist* branch](https://github.com/levito/tt-rss-feedly-theme/tree/dist)
+2. Unzip and copy the extracted files to `[tt-rss-root]/themes.local`
+   - `feedly*.css` and the `feedly` directory are needed to get all theme variants
+   - `local-overrides.js` is optional, it provides polyfills for Safari and prepares utility views for mobile-friendly styling
+   - `local-overrides.css` is optional, but depends on `local-overrides.js` to customize the utility views
+3. Go into your TT-RSS preferences and select the feedly theme.
+4. Install/activate recommended plugins
+   - `toggle_sidebar` for collapsing the feeds holder sidebar by clicking the left side of the screen
+   - `shorten_expanded` to truncate long articles in expanded mode
 
-## Installation
+## Features
 
-**Prerequisites:** Running instance of TT-RSS
-
-Install steps (If you did not find the description on the [TT-RSS Homepage](https://git.tt-rss.org/git/tt-rss/wiki/Themes)):
-
-1. Download the ZIP-File: `wget https://github.com/levito/tt-rss-feedly-theme/archive/master.zip`
-2. Unzip the ZIP-File: `unzip master.zip`
-3. Change into the newly created folder: `cd tt-rss-feedly-theme-master`
-4. Copy the relevant files into your TT-RSS folder: `cp -r feedly* [TT-RSS_Home]/themes.local`
-5. Go into your TT-RSS preferences and select the feedly-theme.
+- A clean, minimalist design that's easy on the eyes
+- Responsive design that works great on mobile devices
+- An additional cards view that's not available with the default theme
+- Different color variants with light and dark modes to match your personal preferences
+- High contrast variants for improved accessibility
+- Customizable fonts and spacing by setting CSS variables via the _Customize_ button
+- Preferences theming and visual fixes
+- Optional theming of the utility views (login, password recovery, share/subscribe bookmarklets, database update etc.)
+- Support vor various plugins
 
 ## Configuration
 
-There are different color schemes available. If you choose the `auto` variants, your OS/browser will decide whether to use the light or dark color scheme.
+There are different color variants available. If you choose the `auto` variants, your OS/browser will decide whether to use the light or dark color scheme.
 
-You can configure the fonts and the UI spacing by using the `Customize` button in the TT-RSS settings and adding and adjusting this chunk of CSS code:
+You can configure the fonts and the UI spacing by using the _Customize_ button in the TT-RSS settings and adding/adjusting this chunk of CSS code:
 
 ```css
 /* These are the default settings for feedly.css */
 :root {
-  --base-spacing: 45px;
+  --base-spacing: 45px; /* works best with a value between 30px and 75px */
   --font-size-post: 16px;
   --fonts-ui: "Helvetica Neue", Arial, Helvetica, "Liberation Sans",
     "Nimbus Sans L", FreeSans, sans-serif;
@@ -39,6 +46,9 @@ You can configure the fonts and the UI spacing by using the `Customize` button i
   --fonts-mono: "Fira Code", Menlo, Monaco, Consolas, "Lucida Console",
     "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
     "Courier New", monospace;
+  --reading-width: 45; /* use a unitless `em` value */
+  --card-max-column-count: 10;
+  --card-min-column-width: 300px;
 }
 ```
 
@@ -53,29 +63,75 @@ For a more compact spacing, try using the following custom CSS:
 
 ## Development
 
-Don't make direct changes to the CSS files on root level. They are generated from `src`.
-
-In order to generate the CSS files, you will need node.js and npm installed.
+In order to generate the CSS files, you will need to have node.js and npm installed.
 
 1. Run `npm install` to install dependencies
 2. Run `npm start` to watch `src` and compile on changes
+3. Run `npm run dist` to build, compress and copy all needed files to `dist`  
+   If you have a *dist* branch on your fork, the new content of the `dist` directory will also be pushed to it
+
+## FAQ
+
+### Where are the CSS files? They used to be at the root level
+CSS is now pushed to the [*dist* branch](https://github.com/levito/tt-rss-feedly-theme/tree/dist). So now you can clone/download only the files that you need and don't need to check which files have to be copied for installation. Also, the main branch commit history stays clean so it's easier to track changes.
+
+### I don't want to copy the files every time – how do I stay up-to-date easily?
+You can clone this repo and `git checkout dist` in it. Then change to your TT-RSS installation's `themes.local` directory and `ln -s [path/to]/tt-rss-feedly-theme/* .`. To update, just `git pull` in the theme's directory.
+
+### I followed the installation steps but I don't get all the new features
+Please make sure that you don't have an old copy of this theme in the `themes` directory of your TT-RSS installation. Third-party themes should go into the `themes.local` directory, but files in the `themes` directory will override any file with the same name in the `themes.local` directory.
+
+### The theme looks broken
+Please make sure to have the most recent version of TT-RSS installed (I test on [TT-RSS git master](https://dev.tt-rss.org/tt-rss/tt-rss)). Also, make sure to use a supported browser in the most recent version. If it's still broken, you might have found a bug. Feel free to open an issue or create a PR.
+
+### Which browsers are supported?
+This theme works best with Chromium-based browsers like Chrome, Brave, Edge, Vivaldi or Opera. Firefox and Safari are also supported but they're missing some minor features. On mobile devices, again, Chromium-based browsers on Android work best but Safari and other browsers on iOS should also work fine.
+
+### What about tablets?
+Tablets are also supported, both iPads and Android. The theme detects touch devices and will show all controls that would only be revealed on hover when using a desktop/laptop with a mouse/trackpad.
+
+### Is there a way to quickly switch between light and night mode?
+Yes, this theme is compatible with the [*toggle_night_mode* plugin by ltGuillaume](https://github.com/ltGuillaume/FeedMei/tree/main/plugins.local). If you selected either a regular or a *night* color variant, you can toggle back and forth by hitting `a N`. If you want your OS/browser to control this, select an *auto* color variant.
 
 ## Screenshots
 
-![grouped](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-grouped.png?190111)
+This is a selection to give you an impression of what to expect.
+
+![color variants](screenshots/color-variants.png)
+*Available color variants. Top: default night, default light, sepia night, sepia light  
+Bottom: high contrast, high contrast night, sepia contrast, sepia contrast night*
+
+---
+
+![login](screenshots/login.png)
+*Login in light mode, password recovery in dark mode on mobile*
+
+---
+
+![cdm expanded sepia](screenshots/cdm-expanded-sepia.png)
+*Combined view expanded with sepia color variant, mobile in night mode*
+
+---
+
+![cdm grouped](screenshots/cdm-grouped.png)
+*Combined view, expand selected atricle only, grouped by feed, mobile in night mode*
 
-![expandable](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-expandable.png?190111)
+---
 
-![expanded](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-expanded.png?190111)
+![split sepia](screenshots/split-sepia.png)
+*Split view, desktop in widescreen mode, mobile non-widescreen in night mode*
 
-![cards (expandable grid)](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-cards.png?210404)
+---
 
-![cards (expanded grid)](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-grid.png?210404)
+![cards high contrast](screenshots/cards-high-contrast.png)
+*Cards overview (enable grid, combined view, and expand selected article only) with high contrast variant*
 
-![traditional](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-traditional.png?190111)
+---
 
-![traditional, wide, hidden sidebar](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-traditional-widescreen.png?190111)
+![cards detail sepia contrast](screenshots/cards-detail-sepia-contrast.png)
+*Cards detail (opens as a layer similar to Feedly) with sepia contrast color variant*
 
-![preferences + layer](https://raw.github.com/levito/tt-rss-feedly-theme/master/screenshots/feedly-night.png?190111)
+---
 
-Licensed under the WTFPL
+![preferences mobile](screenshots/prefs-mobile.png)
+*Preferences on mobile: main, plugins, feeds, edit feed*