dev: Added contributor guidelines and updated the PR template

.github/PULL_REQUEST_TEMPLATE.yml

@@ -0,0 +1,47 @@
+name: Pull Request
+description: Submit a contribution to ElegantFin
+title: "[PR] <Short title for your changes>"
+labels: []
+assignees: []
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please follow our [Contributor Guidelines](../CONTRIBUTING.md) and keep your PR focused on a single improvement or fix.
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Describe your changes and the reason behind them.
+      placeholder: What did you change and why?
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: Add before/after images of any visual changes.
+      placeholder: Drag and drop or paste images here.
+    validations:
+      required: false
+  - type: textarea
+    id: testing
+    attributes:
+      label: Cross-platform Testing
+      description: Describe how you verified this works across devices (e.g., desktop, mobile, TV).
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      options:
+        - label: I followed the style conventions (`em` units, minimal media queries).
+          required: true
+        - label: I avoided unnecessary use of `!important`.
+          required: true
+        - label: I commented my code where applicable.
+          required: true
+        - label: I tested my changes across viewports.
+          required: true

.github/pull_request_template.md

@@ -1,28 +0,0 @@
-# Description
-
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
-
-Fixes # (issue)
-
-## Type of change
-
-- [ ] Bug fix
-- [ ] New feature 
-
-# How Has This Been Tested?
-
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
-
-**Test Configuration**:
-* Jellyfin server version:
-* Jellyfin client:
-* Client browser name and version:
-* Device:
-
-# Checklist:
-
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code in hard-to-understand areas
-- [ ] I have included relevant comparison screenshots where nececssary
-- [ ] I have tested my changes on the TV layout and Default layout of Jellyfin
-- [ ] I have also tested my changes on multiple devices and screen sizes

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing to ElegantFin
+
+Thank you for your interest in contributing to **ElegantFin**, a custom theme for the Jellyfin Web UI. To keep the project clean, maintainable, and compatible across devices, please follow these guidelines when contributing.
+
+---
+
+## 🧩 Pull Request Guidelines
+
+- **Keep PRs focused.** Each pull request should address a single feature, bugfix, or improvement. Avoid bundling unrelated changes.
+
+- **Write clear PR descriptions.** Explain what you changed and why. This helps reviewers and future contributors understand the purpose and reasoning behind the change.
+
+- **Provide screenshots.** Include before/after screenshots for any visual changes, along with a short description of what each image shows.
+
+- **Comment your code.** If you’re adding new CSS rules or modifying complex ones, include inline comments where needed to describe intent.
+
+- **Don't forget responsiveness.** ElegantFin runs on phones, tablets, TVs, and desktops. Ensure your changes are tested across viewports and don't break layouts or interactions on other platforms.
+
+- **Use consistent units.** Follow the theme’s existing use of relative units such as `em` instead of absolute units like `px`.
+
+- **Avoid `!important`.** Only use it when it is absolutely necessary and no alternative exists.
+
+- **Minimize media queries.** Only add new media queries if there is no simpler or existing solution that achieves the same result.
+
+---
+
+## 💬 Propose First for Major Changes
+
+If you are planning to:
+- change the overall layout or structure of key components,
+- modify the core color scheme,
+- or introduce new UI behavioral patterns,
+
+Please open a GitHub issue first to discuss the proposal with maintainers before submitting a PR. This helps avoid duplicate work and ensures alignment with the project's goals.
+
+---
+
+## 📁 File Structure and Naming
+
+- Follow the existing CSS naming conventions and structure.
+- When adding new sections, group related styles logically and use comments to identify the purpose of the block.
+
+---
+
+## 🤝 Communication
+
+- Be respectful, constructive, and collaborative.
+- Be open to feedback and willing to revise your work if needed.
+
+---
+
+We appreciate your help in making ElegantFin better for everyone. Thanks for contributing! 🙌

README.md

@@ -106,7 +106,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 <details>
   <summary><i>4. Enable extra buttons when hovering over cards on desktop</i></summary>
 
-- To enable watched and favorite buttons at the bottom right corner of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+- To enable 'Mark Played' and 'Add to Favorites' buttons at the bottom right corner of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
   ```
   :root{
     --extraCardButtonsVisibility: block;
@@ -178,5 +178,9 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 
 <hr>
 
+### 📌 Contributing
+
+Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests.
+
 
 ## 🙏 FEEDBACK APPRECIATED