add seymour icons
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user