From 43eefca62b649ed5c1ca7d9cb90c7e01f3225b2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Wed, 12 Jul 2023 22:57:09 +0200 Subject: [PATCH] New screenshots and instructions for purple variant --- README.md | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 3cfdb62..b2bcf73 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # Tangerine UI for Mastodon 🍊🐘 -*README still a WIP* - Tangerine UI is a redesign of Mastodon's Web interface, using just CSS. Make your Mastodon Web interface a friendlier place. Tangerine UI features a soft orange palette, a bubblier look, and a more compact timeline that should be easier on your eyes. Also, Tangerine UI supports both dark and light modes. @@ -9,14 +7,27 @@ Make your Mastodon Web interface a friendlier place. Tangerine UI features a sof ## Live demo at [nileane.fr](https://nileane.fr) * [See the announcement post](https://nileane.fr/@nileane/110691663040709608) on Mastodon -![Screenshot of my Mastodon profile featuring Tangerine UI](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/3ba6e271-3952-4e80-b974-c152b247b0aa) +## 2 variants + +### 🍊 Tangerine +Default variant for Tangerine UI, featuring a soft orange palette. + +![Safari - 2023-07-12 aĖ€ 22 49@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/77f49e2a-74c7-4d94-a427-c991289f2383) +![Code - 2023-07-12 aĖ€ 22 49@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/6891bfde-c5a2-43a6-8357-76c5f8b0f8d3) + +### đŸĒģ Purple +For those of you who like Tangerine UI but want to stick to Mastodon's purple palette. + +![Code - 2023-07-12 aĖ€ 22 48@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/f3ab51d2-c94d-4192-a1c8-6d15b0d9025a) +![Safari - 2023-07-12 aĖ€ 22 48@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/2322a5ea-6fce-4acc-9e53-92a9bae72e89) ## How to use **Tangerine UI is contained in a single CSS file.** -To use on your instance, simply copy & paste the contents of [TangerineUI-single-colum.css](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-single-column.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance). +* To use on your instance, simply copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance). + * đŸĒģ For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) instead. -If you're not an admin, you can still use Tangerine UI using a userstyle browser extension (ie. [Stylus](https://add0n.com/stylus.html)). +* If you're not an admin, you can still use Tangerine UI using a userstyle browser extension (ie. [Stylus](https://add0n.com/stylus.html)). ### Things to know * This is still pretty early, and this is a personal project, so things might not be styled properly in some places. [Feel free to message me](https://nileane.fr/@nileane) if you notice anything wonky though :) @@ -30,5 +41,5 @@ If you're not an admin, you can still use Tangerine UI using a userstyle browser ## Credits Huge thanks to [Roni Laukkarinen](https://mementomori.social/@rolle) whose work on [Mastodon Bird UI](https://github.com/ronilaukkarinen/mastodon-bird-ui) I adapted for multiple parts of the redesign. The icon replacement implementations I have also adapted from Bird UI. -## Tip me <3 -If you enjoy Tangerine UI, jobless me would really appreciate a [tip 💛](https://ko-fi.com/nileane)! \ No newline at end of file +## <3 +If you enjoy Tangerine UI, jobless me would really appreciate a [tip 💛](https://ko-fi.com/nileane)!