Update VERSION.md

Add Docker Support to the Project

.github/workflows/contrast-check.yml

@@ -0,0 +1,242 @@
+name: "Contrast Check"
+on:
+  pull_request:
+    paths:
+      - 'css/brands.css'
+  workflow_dispatch:  # Manual trigger for testing
+
+jobs:
+  contrast-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          
+      - name: Setup for PR comparison
+        run: |
+          echo "Fetching base branch for comparison"
+          git fetch origin ${{ github.base_ref }}
+          
+      - name: Contrast Check (Review Me)
+        run: |
+          cat > contrast-check.sh << 'EOF'
+          #!/bin/bash
+          
+          # WCAG Minimum Contrast Ratio
+          MIN_CONTRAST=4.5
+          
+          FAILED=0
+          ALL_RESOLVED=1
+          NEEDS_MANUAL_REVIEW=0
+          
+          # Only get buttons that were modified in the PR
+          echo "Finding changed button styles..."
+          BUTTON_CLASSES=$(git diff origin/$GITHUB_BASE_REF -- css/brands.css | grep -E "^\+.*\.button-[a-zA-Z0-9]+" | sed -E 's/.*\.button-([a-zA-Z0-9]+).*/\1/' | sort -u)
+          
+          if [[ -z "$BUTTON_CLASSES" ]]; then
+            echo "✅ No button changes to check."
+            exit 0
+          fi
+          
+          echo "Found button classes to check: $BUTTON_CLASSES"
+          echo "🔍 Auditing CSS for contrast issues..."
+          
+          # Function to normalize hex colors to lowercase
+          normalize_color() {
+              local color="$1"
+              if [[ -n "$color" ]]; then
+                  echo "$color" | tr '[:upper:]' '[:lower:]'
+              else
+                  echo ""
+              fi
+          }
+          
+          # Function to calculate luminance
+          get_luminance() {
+              local color="$1"
+              
+              if [[ -z "$color" || "$color" == "#" ]]; then
+                  echo 0
+                  return
+              fi
+              
+              color="${color#'#'}"
+              
+              if [[ ${#color} -ne 6 ]]; then
+                  echo 0
+                  return
+              fi
+              
+              r=$(printf "%d" 0x${color:0:2} 2>/dev/null || echo 0)
+              g=$(printf "%d" 0x${color:2:2} 2>/dev/null || echo 0)
+              b=$(printf "%d" 0x${color:4:2} 2>/dev/null || echo 0)
+              
+              r=$(awk "BEGIN { print ($r/255 <= 0.03928) ? ($r/255)/12.92 : ((($r/255) + 0.055)/1.055) ^ 2.4 }")
+              g=$(awk "BEGIN { print ($g/255 <= 0.03928) ? ($g/255)/12.92 : ((($g/255) + 0.055)/1.055) ^ 2.4 }")
+              b=$(awk "BEGIN { print ($b/255 <= 0.03928) ? ($b/255)/12.92 : ((($b/255) + 0.055)/1.055) ^ 2.4 }")
+              
+              echo $(awk "BEGIN { print (0.2126 * $r) + (0.7152 * $g) + (0.0722 * $b) }")
+          }
+          
+          # Function to calculate contrast ratio
+          get_contrast_ratio() {
+              local lum1=$(get_luminance "$1")
+              local lum2=$(get_luminance "$2")
+          
+              if [[ -z "$lum1" || -z "$lum2" ]]; then
+                  echo 0
+                  return
+              fi
+          
+              if (( $(awk "BEGIN { print ($lum1 > $lum2) ? 1 : 0 }") )); then
+                  awk "BEGIN { printf \"%.5f\", ($lum1 + 0.05) / ($lum2 + 0.05) }"
+              else
+                  awk "BEGIN { printf \"%.5f\", ($lum2 + 0.05) / ($lum1 + 0.05) }"
+              fi
+          }
+          
+          # Function to extract hex color
+          extract_color() {
+              local input="$1"
+              local color=""
+              
+              if [[ "$input" =~ "#[0-9a-fA-F]{6}" ]]; then
+                  color=$(echo "$input" | grep -o "#[0-9a-fA-F]\{6\}")
+              elif [[ "$input" =~ "1px solid #" ]]; then
+                  color=$(echo "$input" | sed -E 's/.*1px solid (#[0-9a-fA-F]{6}).*/\1/')
+              elif [[ "$input" =~ "solid #" ]]; then
+                  color=$(echo "$input" | sed -E 's/.*solid (#[0-9a-fA-F]{6}).*/\1/')
+              elif [[ "$input" =~ "#" ]]; then
+                  color=$(echo "$input" | grep -o "#[0-9a-fA-F]*" | head -1)
+              fi
+              
+              # Return normalized (lowercase) hex color
+              normalize_color "$color"
+          }
+          
+          # Check contrast
+          check_contrast() {
+              local text_color="$1"
+              local background_color="$2"
+              local context="$3"
+              local border_color="$4"
+              local recommend_stroke="$5"
+              local is_background_check="$6"
+              local button_name="$7"
+              local check_failed=0
+              
+              # Normalize all colors to lowercase for comparison
+              text_color=$(normalize_color "$text_color")
+              background_color=$(normalize_color "$background_color")
+              border_color=$(normalize_color "$border_color")
+              recommend_stroke=$(normalize_color "$recommend_stroke")
+              
+              if [[ -z "$text_color" || -z "$background_color" ]]; then
+                  return 0
+              fi
+          
+              local contrast_ratio=$(get_contrast_ratio "$text_color" "$background_color")
+          
+              if [[ -z "$contrast_ratio" ]]; then
+                  contrast_ratio=0
+              fi
+          
+              contrast_ratio=$(printf "%.2f" "$contrast_ratio")
+          
+              # Case-insensitive comparison for hex colors
+              if (( $(awk "BEGIN { print ($contrast_ratio < $MIN_CONTRAST) ? 1 : 0 }") )); then
+                  if [[ -n "$border_color" && "$border_color" == "$recommend_stroke" && "$is_background_check" -eq 1 ]]; then
+                      echo "✅ [$context → $button_name] Contrast ratio $contrast_ratio fails WCAG but has a $recommend_stroke border → Treated as passing."
+                      echo "✅ [$context → $button_name] Issue resolved by stroke → Fully passing."
+                      check_failed=0
+                  else
+                      echo "❌ [$context → $button_name] Contrast ratio $contrast_ratio fails WCAG — Recommend adding a $recommend_stroke stroke."
+                      check_failed=1
+                  fi
+              else
+                  echo "✅ [$context → $button_name] Contrast ratio $contrast_ratio passes WCAG"
+                  check_failed=0
+              fi
+              
+              return $check_failed
+          }
+          
+          # For each button class, check its properties
+          for button_class in $BUTTON_CLASSES; do
+              echo "Checking button: $button_class"
+              
+              # Extract button section
+              # Avoid partial matches
+              button_start=$(grep -n "\.button-$button_class\( \|{\)" css/brands.css | cut -d: -f1)
+              if [[ -z "$button_start" ]]; then
+                  button_start=$(grep -n "\.button-$button_class$" css/brands.css | cut -d: -f1)
+              fi
+              
+              if [[ -z "$button_start" ]]; then
+                  echo "Could not find button-$button_class in css/brands.css"
+                  continue
+              fi
+              
+              # Look for the next closing bracket
+              button_end=$(tail -n +$button_start css/brands.css | grep -n "}" | head -1 | cut -d: -f1)
+              if [[ -z "$button_end" ]]; then
+                  button_end=10
+              fi
+              
+              button_section=$(tail -n +$button_start css/brands.css | head -n $button_end)
+              
+              # Check for gradient
+              if echo "$button_section" | grep -q "background-image"; then
+                  echo "🚩 [./css/brands.css → $button_class] Detected gradient background → Flagging for manual review."
+                  NEEDS_MANUAL_REVIEW=1
+                  continue
+              fi
+              
+              # Extract colors
+              text_color=$(echo "$button_section" | grep "button-text" | grep -o "#[0-9A-Fa-f]*")
+              bg_color=$(echo "$button_section" | grep "button-background" | grep -o "#[0-9A-Fa-f]*")
+              border_color=$(extract_color "$(echo "$button_section" | grep "button-border")")
+              
+              button_failed=0
+              
+              # Check text vs background
+              if [[ -n "$text_color" && -n "$bg_color" ]]; then
+                  check_contrast "$text_color" "$bg_color" "TEXT vs BUTTON" "$border_color" "" 0 "$button_class"
+                  button_failed=$((button_failed | $?))
+              fi
+              
+              # Check button vs light theme
+              if [[ -n "$bg_color" ]]; then
+                  check_contrast "#ffffff" "$bg_color" "BUTTON vs LIGHT THEME" "$border_color" "#000000" 1 "$button_class"
+                  button_failed=$((button_failed | $?))
+                  
+                  # Check button vs dark theme
+                  check_contrast "#121212" "$bg_color" "BUTTON vs DARK THEME" "$border_color" "#ffffff" 1 "$button_class"
+                  button_failed=$((button_failed | $?))
+              fi
+              
+              if [[ $button_failed -eq 1 ]]; then
+                  FAILED=1
+                  ALL_RESOLVED=0
+              fi
+          done
+          
+          # Final report
+          if [[ "$NEEDS_MANUAL_REVIEW" -eq 1 ]]; then
+              echo "⚠️ Manual review required for gradients!"
+              exit 1
+          elif [[ "$ALL_RESOLVED" -eq 1 ]]; then
+              echo "✅ All contrast checks passed!"
+              exit 0
+          else
+              echo "❌ Contrast issues found!"
+              exit 1
+          fi
+          EOF
+          
+          chmod +x contrast-check.sh
+          ./contrast-check.sh
+        env:
+          GITHUB_BASE_REF: ${{ github.base_ref }}

README.md

@@ -116,3 +116,19 @@ To help build a more privacy focused product, we recommend using [Fathom Analyti
 ###### ** Analytics in this dashboard start May 03, 2022. View this [Google Sheets file](https://docs.google.com/spreadsheets/d/1GL4SroAdH-OZphBVR5z-BoSukHIEVJfao25q_e9-Ii8/edit?usp=sharing) with the generic unique pageview data from Google Analytics.
 
 [![Fathom](https://cdn.cottle.cloud/littlelink/button-fathom-analytics.svg)](https://usefathom.com/ref/EQVZMV)
+
+---
+### 🐳 Docker Support
+LittleLink includes Docker support for easy deployment and development. All Docker-related files are located in the `docker/` directory.
+
+To run LittleLink using Docker:
+
+```bash
+docker compose -f docker/compose.yaml up
+```
+
+This will make the site available at http://localhost:8080
+
+For more information about Docker configuration, see [docker/README.md](docker/README.md).
+
+---

VERSION.md

@@ -1,6 +1,11 @@
 # LittleLink Version History
 
-## Current Version: v3.5.0
+## Current Version: v3.6.0
+
+### v3.6.0 - 3/25/2025
+- Finally adds Docker support to LittleLink. See [PR #151](https://github.com/sethcottle/littlelink/pull/151), thank you [@lllahaye](https://github.com/lllahaye).
+  - Docker support has been a long-standing community request. While I previously closed similar PRs in an effort to keep the LittleLink repo as minimal as possible, several community forks emerged that added Docker support independently. Over the last few weeks I had been reconsidering this stance—this PR arrived at just the right time.
+- Updated the brand color for Signal.
 
 ### v3.5.0 - 3/10/2025
 - Added LittleLink Extended information in `index.html`

css/brands.css

@@ -429,7 +429,14 @@
 /* Signal */
 .button-signal {
 	--button-text:#ffffff;
-	--button-background:#3a76f0;
+	--button-background:#3B45FD;
+}
+
+/* Signal Alt */
+.button-signal-alt {
+	--button-text:#3B45FD;
+	--button-background:#E3E8FE;
+	--button-border:1px solid #000000;
 }
 
 /* Slack */

docker/.dockerignore

@@ -0,0 +1,46 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/go/build-context-dockerignore/
+
+# Git
+.git
+.github
+.gitignore
+
+# Docker
+.dockerignore
+docker-compose*
+compose.yaml
+
+# Logs
+*.log
+
+# Editor directories and files
+.idea
+.vscode
+**/.DS_Store
+
+# Documentation files
+README*
+LICENSE*
+VERSION*
+CONTRIBUTING*
+
+# Exclude unnecessary files
+**/__pycache__
+**/.venv
+**/bin
+**/obj
+**/charts
+**/.env
+**/secrets.dev.yaml
+**/values.dev.yaml
+
+# Keep only essential files for the static website
+!index.html
+!privacy.html
+!css/
+!images/
+!fonts/

docker/Dockerfile

@@ -0,0 +1,35 @@
+FROM nginx:alpine
+
+# Copy static website files
+COPY . /usr/share/nginx/html/
+
+# Configure nginx with basic optimization and logging to stdout/stderr
+RUN echo 'server { \
+    listen 80; \
+    server_name localhost; \
+    root /usr/share/nginx/html; \
+    index index.html index.htm; \
+    \
+    # Enable access logging to stdout \
+    access_log /dev/stdout; \
+    error_log /dev/stderr; \
+    \
+    # Enable gzip compression \
+    gzip on; \
+    gzip_vary on; \
+    gzip_types text/plain text/css application/json application/javascript; \
+    \
+    # Basic cache settings \
+    location ~* \\.(?:css|js|jpg|jpeg|gif|png|ico|svg)$ { \
+        expires 7d; \
+        add_header Cache-Control "public"; \
+    } \
+}' > /etc/nginx/conf.d/default.conf
+
+# Forward nginx logs to Docker log collector
+RUN ln -sf /dev/stdout /var/log/nginx/access.log && \
+    ln -sf /dev/stderr /var/log/nginx/error.log
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

docker/README.md

@@ -0,0 +1,231 @@
+# Docker for LittleLink
+
+Docker configuration to run LittleLink in a container.
+
+## File Structure
+
+- `Dockerfile`: Defines how the image is built using nginx:alpine
+- `compose.yaml`: Configuration for Docker Compose with volumes for development
+- `.dockerignore`: Excludes unnecessary files from the image
+
+## Technical Details
+
+### Base Image
+- Uses `nginx:alpine` for minimal image size (~20MB)
+- Includes gzip compression for static files
+- Optimized cache configuration for CSS, JavaScript, and images
+- Configured to forward nginx logs to Docker log collector
+
+### Volumes and Ports
+- Mounts the project root directory as a volume for live development
+- Exposes port 80 in the container, mapped to 8080 on the host
+
+## Common Use Cases
+
+### Creating Personal Link Pages for Different People
+
+One of the main advantages of this Docker setup is how easily you can create multiple personalized instances of LittleLink:
+
+```bash
+# Clone the repository
+git clone https://github.com/sethcottle/littlelink.git littlelink-john
+
+# Customize the content for John
+cd littlelink-john
+# Edit index.html with John's links, customize images, etc.
+
+# Build a Docker image for John's page
+docker build -f docker/Dockerfile -t littlelink-john .
+
+# Run John's page on port 8080
+docker run -d --name john-links -p 8080:80 littlelink-john
+```
+
+For additional pages:
+
+```bash
+# Similarly for another person
+git clone https://github.com/sethcottle/littlelink.git littlelink-jane
+cd littlelink-jane
+# Customize for Jane...
+
+# Build and run on a different port
+docker build -f docker/Dockerfile -t littlelink-jane .
+docker run -d --name jane-links -p 8081:80 littlelink-jane
+```
+
+This approach allows you to:
+- Maintain separate customized sites for different people
+- Run multiple instances on different ports
+- Update each site independently
+- Easily deploy to various environments
+
+## Development vs. Production
+
+There are two main ways to use Docker with LittleLink:
+
+### Development Workflow
+
+In development, we use Docker Compose with mounted volumes to allow for live editing:
+
+```bash
+# Start development environment
+docker compose -f docker/compose.yaml up
+```
+
+This configuration:
+- Mounts local files as a volume, so changes are reflected immediately
+- Requires manual browser refresh to see changes
+- Is ideal for testing and development
+
+### Production Workflow
+
+For production, you have two options:
+
+#### Option 1: Production with Docker Compose
+
+Create a production-specific docker-compose file:
+
+```yaml
+# docker/compose.prod.yaml
+
+services:
+  web:
+    image: yourname/littlelink:latest
+    restart: always
+    ports:
+      - "8080:80"
+    # Optional volume for customizable content
+    volumes:
+      - /path/on/server/custom-content:/usr/share/nginx/html
+```
+
+Deploy using:
+
+```bash
+# Build and tag the image
+docker build -f docker/Dockerfile -t yourname/littlelink:latest .
+
+# Run in production with compose
+docker compose -f docker/compose.prod.yaml up -d
+```
+
+#### Option 2: Production with Docker Run
+
+```bash
+# Build a production image
+docker build -f docker/Dockerfile -t yourname/littlelink:latest .
+
+# Run in production (no volumes mounted)
+docker run -d --name littlelink -p 80:80 --restart always yourname/littlelink:latest
+```
+
+## Using Volumes in Production
+
+You can customize the content in production by mounting a local directory:
+
+```bash
+# Prepare a directory with your custom content
+mkdir -p /path/on/server/custom-content
+cp -r index.html css/ images/ /path/on/server/custom-content/
+
+# Run with the custom content mounted
+docker run -d --name littlelink -p 80:80 \
+  -v /path/on/server/custom-content:/usr/share/nginx/html \
+  yourname/littlelink:latest
+```
+
+With Docker Compose:
+
+```yaml
+services:
+  web:
+    image: yourname/littlelink:latest
+    ports:
+      - "80:80"
+    volumes:
+      - /path/on/server/custom-content:/usr/share/nginx/html
+```
+
+This approach:
+- Allows content customization without rebuilding the image
+- Makes it easy to update content independently of the container
+
+## Docker Commands Reference
+
+### Development Commands
+
+```bash
+# Start in development mode
+docker compose -f docker/compose.yaml up
+
+# Start in background
+docker compose -f docker/compose.yaml up -d
+
+# Stop container
+docker compose -f docker/compose.yaml down
+
+# View logs (including HTTP request logs)
+docker compose -f docker/compose.yaml logs -f
+```
+
+### Production Commands
+
+```bash
+# Build production image
+docker build -f docker/Dockerfile -t yourname/littlelink:latest .
+
+# Run production container
+docker run -d --name littlelink -p 80:80 yourname/littlelink:latest
+
+# View logs for the running container
+docker logs -f littlelink
+```
+
+## Customization
+
+### Change Port
+Edit `docker/compose.yaml` for development:
+```yaml
+ports:
+  - "8081:80"  # Change 8080 to desired port
+```
+
+Or specify port when running production container:
+```bash
+docker run -p 8081:80 yourname/littlelink:latest
+```
+
+### Additional nginx Configuration
+To modify the nginx configuration, you can edit the `Dockerfile` and add your own configuration:
+
+```dockerfile
+# Example: add custom configuration
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+```
+
+## Deploying to Production
+
+### Docker on VPS
+```bash
+# Pull image
+docker pull yourname/littlelink:latest
+
+# Run container
+docker run -d --name littlelink -p 80:80 yourname/littlelink:latest
+
+# With restart policy for auto-recovery
+docker run -d --name littlelink --restart unless-stopped -p 80:80 yourname/littlelink:latest
+```
+
+### Multiple Sites on One Server
+You can run multiple LittleLink instances on the same server:
+
+```bash
+# Run first site on port 8080
+docker run -d --name site1 -p 8080:80 littlelink-site1
+
+# Run second site on port 8081
+docker run -d --name site2 -p 8081:80 littlelink-site2
+```
+

docker/compose.yaml

@@ -0,0 +1,10 @@
+services:
+  web:
+    build:
+      context: ..
+      dockerfile: docker/Dockerfile
+    ports:
+      - "8080:80"
+    volumes:
+      - ..:/usr/share/nginx/html
+    restart: unless-stopped

images/icons/signal-alt.svg

@@ -0,0 +1,26 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25_65)">
+<path d="M12 0C12.6226 0 13.2341 0.0474105 13.8311 0.138818L13.6594 1.2508C13.1184 1.16797 12.5642 1.125 12 1.125C11.4358 1.125 10.8817 1.16796 10.3407 1.25079L10.169 0.138806C10.766 0.0474064 11.3775 0 12 0Z" fill="#3B45FD"/>
+<path d="M14.8477 0.339844L14.5808 1.43298C15.6772 1.69982 16.7085 2.13289 17.6466 2.70394L18.2308 1.74229C17.1957 1.11215 16.0576 0.634298 14.8477 0.339844Z" fill="#3B45FD"/>
+<path d="M19.0918 2.31885L18.427 3.22645C19.3236 3.88437 20.1156 4.67641 20.7735 5.57301L21.6811 4.90815C20.9551 3.91879 20.0812 3.04482 19.0918 2.31885Z" fill="#3B45FD"/>
+<path d="M22.2576 5.76953L21.296 6.35366C21.867 7.29178 22.3001 8.32315 22.5669 9.41959L23.6601 9.15262C23.3656 7.94276 22.8878 6.8047 22.2576 5.76953Z" fill="#3B45FD"/>
+<path d="M23.8612 10.1689L22.7491 10.3406C22.8321 10.8816 22.875 11.4358 22.875 11.9999C22.875 12.5641 22.8321 13.1183 22.7491 13.6594L23.8612 13.831C23.9526 13.234 24 12.6225 24 11.9999C24 11.3774 23.9526 10.7659 23.8612 10.1689Z" fill="#3B45FD"/>
+<path d="M21.296 17.6466C21.867 16.7083 22.3001 15.6771 22.5669 14.5806L23.6601 14.8475C23.3656 16.0575 22.8878 17.1955 22.2576 18.2307L21.296 17.6466Z" fill="#3B45FD"/>
+<path d="M20.7735 18.4272L21.6812 19.092C20.9552 20.0814 20.0813 20.9553 19.0919 21.6813L18.4269 20.7737C19.3236 20.1158 20.1156 19.3238 20.7735 18.4272Z" fill="#3B45FD"/>
+<path d="M17.6466 21.2959L18.2307 22.2575C17.1956 22.8877 16.0575 23.3656 14.8476 23.66L14.5807 22.5668C15.6771 22.3 16.7085 21.8669 17.6466 21.2959Z" fill="#3B45FD"/>
+<path d="M13.6593 22.749L13.831 23.8611C13.234 23.9525 12.6225 23.9999 12 23.9999C11.3774 23.9999 10.7659 23.9525 10.1689 23.8611L10.3405 22.7492C10.8813 22.832 11.4355 22.8749 12 22.8749C12.5642 22.8749 13.1183 22.832 13.6593 22.749Z" fill="#3B45FD"/>
+<path d="M9.41917 22.5672L9.15226 23.6601C8.24343 23.4388 7.37511 23.1142 6.56049 22.6992L5.42159 22.965L5.16596 21.8694L6.70501 21.5103L7.07113 21.6967C7.80894 22.0726 8.59548 22.3668 9.41917 22.5672Z" fill="#3B45FD"/>
+<path d="M4.21646 22.0909L4.47209 23.1865L2.51991 23.6419C1.22079 23.945 0.0548528 22.7791 0.357982 21.4801L0.813491 19.5278L1.90907 19.7834L1.45355 21.7357C1.33988 22.2229 1.77711 22.66 2.26428 22.5464L4.21646 22.0909Z" fill="#3B45FD"/>
+<path d="M2.13062 18.8338L1.03504 18.5782L1.30079 17.4393C0.885789 16.6246 0.561101 15.7563 0.339908 14.8475L1.43279 14.5806C1.63319 15.4042 1.92735 16.1908 2.30321 16.9287L2.48973 17.2948L2.13062 18.8338Z" fill="#3B45FD"/>
+<path d="M1.25064 13.6594L0.138804 13.831C0.0474057 13.234 0 12.6226 0 12C0 11.3775 0.04741 10.766 0.138817 10.1689L1.2508 10.3406C1.16797 10.8817 1.125 11.4358 1.125 12C1.125 12.5645 1.16792 13.1186 1.25064 13.6594Z" fill="#3B45FD"/>
+<path d="M1.43306 9.4191L0.339927 9.15213C0.63438 7.94227 1.11223 6.80421 1.74237 5.76904L2.70402 6.35317C2.13297 7.29129 1.69991 8.32266 1.43306 9.4191Z" fill="#3B45FD"/>
+<path d="M3.22647 5.57299L2.31886 4.90813C3.04483 3.91878 3.91881 3.04482 4.90817 2.31885L5.57303 3.22645C4.67643 3.88437 3.88438 4.6764 3.22647 5.57299Z" fill="#3B45FD"/>
+<path d="M6.3534 2.70392L5.76926 1.74226C6.80442 1.11214 7.94249 0.634292 9.15236 0.339844L9.41933 1.43298C8.32289 1.69982 7.29151 2.13286 6.3534 2.70392Z" fill="#3B45FD"/>
+<path d="M21.75 12C21.75 17.3849 17.3849 21.75 12 21.75C10.292 21.75 8.68661 21.3108 7.29053 20.5392C7.15611 20.4649 6.99927 20.4405 6.84969 20.4753L2.51268 21.4873L3.52466 17.1503C3.55955 17.0007 3.53503 16.8438 3.46075 16.7094C2.68917 15.3134 2.25 13.708 2.25 12C2.25 6.61523 6.61523 2.25 12 2.25C17.3849 2.25 21.75 6.61523 21.75 12Z" fill="#3B45FD"/>
+</g>
+<defs>
+<clipPath id="clip0_25_65">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

index.html

@@ -250,6 +250,9 @@
               <!-- Signal -->
               <a class="button button-signal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/signal.svg" alt="Signal Logo">Signal</a>
 
+              <!-- Signal Alt -->
+              <a class="button button-signal-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/signal-alt.svg" alt="Signal Logo">Signal</a>
+
               <!-- Slack -->
               <a class="button button-slack" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/slack.svg" alt="Slack Logo">Join Slack</a>