add seymour icons

public/index.html

@@ -100,8 +100,12 @@
     </header>
 
     <section class="banner-container" role="banner" aria-labelledby="main-heading">
-        <img src="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=2048" alt="Scenic mountain road with snow-capped peaks representing the journey of digital nomads and travelers" class="banner">
-        <h1 id="main-heading" class="banner-title">Keyboard Vagabond</h1>
+        <picture>
+            <source media="(min-width: 1500px" srcset="https://picsur.michaeldileo.org/i/bb68d2b9-32d6-4bf9-9eab-4df313d78864.jpg">
+            <source media="(min-width: 1000px" srcset="https://picsur.michaeldileo.org/i/bb68d2b9-32d6-4bf9-9eab-4df313d78864.jpg?width=1500&shrinkonly=true">
+            <source media="(min-width: 500px" srcset="https://picsur.michaeldileo.org/i/bb68d2b9-32d6-4bf9-9eab-4df313d78864.jpg?width=1000&shrinkonly=true">
+            <img src="https://picsur.michaeldileo.org/i/bb68d2b9-32d6-4bf9-9eab-4df313d78864.jpg" alt="Cartoon view of mountains with a dirt trail in the center. A wooden sign reads Keyboard Vagabond.">
+        </picture>
         <p class="banner-subtitle">A fediverse community for digital nomads, remote workers, and travel enthusiasts</p>
     </section>
 
@@ -114,34 +118,92 @@
             <p><strong>Here, you are a member, not just a user</strong> - We want to create community in this space, being
                 respectful of each other as well as the places we go and the people we see. This space is what we make of it.
             </p>
+
+            <div class="mascot-section">
+                <div class="mascot-image">
+                    <picture>
+                        <source srcset="assets/logos/primary-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml" />
+                        <source srcset="assets/logos/primary-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml" />
+                        <img src="assets/logos/primary-light.svg" alt="Otter mascot holding a laptop with the words Keyboard Vagabond circling it" width="200" type="image/svg+xml" />
+                    </picture>
+                </div>
+                <span class="mascot-text">
+                    Seymour is the official mascot of Keyboard Vagabond and a nomadic otter who always wants to see more!
+                    He makes his home wherever he goes and adapts to his new environments.
+                    Let our adorable friend guide you through the fediverse and give you a break from the
+                    algorithms and attention grabbing of corporate social media.
+                    He was lovingly created by nomad and designer Lori Kendall at <a href="https://branddesigncreate.com" target="_blank" rel="nofollow">branddesigncreate.com</a>,
+                    Instagram at <a target="_blank" rel="nofollow" href="https://www.instagram.com/branddesigncreate/">@branddesigncreate</a>.
+                </span>
+            </div>
         </section>
         
+        
+        
         <section aria-labelledby="services-heading">
-            <h2 id="services-heading">Our Fediverse Services</h2>
-            <p>Keyboard Vagabond hosts various fediverse alternatives to big tech and participates in the network.
-                Available to you are:</p>
-            
             <!-- Services Summary for SEO -->
             <div class="services-summary" role="region" aria-label="Quick access to all services">
-                <h3>Quick Access to All Services</h3>
+                <h3>Our Fediverse Services</h3>
                 <div class="service-links">
                     <a href="https://mastodon.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Mastodon - Social Media Alternative">
-                        <strong>Mastodon</strong> - Microblogging
+                        <picture class="service-icon">
+                            <source srcset="assets/logos/mastodon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml"/>
+                            <source srcset="assets/logos/mastodon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml"/>
+                            <img src="assets/logos/mastodon-light.svg" alt="Mastodon mascot holding a phone with mastodon mascot" width="60" height="60" type="image/svg+xml"/>
+                        </picture>
+                        <span class="service-text">
+                            <strong>Mastodon</strong> - Microblogging
+                        </span>
                     </a>
                     <a href="https://piefed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Piefed - Community Forum">
-                        <strong>Piefed</strong> - Community Forum
+                        <picture class="service-icon">
+                            <source srcset="assets/logos/piefed-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml" />
+                            <source srcset="assets/logos/piefed-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml" />
+                            <img src="assets/logos/piefed-light.svg" alt="Piefed mascot holding a pie" width="60" height="60" type="image/svg+xml" />
+                        </picture>
+                        <span class="service-text">
+                            <strong>Piefed</strong> - Community Forum
+                        </span>
                     </a>
                     <a href="https://pixelfed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Pixelfed - Photo Sharing">
-                        <strong>Pixelfed</strong> - Photo Sharing
+                        <picture class="service-icon">
+                            <source srcset="assets/logos/pixelfed-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
+                            <source srcset="assets/logos/pixelfed-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
+                            <img src="assets/logos/pixelfed-light.svg" alt="Pixelfed mascot holding camera" width="60" height="60"  type="image/svg+xml"/>
+                        </picture>
+                        <span class="service-text">
+                            <strong>Pixelfed</strong> - Photo Sharing
+                        </span>
                     </a>
                     <a href="https://bookwyrm.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Bookwyrm - Book Reviews">
