Begin implementation of the site with Svelte

web-svelte/src/components/SciFi-Button.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	export let height: string|number = 50;
+	export let width: string|number = "unset";
+	export let handler: (e: Event) => unknown;
+
+	// Add the units to the height value if not provided, and ensure that the
+	// provided height is not less than 50 (the default)
+	$: if (typeof(height) == "string") {
+		if (height.match(/[0-9]$/)) {
+			if (height.match(/^[0-4]?[0-9]$/)) {
+				height = `50`;
+			};
+			height = `${height}px`;
+		};
+	} else {
+		if (height < 50) {
+			height = 50;
+		};
+		height = `${height}px`;
+	};
+
+
+	// Add the units to the width value if not provided
+	$: if (typeof(width) == "string") {
+		if (width.match(/[0-9]$/)) {
+			width = `${width}px`;
+		};
+	} else {
+		width = `${width}px`;
+	};
+</script>
+
+<div
+	style="--height: {height}; --width: {width};"
+	class="button-container"
+>
+	<button on:click={handler}>
+		<slot></slot>
+	</button>
+</div>
+
+<style lang="scss">
+div.button-container {
+	display: inline-block;
+	position: relative;
+	margin: 10px;
+	width: var(--width);
+	height: var(--height);
+}
+
+$button-background: #0a0;
+
+button {
+	background: $button-background;
+	border-radius: 5px;
+	border: 3px solid $button-background;
+	box-sizing: border-box;
+	font-family: 'Orbitron', sans-serif;
+	height: calc(100% - 20px);
+	margin: 10px;
+	padding: 5px 7px;
+	transition: all .5s ease;
+	transition: opacity .2s ease;
+	width: calc(100% - 20px);
+
+	&:active {
+		opacity: .2;
+		outline: none;
+	}
+
+	&:hover {
+		background-color: transparent;
+		border-radius: 20px;
+		color: white;
+
+		&:before {
+			border-radius: min(calc(((var(--height) - 20px) / 2) + 5px), 25px);
+			border: 2px $button-background solid;
+		}
+	}
+
+	&:before {
+		content: ' ';
+		border: 2px transparent solid;
+		position: absolute;
+		left: 5px;
+		top: 5px;
+		box-sizing: border-box;
+		width: calc(100% - 10px);
+		height: calc(calc(100% - 20px) + 10px);
+		transition: all .7s ease;
+	}
+}
+</style>