LittleLink Extended

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,42 @@
+## 📄 Description
+<!-- Provide a short description of the brand you're adding or the changes you're making. Include context about why this is a valuable addition. -->
+
+---
+
+## ✅ Contribution Checklist
+Please confirm that you've met the following criteria before submitting your contribution:
+
+- [ ] **Widespread Recognition:** The brand has widespread recognition and is suitable for the core LittleLink repository (most additions belong in [LittleLink Extended](https://github.com/sethcottle/littlelink-extended)).  
+- [ ] **Brand Styling Guidelines:** You’ve followed the brand's official styling guidelines (if available).  
+- [ ] **Consistent Styling:** If no guidelines exist, the button style is consistent with the brand's public image (e.g., website, social media).  
+- [ ] **Icon Clarity:** The brand's logo/icon is clear and recognizable in a 24x24px format.  
+   - [ ] If the primary logo doesn’t scale well, you’ve adapted it using the brand’s social media avatar or favicon while maintaining the essence of the original logo.  
+   - [ ] The icon is provided in `.svg` format.  
+- [ ] **Theme Testing:** You've tested the button against both light and dark themes:  
+   - [ ] Manually swapped `theme-auto.css` with `theme-light.css` and `theme-dark.css` in `index.html` to check contrast or used [LittleLink Button Builder](https://builder.littlelink.io) contrast checker.
+   - [ ] Added a `#000000`/`#FFFFFF` stroke if necessary to improve contrast and accessibility. [LittleLink Button Builder](https://builder.littlelink.io) will automatically recommend when to add a stroke.  
+- [ ] **Accessibility Compliance:** The button's background and text colors meet visual accessibility standards (unless it contradicts brand guidelines).  
+- [ ] **Alphabetical Order:** Your contribution is alphabetically organized in `brands.css` and `index.html`.  
+- [ ] **Button Preview:** You've added a button preview in `index.html`.  
+- [ ] **Variant Naming Schema:** If adding a variant button (e.g., inverted color scheme):  
+   - [ ] Naming follows the existing pattern (`[Brand Name] Alt` and `.button-brandname-alt`).  
+   - [ ] Any additional icons are named according to `brandname-alt.svg` schema.  
+- [ ] **Proper Capitalization:**  
+   - [ ] In `brands.css`, the brand name comment follows `/* Brand Name */` format.  
+   - [ ] Code uses lowercase for `.button.button-brandname`.  
+   - [ ] In `index.html`, comments reflect `<!-- Brand Name -->` format.  
+   - [ ] Button text and `alt` attributes match the brand’s official capitalization.  
+- [ ] **PR Details:**  
+   - [ ] Included a brief description of the brand addition.
+   - [ ] Included a screenshot of the new button(s).  
+   - [ ] Provided relevant information on the brand’s global/regional reach or usage stats.  
+
+---
+
+## 📸 Screenshot  
+<!-- Attach a screenshot of the new button(s) to ensure consistency and clarity. -->
+
+---
+
+## 🚀 Additional Notes  
+<!-- Add any other information that might help the reviewer understand the changes better (e.g., source of logo, special handling, etc.). -->

VERSION.md

@@ -1,6 +1,18 @@
 # LittleLink Version History
 
-## Current Version: v3.2.0
+## Current Version: v3.5.0
+
+### v3.5.0 - 3/10/2025
+- Added LittleLink Extended information in `index.html`
+- Added `PULL_REQUEST_TEMPLATE.md` to `.github` which is a reflection of [submitting a new brand](https://github.com/sethcottle/littlelink/wiki/Submitting-a-new-brand-to-LittleLink) wiki.
+
+### v3.4.0 - 3/04/2025
+- Added Matrix
+  
+### v3.3.0 - 03/01/2025
+- Updated Facebook Logo
+- Updated Messenger Logo
+- Updated Messenger Button Color
 
 ### v3.2.0 - 2/14/2025
 - Added Apple Invites

css/brands.css

@@ -345,6 +345,13 @@
 	--button-border:1px solid #FFFFFF;
 }
 
+/* Matrix */
+.button-matrix {
+	--button-text:#000000;
+	--button-background:#ffffff;
+	--button-border:1px solid #000000;
+}
+
 /* Medium */
 .button-medium {
 	--button-text:#ffffff;

images/icons/matrix.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 520 520" style="enable-background:new 0 0 520 520;" xml:space="preserve">
+<path d="M13.7,11.9v496.2h35.7V520H0V0h49.4v11.9H13.7z"/>
+<path d="M166.3,169.2v25.1h0.7c6.7-9.6,14.8-17,24.2-22.2c9.4-5.3,20.3-7.9,32.5-7.9c11.7,0,22.4,2.3,32.1,6.8  c9.7,4.5,17,12.6,22.1,24c5.5-8.1,13-15.3,22.4-21.5c9.4-6.2,20.6-9.3,33.5-9.3c9.8,0,18.9,1.2,27.3,3.6c8.4,2.4,15.5,6.2,21.5,11.5  c6,5.3,10.6,12.1,14,20.6c3.3,8.5,5,18.7,5,30.7v124.1h-50.9V249.6c0-6.2-0.2-12.1-0.7-17.6c-0.5-5.5-1.8-10.3-3.9-14.3  c-2.2-4.1-5.3-7.3-9.5-9.7c-4.2-2.4-9.9-3.6-17-3.6c-7.2,0-13,1.4-17.4,4.1c-4.4,2.8-7.9,6.3-10.4,10.8c-2.5,4.4-4.2,9.4-5,15.1  c-0.8,5.6-1.3,11.3-1.3,17v103.3h-50.9v-104c0-5.5-0.1-10.9-0.4-16.3c-0.2-5.4-1.3-10.3-3.1-14.9c-1.8-4.5-4.8-8.2-9-10.9  c-4.2-2.7-10.3-4.1-18.5-4.1c-2.4,0-5.6,0.5-9.5,1.6c-3.9,1.1-7.8,3.1-11.5,6.1c-3.7,3-6.9,7.3-9.5,12.9c-2.6,5.6-3.9,13-3.9,22.1  v107.6h-50.9V169.2H166.3z"/>
+<path d="M506.3,508.1V11.9h-35.7V0H520v520h-49.4v-11.9H506.3z"/>
+</svg>

index.html

@@ -34,6 +34,11 @@
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/brands.css">
   
+    <!-- LittleLink Extended Stylesheet (Optional) -->
+    <!-- <link rel="stylesheet" href="css/brands-extended.css"> -->
+    <!-- Learn more at https://github.com/sethcottle/littlelink-extended. 
+         Remove comments if you've added LittleLink Extended dependencies -->
+
   </head>
 
 <body>
@@ -63,7 +68,7 @@
             <div class="button-stack" role="navigation">
 
               <!-- Default LittleLink -->
-              <a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/littlelink.svg" alt="Little Link Logo">LittleLink</a>
+              <a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/littlelink.svg" alt="LittleLink Logo">LittleLink</a>
 
               <!-- Amazon -->
               <a class="button button-amazon" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/amazon.svg" alt="Amazon Wishlist Logo">Amazon Wishlist</a>
@@ -206,6 +211,9 @@
               <!-- Mastodon -->
               <a class="button button-mastodon" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
 
+              <!-- Matrix -->
+              <a class="button button-matrix" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/matrix.svg" alt="Matrix Logo">Matrix</a>
+
               <!-- Medium -->
               <a class="button button-medium" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/medium.svg" alt="Medium Logo">Medium</a>
 
@@ -377,6 +385,9 @@
               <!-- Generic Website -->
               <a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-website.svg" alt="Website Icon">Visit Website</a>
 
+              <!-- LittleLink Extended -->
+              <a class="button button-default" href="https://github.com/sethcottle/littlelink-extended" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/littlelink.svg" alt="LittleLink Logo">LittleLink Extended</a>
+
       </div>
         
       <!-- Feel free to add your own footer information, including updating `privacy.html` to reflect how your LittleLink fork is set up -->