-                        <strong>Bookwyrm</strong> - Book Reviews
+                        <picture class="service-icon">
+                            <source srcset="assets/logos/bookwyrm-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
+                            <source srcset="assets/logos/bookwyrm-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
+                            <img src="assets/logos/bookwyrm-light.svg" alt="Bookwyrm mascot holding book" width="60" height="60"  type="image/svg+xml"/>
+                        </picture>
+                        <span class="service-text">
+                            <strong>Bookwyrm</strong> - Book Reviews
+                        </span>
                     </a>
                     <a href="https://blog.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Write Freely - Blogging">
-                        <strong>Write Freely</strong> - Blogging
+                        <picture class="service-icon">
+                            <source srcset="assets/logos/default-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
+                            <source srcset="assets/logos/default-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
+                            <img src="assets/logos/default-light.svg" alt="Default mascot holding laptop" width="60" height="60"  type="image/svg+xml"/>
+                        </picture>
+                        <span class="service-text">
+                            <strong>Write Freely</strong> - Blogging
+                        </span>
                     </a>
                     <a href="https://picsur.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Picsur - Image Hosting">
-                        <strong>Picsur</strong> - Image Hosting
+                        <picture class="service-icon">
+                            <source srcset="assets/logos/default-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
+                            <source srcset="assets/logos/default-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
+                            <img src="assets/logos/default-light.svg" alt="Default mascot holding laptop" width="60" height="60"  type="image/svg+xml"/>
+                        </picture>
+                        <span class="service-text">
+                            <strong>Picsur</strong> - Image Hosting
+                        </span>
                     </a>
                 </div>
             </div>
@@ -246,7 +308,7 @@
         <div class="photo-gallery">
             <div class="photo-item">
                 <small>Check out that Explore button on the main page.</small>
-                <img src="https://picsur.keyboardvagabond.com/i/e8ab899f-5bb4-4cf1-b531-8621ac93670e.png?width=400"
+                <img src="https://picsur.keyboardvagabond.com/i/e8ab899f-5bb4-4cf1-b531-8621ac93670e.png?width=600"
                     alt="Explore button on main page" loading="lazy" />
             </div>
             <div class="photo-item">

public/site-styles/style.css

@@ -1,11 +1,20 @@
 .banner-container {
     position: relative;
     width: 100%;
-    max-height: 40vh;
-    min-height: 200px;
     overflow: hidden;
 }
 
+.banner-container picture {
+    width: 100%;
+    display: block;
+}
+
+.banner-container img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
 .banner {
     width: 100%;
     max-height: 40vh;
@@ -380,7 +389,10 @@
 }
 
 .service-link {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 0.75);
     padding: calc(var(--pico-spacing) * 0.75);
     background: var(--pico-background-color);
     border: 1px solid var(--pico-muted-border-color);
@@ -399,6 +411,28 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+.service-icon {
+    flex-shrink: 0;
+    display: block;
+    width: 60px;
+    height: 60px;
+}
+
+.service-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.service-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
 .service-link strong {
     display: block;
     font-size: 1.1em;
@@ -536,4 +570,65 @@ footer li:not(:last-child)::after {
     footer li:not(:last-child)::after {
         content: none; /* Remove delimiters on mobile */
     }
+}
+
+/* Mascot section styling */
+.mascot-section {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 2);
+    margin: var(--pico-typography-spacing-vertical) 0;
+}
+
+.mascot-image {
+    flex-shrink: 0;
+    min-width: 120px; /* Prevent image from disappearing on thin screens */
+}
+
+.mascot-image picture,
+.mascot-image img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.mascot-image img {
+    width: 200px;
+    max-width: min(200px, 30vw);
+    min-width: 120px; /* Ensure image stays visible on very thin screens */
+}
+
+.mascot-text {
+    flex: 1;
+    min-width: 0; /* Allows text to shrink properly */
+}
+
+/* Stack on small devices */
+@media (max-width: 576px) {
+    .mascot-section {
+        flex-direction: column;
+        align-items: center;
+        gap: var(--pico-spacing);
+    }
+    
+    .mascot-image {
+        min-width: auto; /* Reset min-width when stacked */
+    }
+    
+    .mascot-image img {
+        width: 100%;
+        max-width: 200px;
+        min-width: 120px; /* Keep minimum size even when stacked */
+    }
+    
+    .mascot-text {
+        text-align: center;
+    }
+}
+
+/* Very thin screens - ensure image stays visible */
+@media (max-width: 400px) {
+    .mascot-image img {
+        min-width: 100px; /* Smaller but still visible on very thin screens */
+    }
 }

public/structured-data.json

@@ -8,7 +8,7 @@
         "publisher": {
             "@type": "Organization",
             "name": "Keyboard Vagabond",
-            "logo": "https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=400",
+            "logo": "https://picsur.michaeldileo.org/i/b4579222-367e-4601-b634-87e6d66e3a99.png?width=400",
             "foundingDate": "2025",
             "areaServed": "Global",
             "knowsAbout": ["Fediverse", "Digital Nomadism", "Remote Work", "Travel", "Social Media Alternatives"]
@@ -81,7 +81,7 @@
         "@type": "Organization",
         "name": "Keyboard Vagabond",
         "url": "https://www.keyboardvagabond.com",
-        "logo": "https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=400",
+        "logo": "https://picsur.michaeldileo.org/i/b4579222-367e-4601-b634-87e6d66e3a99.png?width=400",
         "description": "A fediverse community for digital nomads, remote workers, and travel enthusiasts offering multiple social media alternatives including Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.",
         "sameAs": [
             "https://mastodon.keyboardvagabond.com",