Add main content

src/app.css

@@ -0,0 +1,67 @@
+* {
+	--link-color: #5b5b5b;
+}
+
+a {
+  display: inline-block;
+  position: relative;
+
+  color: var(--link-color);
+
+	text-decoration: none;
+
+  transition: 0.2s;
+}
+
+a::before {
+  content: "";
+
+  color: white;
+
+  background: linear-gradient(284deg, #e1ad2b, #8bc5d2, #d28bb9);
+  background-size: 600% 600%;
+
+  animation: slide 2s linear infinite;
+
+  width: 100%;
+  height: 1px;
+
+  padding: 1px;
+
+  position: absolute;
+  bottom: 0;
+
+  left: 0;
+  right: 0;
+
+  z-index: -1;
+
+  transition: 0.4s;
+}
+
+a:hover::before, a:active::before, a:focus::before {
+  padding: 0 2px;
+  height: calc(100%);
+
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  filter: blur(10px);
+}
+
+a:active::before {
+  filter: blur(5px);
+}
+
+@keyframes slide {
+0% {
+  background-position: 0% 50%;
+}
+
+50% {
+  background-position: 100% 50%;
+}
+
+100% {
+  background-position: 0% 50%;
+}
+}
+

src/lib/elem/block.svelte

@@ -0,0 +1,23 @@
+<main>
+	<slot />
+</main>
+
+<style>
+	main {
+		text-align: center;
+
+		max-width: 70%;
+		min-width: 70%;
+
+		border: solid 2px black;
+		padding: 10px 50px;
+
+		border-radius: 5px;
+
+		text-align: center;
+
+		display: inline-block;
+
+		margin: 5px;
+	}
+</style>

src/routes/+page.svelte

@@ -1,35 +1,86 @@
+<script lang="ts">
+	import Block from '../lib/elem/block.svelte';
+
+	import '../app.css';
+</script>
+
 <main>
 	<h1>Trinket</h1>
 
-	<hr />
+	<Block>
-
+		<p><b><i>trinket</i> <span id="def_pronunciation">|ˈtrɪŋkɪt|</span></b></p>
-	<div id="def">
-		<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>
-	</div>
+	</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;
 
-		border: solid 2px black;
+		max-width: 90%;
-		padding: 5px;
 
-		border-radius: 5px;
+		margin: 0 auto;
-	}
-
-	hr {
-		width: 70%;
-	}
-
-	#def {
-		text-align: center;
 	}
 
 	#def_pronunciation,
 	#def_type {
 		color: grey;
 	}
+
+	#links {
+		display: inline-block;
+
+		text-align: left;
+	}
+
+	.about {
+		text-align: center;
+
+		margin: 0 auto;
+
+		max-width: 50%;
+	}
 </style>