trinket-home/src/routes/+page.svelte

<script lang="ts">
	import Block from '../lib/elem/block.svelte';

	import '../app.css';
</script>

<main>
	<h1>Trinket</h1>

	<Block>
		<p><b><i>trinket</i> <span id="def_pronunciation">|ˈtrɪŋkɪt|</span></b></p>
		<p id="def_type"><i>n.</i></p>
		<p>a small item that is of little value</p>
	</Block>

	<Block>
		<p>
			a collection of projects by Shav Kinderlehrer <a
				id="email"
				href="mailto:shav@trinket.icu?subject=trinket.icu">&lt;shav@trinket.icu&gt;</a
			>
		</p>
	</Block>

	<Block>
		<h2><a href="https://curio.trinket.icu">The Curio</a></h2>
		<p class="about">
			The wholesome cross between <a href="https://www.thiswebsitewillselfdestruct.com"
				>This Website Will Self Destruct</a
			>
			And
			<a href="https://www.urbandictionary.com/">The Urban Dictionary</a>
			Sign up, submit a word, and help build an absurd internet dictionary
		</p>
	</Block>

	<Block>
		<h2><a href="http://msg.trinket.icu">Message</a></h2>
		<p class="about">
			One message to rule them all! In <code>Message</code>, only one message can be set at a time,
			but anyone can set it to anything, whenever, for everyone to see.
		</p>
		<p>Try setting a message right now:</p>
		<code>curl msg.trinket.icu -d "&lt;your message&gt;"</code>
	</Block>

	<Block>
		<h2>Links</h2>
		<div id="links">
			<a href="https://lightblog.dev">blog (I write articles every month or so)</a>
			<br />
			<a href="https://github.com/secondary-smiles">github</a>
			<br />
			<pre>my selfhosted git server [<a href="ssh://git.trinket.icu">ssh git.trinket.icu</a>]</pre>
		</div>
	</Block>
</main>

<style>
	main {
		text-align: center;

		max-width: 90%;

		margin: 0 auto;
	}

	#def_pronunciation,
	#def_type {
		color: grey;
	}

	#links {
		display: inline-block;

		text-align: left;
	}

	.about {
		text-align: center;

		margin: 0 auto;

		max-width: 50%;
	}
</style>