Updates

Adds Babylist as a new brand, fixes SimpleX Chat Alt, and adds a new sensitive content warning module (new HTML, new CSS file, new JS folder and file, new icon).
2025-03-16 20:59:47 -04:00 · 2025-03-16 20:59:47 -04:00 · c99d8fd702
commit c99d8fd702
parent 98bf64ff42
8 changed files with 297 additions and 21 deletions
--- a/README.md
+++ b/README.md
@ -2,33 +2,143 @@

 ![Logo](https://cdn.cottle.cloud/GitHub/LittleLink/littlelink.gif)

-LittleLink Extended is an addon repository for [LittleLink](https://github.com/sethcottle/littlelink). This repository welcomes more niche services that aren't as globally or regionally popular as required by the core LittleLink repo. Users will be able to import the entirety of these extensions into their fork of LittleLink or selectively add services from it by copy and pasting what they'd like to use into their `brands.css` file and `icons` folders.
+**LittleLink Extended** is an add-on repository for [LittleLink](https://github.com/sethcottle/littlelink). It welcomes more niche or region-specific services that aren’t quite popular enough for the core LittleLink repo. By importing this extension, you can expand your LittleLink setup with additional brands and icons. You can either import everything or selectively copy only the pieces you need.

-### 📂 Getting Started
+---

-You will need to fork or download a copy of the original [LittleLink project](https://github.com/sethcottle/littlelink) to use these extended brands in tandem with.
+## 📂 Getting Started

-#### ⬇️ Import the Extended CSS
+To use **LittleLink Extended**, you’ll need a copy of the original [LittleLink project](https://github.com/sethcottle/littlelink). Fork or download that repository first.

-Copy and paste the `brands-extended.css` file that is in the `css` folder of this repository into the `css` folder that is in your copy of the [LittleLink project](https://github.com/sethcottle/littlelink). Your folder should look a little something like this after:
+Then:

-![Extended Brands CSS](https://cdn.cottle.cloud/littlelink/brands-extended-folder.png)
+1. **Clone or download** this **LittleLink Extended** repo.
+2. **Copy the necessary files** (CSS and icons) into your LittleLink project.
+3. **Reference the new CSS** in your `index.html`.

-#### ⬇️ Import the Extended Icons
+### 1. Import the Extended CSS

-Copy and paste the `icons-extended` folder that is in the `images` folder of this repository into the `images` folder in your copy of the [LittleLink project](https://github.com/sethcottle/littlelink). Your folder should look a little something like this after:
+In this repo’s `css` folder, you’ll find **`brands-extended.css`**. Copy that file into the `css` folder of your LittleLink project. Your folder structure should look something like this afterward:

-![Extended Brands Icons](https://cdn.cottle.cloud/littlelink/icons-extended-folder.png)
+```
+littlelink
+│
+├── css
+│   ├── reset.css
+│   ├── style.css
+│   ├── brands.css
+│   └── brands-extended.css ← (new)
+│
+└── images
+    └── icons
+```

-When access iconography, you'll reference the folder `images/icons-extended/...` to refence the icons included with LittleLink Extended.
+### 2. Import the Extended Icons

-#### ✏️ Edit `index.html` to include the Extended CSS
+In this repo’s `images` folder, you’ll find a folder named **`icons-extended`**. Copy that entire folder into the `images` folder of your LittleLink project. Your structure might then look like:

-Open `index.html` in your copy of the [LittleLink project](https://github.com/sethcottle/littlelink), the first section of the HTML has a `<head>` section. Find the CSS segment `<link rel="stylesheet" href="css/brands.css">` and underneath it, add `<link rel="stylesheet" href="css/brands-extended.css">`. It should look something like this:
+```
+littlelink
+│
+├── css
+│   ├── ...
+├── images
+│   ├── avatar.png
+│   ├── icons
+│   └── icons-extended ← (new)
+└── ...
+```

+When you need to reference an extended icon, you’ll do so via `images/icons-extended/...`.

-![CSS Preview](https://cdn.cottle.cloud/GitHub/LittleLink/css.png)
+### 3. Edit `index.html` to Include the Extended CSS

-### 👍 That's it!
+Open your LittleLink project’s `index.html`. In the `<head>` section, find the line that references `brands.css`:

-View the original [LittleLink repo](https://github.com/sethcottle/littlelink).
+```html
+<link rel="stylesheet" href="css/brands.css">
+```
+
+Beneath it, add a line for the extended CSS:
+
+```html
+<link rel="stylesheet" href="css/brands-extended.css">
+```
+
+It should look something like:
+
+```html
+<link rel="stylesheet" href="css/reset.css">
+<link rel="stylesheet" href="css/style.css">
+<link rel="stylesheet" href="css/brands.css">
+<link rel="stylesheet" href="css/brands-extended.css">
+```
+
+That’s all you need to pull in the extended brand styles.
+
+---
+
+## 👍 That’s It!
+
+At this point, you’ve successfully imported **LittleLink Extended**. To see how to use the newly added buttons, simply reference them in your `index.html` or `preview.html` by using their associated classes (e.g., `button-anilist`, `button-bereal`, etc.).
+
+For more information on the original LittleLink project, check out the [LittleLink repo](https://github.com/sethcottle/littlelink).
+
+---
+
+# Extended Modules
+
+## Sensitive Content Warning
+
+In addition to extended brands, this repository includes an **optional module** for adding **“Sensitive Content”** warnings. This module lets you display a slide-down panel warning users about potentially sensitive or age-restricted content. Each panel can include a **“Continue”** button that opens a custom link, set entirely in your HTML.
+
+<img 
+  src="https://cdn.cottle.cloud/GitHub/LittleLink/sensitive-content-warning.gif"
+  alt="Sensitive Content Warning"
+  width="50%"
+/>
+
+### How It Works
+
+1. **Copy the CSS**  
+   Download `sensitive-content.css` from this repo (in the `css` folder) and place it in your LittleLink project’s `css` folder. You can adjust the button color that is declared in `sensitive-content.css` or use a button color style from `brands.css` or `brands-extended.css` to adjust the button to any styling of your choice.
+
+2. **Copy the JS**  
+   Download `js` folder which contains `sensitive-content.js` from this repo and place it in your LittleLink project. By default LittleLink doesn't use any JS.
+
+3. **Reference Them**  
+   In your `index.html` (or `preview.html` in LittleLink Extended), add the CSS after your main styles:
+   ```html
+   <link rel="stylesheet" href="css/style.css">
+   <link rel="stylesheet" href="css/brands-extended.css">
+   <link rel="stylesheet" href="css/sensitive-content.css"> <!-- new -->
+   ```
+   Then load the JS near the bottom of `<body>`:
+   ```html
+   <script src="js/sensitive-content.js"></script>
+   ```
+
+4. **Add the HTML Snippet**  
+   Wherever you want a “Sensitive Content” button, insert:
+   ```html
+   <div class="slide-container" data-continue-url="https://example.com">
+     <a class="button button-default sensitive-trigger" href="javascript:void(0)">
+       <img class="icon" aria-hidden="true" src="images/icons/generic-warning.svg" alt="Warning Icon">
+       Sensitive Content
+     </a>
+     <div class="sensitive-panel">
+       <div class="sensitive-panel__content">
+         <p>This link may contain content that is not appropriate for all audiences.</p>
+         <button class="button button-default sensitive-continue">Continue</button>
+       </div>
+     </div>
+   </div>
+   ```
+   - **`data-continue-url="..."`** sets the external link for the “Continue” button.  
+   - **`.sensitive-trigger`** toggles the panel open/close.  
+   - **`.sensitive-panel`** is the collapsible container.  
+   - **`.sensitive-continue`** triggers navigation to the `data-continue-url`.
+
+### Multiple Sensitive Content Panels
+
+You can add **multiple** sensitive content panels by repeating the snippet above with different `data-continue-url` values. The JS automatically handles each one independently, so each panel can open a different link.
--- a/VERSION.md
+++ b/VERSION.md
@ -1,6 +1,14 @@
 # LittleLink Extended Version History

-## Current Version: v3.0.0
+## Current Version: v3.1.0
+
+### v3.1.0 - 03/16/2025
+- Added Babylist button
+- Fixed SimpleX Chat Alt
+- Added Sensitve Content Warning Modile
+  - Adds `JS` folder with `sensitive-content.js`
+  - Adds a new `css` file for `sensitve-content.css`
+  - Adds a new `generic-warning.svg`

 ### v3.0.0 - 11/13/2024
 LittleLink Extended has been updated to reflect all modernizations of the core LittleLink repo.
--- a/css/brands-extended.css
+++ b/css/brands-extended.css
@ -59,6 +59,13 @@
  --button-border:1px solid #FFFFFF;
 }

+/* Babylist */
+.button-babylist {
+	--button-text:#FFFFFF;
+	--button-background:#6E3264;
+	--button-border:1px solid #FFFFFF;
+}
+
 /* Bandsintown */
 .button-bandsintown {
  --button-text:#FFFFFF;
@ -356,8 +363,8 @@

 /* SimpleX Chat Alt */
 .button-simplex-alt {
-  --button-text:#FFFFFF;
-  --background-color: #000000;
+	--button-text:#FFFFFF;
+	--button-background:#000000;
  --button-border: 1px solid #FFFFFF;
 }

--- a/css/sensitive-content.css
+++ b/css/sensitive-content.css
@ -0,0 +1,63 @@
+/* Optional "Sensitive Content" Slide-Down Panel
+   ----------------------------------------------
+   By default, it's collapsed (max-height: 0) and 
+   pushes content down in normal flow when open.
+*/
+
+/* Sensitive Warning Button Styling */
+.button-sensitive {
+	--button-text:#ffffff;
+	--button-background:#D72638;
+	--button-border:1px solid #ffffff;
+}
+
+/* Container so everything is grouped nicely */
+.slide-container {
+    margin: 0; /* We let the .button margin handle spacing */
+  }
+  
+  /* The slide-down panel starts collapsed */
+  .sensitive-panel {
+    margin-top: -1rem;
+    margin-bottom: 1rem;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+    border: none;
+    border-radius: 0.5rem;
+  }
+  
+  /* When open, show border and expand */
+  .sensitive-panel.open {
+    max-height: 300px; 
+    border: 1px solid #ccc;
+    margin-bottom: 1rem;
+  }
+  
+  /* The panel's content area */
+  .sensitive-panel__content {
+    position: relative;
+    background-color: #fff;
+    color: #000;
+    padding: 1rem;
+    box-sizing: border-box;
+  }
+  
+  /* Basic spacing inside the panel */
+  .sensitive-panel__content p {
+    margin: 1rem 0;
+  }
+  
+  .sensitive-panel__content .button {
+    margin-top: 1rem;
+  }
+  
+  /* Dark theme support */
+  :root.theme-dark .sensitive-panel__content {
+    background-color: #121212;
+    color: #ffffff;
+  }
+  :root.theme-dark .sensitive-panel.open {
+    border-color: #444;
+  }
+  
--- a/images/icons-extended/babylist.svg
+++ b/images/icons-extended/babylist.svg
@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9972 5.99651C11.4208 4.63126 10.3654 3.52404 9.02967 2.88341C6.76572 1.83215 4.5518 1.97607 2.5255 3.43719C0.499192 4.89832 -0.235656 6.90384 0.0645369 9.34112C0.455414 12.4887 2.1909 14.8696 4.44235 16.9377C6.69872 18.9377 9.24617 20.5825 11.9972 21.8154C14.7493 20.5828 17.2978 18.938 19.5551 16.9377C21.8098 14.8696 23.5421 12.4887 23.933 9.34112C24.2457 6.90384 23.4702 4.87641 21.4721 3.43719C19.4739 1.99797 17.2318 1.83215 14.9678 2.88341C13.6317 3.52438 12.5753 4.63137 11.9972 5.99651Z" fill="url(#paint0_linear_75_481)"/>
+<path d="M6.24367 2.20129C6.24367 2.20129 1.39055 5.16733 3.0635 9.75407C4.73645 14.3408 11.1937 11.8597 11.1937 11.8597C11.1937 11.8597 17.6635 9.37861 19.3239 13.9654C19.6775 14.8917 19.7652 15.8984 19.5772 16.8719V16.8876C21.8037 14.832 23.511 12.4667 23.8988 9.3442C24.2115 6.90691 23.4359 4.87949 21.4378 3.44026C19.4396 2.00105 17.1976 1.83522 14.9336 2.88647C13.6109 3.53338 12.5677 4.63838 11.9974 5.99644C11.421 4.6312 10.3655 3.52398 9.02984 2.88335C8.15105 2.45788 7.1915 2.22533 6.21553 2.20129H6.24367Z" fill="#FF82AC"/>
+<defs>
+<linearGradient id="paint0_linear_75_481" x1="11.9847" y1="22.1377" x2="11.9847" y2="2.70507" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF4C47"/>
+<stop offset="1" stop-color="#FF81AB"/>
+</linearGradient>
+</defs>
+</svg>
--- a/images/icons-extended/generic-warning.svg
+++ b/images/icons-extended/generic-warning.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 21.8636L12 1.13635L24 21.8636H0ZM3.76364 19.6818H20.2364L12 5.49999L3.76364 19.6818ZM12 18.5909C12.3091 18.5909 12.5682 18.4864 12.7773 18.2773C12.9864 18.0682 13.0909 17.8091 13.0909 17.5C13.0909 17.1909 12.9864 16.9318 12.7773 16.7227C12.5682 16.5136 12.3091 16.4091 12 16.4091C11.6909 16.4091 11.4318 16.5136 11.2227 16.7227C11.0136 16.9318 10.9091 17.1909 10.9091 17.5C10.9091 17.8091 11.0136 18.0682 11.2227 18.2773C11.4318 18.4864 11.6909 18.5909 12 18.5909ZM10.9091 15.3182H13.0909V9.86362H10.9091V15.3182Z" fill="white"/>
+</svg>
--- a/js/sensitive-content.js
+++ b/js/sensitive-content.js
@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // 1) Check for slide-container
+    const containers = document.querySelectorAll('.slide-container');
+  
+    containers.forEach((container) => {
+      // 2) Find the key elements inside this container
+      const trigger     = container.querySelector('.sensitive-trigger');
+      const panel       = container.querySelector('.sensitive-panel');
+      const continueBtn = container.querySelector('.sensitive-continue');
+      
+      // 3) Read the URL from data-continue-url
+      const externalUrl = container.dataset.continueUrl;
+  
+      // Safety checks: if we don’t have a trigger or panel, skip
+      if (!trigger || !panel) return;
+  
+      // 4) Toggle panel on trigger click
+      trigger.addEventListener('click', function (evt) {
+        evt.preventDefault();
+        panel.classList.toggle('open'); // open if closed, close if open
+      });
+  
+      // 5) Close panel if user clicks outside
+      document.addEventListener('click', function (evt) {
+        if (
+          panel.classList.contains('open') &&
+          !panel.contains(evt.target) &&
+          evt.target !== trigger
+        ) {
+          panel.classList.remove('open');
+        }
+      });
+  
+      // 6) “Continue” button
+      if (continueBtn) {
+        continueBtn.addEventListener('click', function () {
+          // Close the panel
+          panel.classList.remove('open');
+  
+          // If there's a data-continue-url, open it in a new tab
+          if (externalUrl) {
+            window.open(externalUrl, '_blank');
+          }
+        });
+      }
+    });
+  });  
--- a/preview.html
+++ b/preview.html
@ -34,6 +34,9 @@
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/brands-extended.css">
    
+    <!-- Stylesheets / Sensitive Content Module -->
+    <link rel="stylesheet" href="css/sensitive-content.css">
+
  </head>

 <body>
@ -62,6 +65,8 @@
            <!-- All your buttons go here -->
            <div class="button-stack" role="navigation">

+              <h2>Extended Brands</h2>
+
              <!-- 500px -->
              <a class="button button-500px" href="#" target="_blank" rel="noopener" role="button"> <img class="icon" aria-hidden="true" aria-hidden="true" src="images/icons-extended/500px.svg" alt="500px Logo">500px</a>

@ -207,10 +212,10 @@
              <a class="button button-skoob" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/skoob.svg" alt="Skoob logo">Skoob</a>
              
              <!-- SimpleX chat -->
-              <a class="button button-simplex" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/simplex.svg" alt="SimpleX Logo">SimpleX chat</a>
+              <a class="button button-simplex" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/simplex.svg" alt="SimpleX Logo">SimpleX chat</a>

              <!-- SimpleX Chat Alt -->
-              <a class="button button-simplex-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/simplex-alt.svg" alt="SimpleX Logo">SimpleX Chat</a>
+              <a class="button button-simplex-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/simplex-alt.svg" alt="SimpleX Logo">SimpleX Chat</a>

              <!-- SpaceHey -->
              <a class="button button-spacehey" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/spacehey.svg" alt="SpaceHey Logo">SpaceHey</a>
@ -248,6 +253,27 @@
              <!-- Xing -->
              <a class="button button-xing" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/xing.svg" alt="Xing Logo">Xing</a>

+              <h2>Sensitive Content Warning Module</h2>
+
+              <!-- Sensitive Content Module -->
+              <div class="slide-container" data-continue-url="https://littlelink.io">
+                <!-- Trigger Button -->
+                <a class="button button-sensitive sensitive-trigger" href="javascript:void(0)">
+                  <img class="icon" aria-hidden="true" src="images/icons-extended/generic-warning.svg" alt="Warning Icon">
+                  Sensitive Content
+                </a>
+
+                <!-- The Slide-Down Panel -->
+                <div class="sensitive-panel">
+                  <div class="sensitive-panel__content">
+                    <p>This link may contain content that is not appropriate for all audiences.</p>
+                    <button class="button button-sensitive sensitive-continue">
+                      Continue
+                    </button>
+                  </div>
+                </div>
+              </div>
+
      </div>
        
      <!-- Feel free to add your own footer information, including updating `privacy.html` to reflect how your LittleLink fork is set up -->
@ -258,7 +284,9 @@
    </div>
  </div>

-</body>
+  <!-- JS -->
+  <script src="js/sensitive-content.js"></script>

+</body>
 </html>