michael_dileo/Keyboard-Vagabond-Web
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

first template launch (#2)

Browse Source 
Co-authored-by: Michael DiLeo <michael.dileo@oakstreethealth.com>
Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
michael_dileo
2025-08-14 00:11:50 +00:00
parent 12eadac926
commit 38c707885a
11 changed files with 902 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/index.html
View File

@@ -1,24 +1,41 @@
<!doctype html>
<html lang="en" data-theme="light">
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="css/pico.green.min.css">
<link rel="stylesheet" href="css/pico.colors.min.css">
<link rel="stylesheet" href="site-styles/style.css">
<title>Hello world!</title>
<title>Keyboard Vagabond</title>
</head>
<body>
<!-- Header -->
<header>
<header class="container">
<nav>
<ul>
<li><a target="_blank"href="https://mastodon.keyboardvagabond.com/public">Mastodon</a></li>
<li><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></li>
<li><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></li>
<li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></li>
<li><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></li>
<li><a target="_blank" href="https://picsur.keyboardvagabond.com">Picsur</a></li>
</ul>
<ul>
<li><a href="about.html">About</a></li>
<li>
<button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
<span id="theme-icon">🌙</span>
</button>
</li>
</ul>
</nav>
</header>
<div class="banner-container">
<img src="assets/banner.jpg" alt="Scenic mountain road with snow-capped peaks" class="banner">
<img src="https://picsur.michaeldileo.org/i/36516edf-1a67-4565-aa8e-c10dbe743fd6.jpg?width=2048" alt="Scenic mountain road with snow-capped peaks" class="banner">
<h1 class="banner-title">Welcome to Keyboard Vagabond</h1>
<p class="banner-subtitle">A space in the fediverse for travelers, nomads, and vagabonds of all kinds</p>
</div>
@@ -30,7 +47,7 @@
<p>&lt;mascot here? :D &gt;
<strong>mascot intro and why it was chosen</strong>
</p>
<p><strong>Here, you are a member, not just a user</strong> - we want to create community in this space, being
<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 go and the people we see. This space is what we make of it.
</p>
<h2>What you'll find here</h2>
@@ -67,12 +84,13 @@
<p>You can make a post on Mastodon, tag a community on Lemmy/Piefed and people there can respond. Someone can
make a video on PeerTube (Youtube alternative) and discuss on Mastodon. Your Write Freely blog posts will,
if you enable it, be visible on Mastodon and people can follow your blog account.</p>
<p>Check out this amazing video by <a href="https://news.elenarossini.com">Elena Rossini</a>. You can follow her
<p>Check out this amazing four minute video by <a href="https://news.elenarossini.com">Elena Rossini</a>. You can follow her
on Mastodon by searching @elena@aseachange.com.</p>
<div class="video-container">
<iframe title="Introducing the Fediverse: a New Era of Social Media"
src="https://videos.elenarossini.com/videos/embed/64VuNCccZNrP4u9MfgbhkN" frameborder="0" allowfullscreen=""
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
loading="lazy"></iframe>
</div>
<h2>How to get started in the Fediverse</h2>
<p>The best way to see what's available in the fediverse is to start off on a larger instance, which will be
@@ -84,7 +102,7 @@
<p><strong>Popular places to get started are</strong>:</p>
<strong><a href="https://lemmy.zip">Lemmy.zip</a></strong> for Lemmy or <strong><a
href="https://piefed.social">Piefed.social</a></strong> for PieFed, which is the software that this
community runs. Like Reddit, you can browse
community runs.
</p>
<p><strong><a href="https://mastodon.social">Mastodon.social</a></strong> - the largest mastodon instance.
Search for hashtags or check out whats trending and follow them to create your timeline.</p>
@@ -101,18 +119,32 @@
<div class="photo-item">
<small>Check out that Explore button on the main page.</small>
<img src="https://picsur.keyboardvagabond.com/i/48624639-e731-4e50-a166-f88cf9eccded.jpg?width=400"
alt="Explore button on main page">
alt="Explore button on main page" loading="lazy" />
</div>
<div class="photo-item">
<small>Visit the Posts, Hashtags, and News tabs to see what's on the server</small>
<img src="https://picsur.keyboardvagabond.com/i/d05996c7-5c23-450e-9ca0-b7e532d1c700.jpg?width=700"
alt="Posts, Hashtags, and News tabs">
alt="Posts, Hashtags, and News tabs" loading="lazy" />
</div>
<div class="photo-item">
<small>Look at the local communities to see what communities have been created on this server specifically. The rest of the communities are ones that this server is following.
Following communities on other instances will result in them being shown here.
</small>
<img src="https://picsur.michaeldileo.org/i/e07dddbc-d264-4f12-8877-17eed896026a.jpg?width=700"
alt="Communities, Local Communities" loading="lazy" />
</div>
<div class="photo-item">
<small>Scroll all the way to the bottom to find local topics. Topics are groups of communities. You can suggest more in the Meta community.</small>
<img src="https://picsur.michaeldileo.org/i/5a977aa0-b9bb-4376-a348-f879c7162f63.jpg?width=700"
alt="Local topics" loading="lazy" />
</div>
</div>
</main>
<!-- Footer -->
<footer></footer>
<script src="scripts/bundle.js"></script>
</body>
</html>