chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New screenshots and instructions for purple variant

Browse source
This commit is contained in:
Niléane 2023-07-12 22:57:09 +02:00 committed by GitHub
parent b52011775c
commit 43eefca62b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
README.md
View file

@ -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 à 22 49@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/77f49e2a-74c7-4d94-a427-c991289f2383)
![Code - 2023-07-12 à 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 à 22 48@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/f3ab51d2-c94d-4192-a1c8-6d15b0d9025a)
![Safari - 2023-07-12 à 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)!
## <3
If you enjoy Tangerine UI, jobless me would really appreciate a [tip 💛](https://ko-fi.com/nileane)!