fix styling of headers and nav bar
This commit is contained in:
+33
-41
@@ -19,6 +19,11 @@
|
||||
<meta property="og:description" content="Sign up for Keyboard Vagabond on Mastodon, Piefed, Pixelfed, and more. A step-by-step guide for digital nomads joining our federated online community.">
|
||||
<meta property="og:site_name" content="Keyboard Vagabond">
|
||||
|
||||
<!-- Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="css/pico.jade.min.css">
|
||||
<link rel="stylesheet" href="site-styles/style.css">
|
||||
</head>
|
||||
@@ -51,8 +56,17 @@
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li class="nav-page-link"><a href="index.html">Home</a></li>
|
||||
<li class="nav-page-link"><a href="about.html">About</a></li>
|
||||
<li class="nav-pages-dropdown">
|
||||
<details class="dropdown">
|
||||
<summary role="button" class="secondary">Pages</summary>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
|
||||
<span id="theme-icon">🌙</span>
|
||||
@@ -66,13 +80,20 @@
|
||||
<h1>Get started with Keyboard Vagabond</h1>
|
||||
<p>New to the fediverse? This guide walks you through signing up on Keyboard Vagabond and customizing your feed. Accounts require manual approval to prevent spam—allow a little time after you sign up. For background on how the community works, see our <a href="about.html">about page</a>.</p>
|
||||
|
||||
<h2>Join a Keyboard Vagabond service</h2>
|
||||
<section aria-labelledby="join-heading">
|
||||
<p id="join-heading">If you want to make Keyboard Vagabond your home, sign up on <strong><a href="https://piefed.keyboardvagabond.com">Piefed</a></strong>,
|
||||
<strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong>, <strong><a href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong>,
|
||||
<strong><a href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></strong>, or <strong><a href="https://blog.keyboardvagabond.com">Write Freely</a></strong>.
|
||||
Then start customizing your feed.</p>
|
||||
<section aria-labelledby="basic-steps-heading">
|
||||
<h2 id="basic-steps-heading">Basic steps for getting started</h2>
|
||||
<ol>
|
||||
<li>Complete the sign up form on <strong><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></strong>,
|
||||
<strong><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong>, <strong><a target="_blank" href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong>,
|
||||
<strong><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></strong>, or <strong><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></strong> and give a <em>good</em> answer to the question so that we know you're a human.</li>
|
||||
<li>Wait for approval, but browse and explore communities and hashtags</li>
|
||||
<li>Follow the guide below and subscribe to communities, feeds, topics, and hashtags. On Piefed, check the box to limit or hide political posts if you want. Look under settings to customize your view, or block what you don't want to see.</li>
|
||||
<li>On Piefed, check out the scaled and active sortings. They help bring smaller communities into view that may not have a lot of votes or comments.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<h2>Navigating Communities and Following Hashtags</h2>
|
||||
<section>
|
||||
<h3>Piefed</h3>
|
||||
<p>Browse the home page to see all known posts, or click the Local button to see posts made on this server.</p>
|
||||
<figure>
|
||||
@@ -84,7 +105,7 @@
|
||||
</figure>
|
||||
|
||||
<h3>Mastodon</h3>
|
||||
<p>After creating your account, head over to <a href="https://fedidevs.com/starter-packs/" rel="nofollow">fedidevs.com/starter-packs</a>
|
||||
<p>After creating your account, head over to <a target="_blank" href="https://fedidevs.com/starter-packs/" rel="nofollow">fedidevs.com/starter-packs</a>
|
||||
and search for accounts that fit your interests.</p>
|
||||
<figure>
|
||||
<img src="https://picsur.keyboardvagabond.com/i/43db7444-0d38-4761-aa68-2681085115c4.png?width=1000&shrinkOnly=true" alt="Screenshot of starter pack search on fedidevs.com" loading="lazy">
|
||||
@@ -107,7 +128,7 @@
|
||||
<h3>Other fediverse servers</h3>
|
||||
<ul>
|
||||
<li><a href="https://piefed.keyboardvagabond.com/auth/instance_chooser">Piefed Instance Chooser</a> — find other Piefed servers. <a href="https://piefed.social/" rel="nofollow">Piefed.social</a> is the flagship instance.</li>
|
||||
<li><a href="https://join-lemmy.org/instances" rel="nofollow">Join Lemmy</a> — the original Reddit alternative, with <a href="https://lemmy.zip/" rel="nofollow">Lemmy.zip</a> as a popular choice.</li>
|
||||
<li><a href="https://join-lemmy.org/instances" rel="nofollow">Join Lemmy</a> — the original Reddit alternative; <a href="https://lemmy.zip/" rel="nofollow">Lemmy.zip</a> as a popular choice.</li>
|
||||
<li><a href="https://joinmastodon.org/servers" rel="nofollow">Join Mastodon</a> — Twitter alternative; <a href="https://mastodon.social" rel="nofollow">Mastodon.social</a> is the flagship instance.</li>
|
||||
<li><a href="https://pixelfed.org/servers" rel="nofollow">Join Pixelfed</a> — photo sharing / Instagram alternative; <a href="https://pixelfed.social" rel="nofollow">Pixelfed.social</a> is the flagship instance.</li>
|
||||
</ul>
|
||||
@@ -116,39 +137,10 @@
|
||||
<h2>Codes of Conduct</h2>
|
||||
<section>
|
||||
<p>While corporate media is primarily interested in the Terms of Service, the fediverse cares about the
|
||||
Code of Conduct—the agreement for how we treat each other and what behavior is and is not tolerated.
|
||||
Each instance should have one, including those of Keyboard Vagabond. These agreements help us
|
||||
Code of Conduct, the agreement for how we treat each other and what behavior is and is not tolerated.
|
||||
Each instance should have one and Keyboard Vagabond does. These agreements help us
|
||||
create welcoming spaces that are free of harassment and bigotry.</p>
|
||||
</section>
|
||||
|
||||
<h2>Creating your experience</h2>
|
||||
<section>
|
||||
<p>In the fediverse, there are no algorithms. No one is trying to harvest your data or monetize your attention.
|
||||
You control what you see by choosing who and what to follow. On Piefed, use the Explore button, Posts/Hashtags/News tabs,
|
||||
local communities, and topics to discover nomad-focused content.</p>
|
||||
<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=600"
|
||||
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/aea3c3c5-b011-4680-be4c-96fc1fdb009a.png?width=700"
|
||||
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.keyboardvagabond.com/i/b5d316d9-8958-47bf-ba74-fb853e2d2be8.png?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.keyboardvagabond.com/i/e5909364-3c4f-4bca-8631-5b1225781177.png?width=700"
|
||||
alt="Local topics" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="container" role="contentinfo">
|
||||
|
||||
Reference in New Issue
Block a user