LittleLink Extended

- Updated Facebook Logo
- Updated Messenger Logo
- Updated Messenger Button Color

.devcontainer/devcontainer.json

@@ -1,28 +0,0 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/alpine
-{
-	"name": "Alpine",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/base:alpine",
-
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
-
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
-
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "uname -a",
-
-	"customizations": {
-		// Configure properties specific to VS Code.
-		"vscode": {
-			"extensions": [
-				"ritwickdey.liveserver"
-			]
-		}
-	}
-
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
-}

.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.). -->

README.md

@@ -65,19 +65,21 @@ Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/com
 ### 💖 Supporters
 You can support LittleLink by [buying me a coffee](https://www.buymeacoffee.com/seth). You can also have your name or your company added to this section and the supporters page of the [LittleLink.io](https://littlelink.io) website.
 
-#### 🏢 Business Supporters
+#### 🏢 Business Supporters ($75 tier)
 • **[links.dev](https://github.com/fatih-yavuz/links.dev)**
 
 [![Add Your Company Name](https://cdn.cottle.cloud/littlelink/button-buy-me-a-coffee-company.svg)](https://www.buymeacoffee.com/seth/e/50574)
 
-#### ✨ Individual Supporters
+#### ✨ Individual Supporters ($25 tier)
 • **[Drew Davis](https://connect.davisdre.me)**
 
 • **[Robotter112](https://robotter112.de/)**
 
 [![Buy Me A Coffee](https://cdn.cottle.cloud/littlelink/button-buy-me-a-coffee-individual.svg)](https://www.buymeacoffee.com/seth/e/50573)
 
-#### 🐙 GitHub Sponsors
+#### 🐙 Active GitHub Sponsors
+• **[@nghialele](https://github.com/nghialele)**
+
 • **[Your Name Here](https://github.com/sponsors/sethcottle)**
 
 [![GitHub Sponsors](https://cdn.cottle.cloud/littlelink/button-github-sponsors.svg)](https://github.com/sponsors/sethcottle)
@@ -97,6 +99,14 @@ You can support LittleLink by [buying me a coffee](https://www.buymeacoffee.com/
 
 ---
 
+### 🆕 Stay Connected
+
+Join the [Seth's Nook Discord](https://discord.gg/PrAEQFF2fK) server to get updates on LittleLink and more. Use the invite code `PrAEQFF2fK` or click the button below.
+
+[![Discord](https://cdn.cottle.cloud/littlelink/button-discord.svg)](https://discord.gg/PrAEQFF2fK)
+
+---
+
 ### 📊 Analytics
 
 To help build a more privacy focused product, we recommend using [Fathom Analytics](https://usefathom.com/ref/EQVZMV)*. [View our Fathom analytics dashboard](https://app.usefathom.com/share/xbmnwxxl/littlelink.io#/?filters=%5B%5D&range=last_7_days&site=2251799827005303)**.

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

@@ -185,13 +185,13 @@
 /* Facebook */
 .button-faceb {
 	--button-text:#ffffff;
-	--button-background:#1877f2;
+	--button-background:#0866FF;
 }
 
 /* Facebook Messenger */
 .button-messenger {
 	--button-text:#ffffff;
-	background-image:linear-gradient(25deg,#0099ff,#5f5dff,#a033ff,#c740cc,#ff5280,#ff7061);
+	--button-background:#0866FF;
 }
 
 /* Figma */
@@ -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/facebook.svg

@@ -1 +1,10 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h24v24h-24z"/></clipPath><g clip-path="url(#a)"><path d="m23.625 12c0-6.42188-5.2031-11.625-11.625-11.625-6.42188 0-11.625 5.20312-11.625 11.625 0 5.8022 4.25109 10.6116 9.8086 11.4844v-8.1239h-2.95313v-3.3605h2.95313v-2.56125c0-2.91328 1.7344-4.5225 4.3908-4.5225 1.2722 0 2.6025.22688 2.6025.22688v2.85937h-1.4663c-1.4437 0-1.8942.89625-1.8942 1.81547v2.18203h3.2241l-.5157 3.3605h-2.7084v8.1239c5.5575-.8728 9.8086-5.6822 9.8086-11.4844z" fill="#fff"/></g></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_34)">
+<path d="M24 12C24 5.37264 18.6274 0 12 0C5.37264 0 0 5.37264 0 12C0 17.6275 3.87456 22.3498 9.10128 23.6467V15.6672H6.62688V12H9.10128V10.4198C9.10128 6.33552 10.9498 4.4424 14.9597 4.4424C15.72 4.4424 17.0318 4.59168 17.5685 4.74048V8.06448C17.2853 8.03472 16.7933 8.01984 16.1822 8.01984C14.2147 8.01984 13.4544 8.76528 13.4544 10.703V12H17.3741L16.7006 15.6672H13.4544V23.9122C19.3963 23.1946 24.0005 18.1354 24.0005 12H24Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4_34">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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>

images/icons/messenger.svg

@@ -1 +1,10 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h24v24h-24z"/></clipPath><g clip-path="url(#a)"><path clip-rule="evenodd" d="m0 11.64c0-6.68831 5.24005-11.64 12-11.64 6.76 0 12 4.95169 12 11.64 0 6.6884-5.24 11.64-12 11.64-1.2142 0-2.3791-.1603-3.47362-.4612-.21276-.0586-.43901-.042-.64093.047l-2.38183 1.0514c-.62304.2751-1.32634-.168-1.34722-.8488l-.06535-2.1346c-.00804-.263-.12636-.5088-.32237-.6842-2.33492-2.0881-3.76868-5.1111-3.76868-8.6096zm8.31906-2.1884-3.525 5.5925c-.33828.5367.32143 1.1415.8268.758l3.78644-2.8737c.25613-.1944.6101-.1954.8673-.0025l2.8037 2.1028c.8412.631 2.042.4094 2.6027-.4802l3.525-5.59255c.3382-.53671-.3214-1.14151-.8268-.75799l-3.7865 2.87364c-.2561.1944-.61.1954-.8673.0025l-2.8036-2.10274c-.8413-.63096-2.04202-.40944-2.60274.48024z" fill="#fff" fill-rule="evenodd"/></g></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_39)">
+<path d="M11.9991 0.0478516C5.26616 0.0478516 0.046875 4.9798 0.046875 11.6415C0.046875 15.1263 1.47492 18.1368 3.80034 20.2169C3.99588 20.3914 4.11349 20.6367 4.12162 20.8982L4.18664 23.0247C4.20719 23.7027 4.90807 24.1439 5.52815 23.87L7.90042 22.8225C8.1017 22.7341 8.32688 22.7173 8.53867 22.7761C9.62919 23.0759 10.789 23.2356 11.9986 23.2356C18.7315 23.2356 23.9508 18.3036 23.9508 11.642C23.9508 4.98028 18.732 0.0478516 11.9991 0.0478516ZM19.4056 8.54777L15.2443 14.979C15.033 15.3055 14.5975 15.3988 14.2709 15.1875L10.4161 12.6933C10.267 12.5967 10.0738 12.5996 9.92751 12.7004L5.58265 15.6971C4.94871 16.1341 4.17373 15.382 4.59205 14.7357L8.75381 8.30442C8.96512 7.97789 9.40066 7.88466 9.72672 8.09598L13.5825 10.5906C13.7317 10.6872 13.9248 10.6843 14.0711 10.5835L18.415 7.58729C19.0489 7.14984 19.8239 7.90235 19.4056 8.54873V8.54777Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4_39">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

index.html

@@ -33,6 +33,11 @@
     <link rel="stylesheet" href="css/reset.css">
     <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>
 
@@ -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 -->