docs: several error corrections & improved comprehension (#260)

* docs: fix readme punctuation

* docs: fix syncthing punctuation

* docs: fix periods in README and contribution guides

* docs: use new callout syntax

* docs(mastodon): update usage section

* refactor(mastodon): sort urls by popularity

README.md

@@ -42,7 +42,7 @@ giving it a unique and appealing aesthetic in line with Catppuccin's color palet
 
 To install these userstyles:
 
-1. Install [Stylus](https://github.com/openstyles/stylus)
+1. Install [Stylus](https://github.com/openstyles/stylus).
    - [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)
      extension.
 2. Enable CSP Patching from `Stylus Settings` > `Advanced`.
@@ -55,10 +55,10 @@ To install these userstyles:
 
 ## 👐 Contributing
 
-> **Note** <br>
-> If you would like to submit a userstyle or learn how to port Catppuccin to a website, please refer to the [userstyle-creation.md](docs/userstyle-creation.md).
+> [!NOTE]
+> If you would like to submit a userstyle or learn how to port Catppuccin to a website, please refer to [userstyle-creation.md](docs/userstyle-creation.md).
 
-See [CONTRIBUTING.md](docs/CONTRIBUTING.md)
+See [CONTRIBUTING.md](docs/CONTRIBUTING.md).
 
 &nbsp;
 

docs/CONTRIBUTING.md

@@ -12,7 +12,7 @@ request.
 
 It is important to note that there are **two types of PRs** for this repository:
 
-1. **New Userstyles:** Please see [userstyle-creation.md](userstyle-creation.md)
+1. **New Userstyles:** Please see [userstyle-creation.md](userstyle-creation.md).
 2. **Other improvements:** These should follow the recommendations below, to help
    improve the chances of a merged PR.
 

docs/userstyle-creation.md

@@ -3,7 +3,7 @@
 </p>
 
 <p align="center">
-	Guidelines for requesting and creating userstyles
+	Guidelines for requesting and creating userstyles.
 </p>
 
 &nbsp;

src/userstyles.yml

@@ -105,7 +105,7 @@ userstyles:
     readme:
       app-link: ["https://anilist.co", "https://anichart.net"]
       usage: |+
-        > **Note** <br>
+        > [!NOTE]
         > This theme applies to [AniChart](https://anichart.net/) as well, which is an extension of AniList.
       current-maintainers: [*anubisnekhet]
   boringproxy:
@@ -121,7 +121,7 @@ userstyles:
     color: peach
     readme:
       app-link: "https://search.brave.com"
-      usage: "Set theme to dark or light in Brave Search settings, the automatic setting will not work"
+      usage: "Make sure to set the theme to either dark or light in Brave Search settings, as the automatic setting will not work."
       current-maintainers: [*ndsboy]
   bstats:
     name: bStats
@@ -169,7 +169,7 @@ userstyles:
       app-link: "https://codeberg.org"
       faq:
         - question: "How do I change the accent color?"
-          answer: "Changing `--color-primary` to any other color should change the accent color in most places"
+          answer: "Changing `--color-primary` to any other color should change the accent color in most places."
       current-maintainers: [*justtobbi]
   crowdin:
     name: Crowdin
@@ -275,13 +275,17 @@ userstyles:
     readme:
       app-link: "https://github.com/mastodon/mastodon"
       usage: |+
-        Add urls to `@-moz-document domain("url")` with url being the chosen server
+        This userstyle is applied by default on a few common Mastodon server URLs, listed at the top:
+        ```css
+        @-moz-document domain("mastodon.social"), domain("mstdn.social"), domain("fosstodon.org"), domain("piaille.fr"), domain("tech.lgbt") {
+        ```
+        If you don't see your Mastodon server URL, feel free to add it to the list with the `domain("<URL>")` syntax.
       faq:
         - question: "**The theme does not look the same as the preview?**"
-          answer: "Your Mastodon instance may be using its own custom CSS, which is changing the look of the theme"
-        - question: "**Theme is not working?**"
+          answer: "Your Mastodon instance may be using its own custom CSS, which is changing the look of the theme."
+        - question: "**The theme is not working?**"
           answer: |
-            One solution might be changing the theme from the `preferences > application > theme` to light or dark.
+            One solution might be changing the theme to either light or dark via **Preferences** > **Appearance** > **Site theme**.
       current-maintainers: [*isabelroses]
       past-maintainers: [*andreasgrafen]
   modrinth:
@@ -313,7 +317,7 @@ userstyles:
     readme:
       app-link: "https://paste.rs"
       current-maintainers: [*stonks3141]
-  planet-minecraft: 
+  planet-minecraft:
     name: Planet Minecraft
     category: game
     readme:
@@ -326,7 +330,9 @@ userstyles:
     color: lavender
     readme:
       app-link: "https://proton.me/"
-      usage: "Open Proton Mail and click the settings in the top right, then set the base theme to `Snow` if you are using the Latte flavor, otherwise set it to `Carbon`"
+      usage: |+
+        > [!NOTE]
+        > Set Proton Mail's built-in theme to 'Snow' if you're using Latte or 'Carbon' if you're using the others.
       current-maintainers: [*soya-daizu]
   quizlet:
     name: Quizlet
@@ -372,8 +378,8 @@ userstyles:
     readme:
       app-link: "https://syncthing.net"
       usage: |+
-        > **Note** <br>
-        > This theme is designed to be used with the default WebGUI and default theme provided by Syncthing. This doesn't theme syncthing.net
+        > [!NOTE]
+        > This theme is designed to be used with the default WebGUI and default theme provided by Syncthing. This does not theme syncthing.net.
       current-maintainers: [*BlankParticle]
   tutanota:
     name: Tutanota
@@ -382,7 +388,7 @@ userstyles:
     readme:
       app-link: "https://tutanota.com/"
       usage: |+
-        > **Note** <br>
+        > [!NOTE]
         > Set Tutanota's built-in theme to either **light** if you're using Latte or **dark** if you're using the others.
       current-maintainers: [*ryanccn]
   twitch:
@@ -393,7 +399,7 @@ userstyles:
     readme:
       app-link: "https://twitch.tv"
       usage: |+
-        > **Note** <br>
+        > [!NOTE]
         > Set Twitch's built-in theme to either **light** if you're using Latte or **dark** if you're using the others.
       current-maintainers: [*gitmuslim, *isabelroses]
   vercel:
@@ -423,7 +429,7 @@ userstyles:
       app-link: "https://youtube.com"
       faq:
         - question: "**What does the 'Enable for black bars' option mean?**"
-          answer: "It is there in-case you have an OLED display. If you have one, you might want to enable this."
+          answer: "It's available in case you have an OLED display. If you have one, you might want to enable this."
       current-maintainers: [*isabelroses]
       past-maintainers: [*elkrien]
 # yaml-language-server: $schema=https://raw.githubusercontent.com/catppuccin/userstyles/main/src/userstyles.schema.json

styles/mastodon/catppuccin.user.css

@@ -13,11 +13,11 @@
 @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
 @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
 ==/UserStyle== */
-@-moz-document domain("mstdn.social"),
+@-moz-document domain("mastodon.social"),
+domain("mstdn.social"),
 domain("fosstodon.org"),
-domain("tech.lgbt"),
-domain("mastodon.social"),
-domain("piaille.fr") {
+domain("piaille.fr"),
+domain("tech.lgbt") {
   .theme-mastodon-light,
   .skin-mastodon-light {
     #mastodon(@lightFlavor, @accentColor);