spaceship-monolith/landings/spaceship/theme.css

Astro UI for Obsidian Vaults

@import "spaceship-monolith/dark";

:root {
	--assets-stars: url('./assets/stars.png');
	--assets-twinkling: url('./assets/twinkling.png');
	--assets-clouds: url('./assets/clouds.png');
}

@keyframes move-twink-back {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -10000px 5000px;
	}
}

@keyframes move-clouds-back {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 10000px 0;
	}
}

.stars, .twinkling, .clouds {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.stars {
	background: #000 var(--assets-stars) repeat top center;
	z-index: -3;
}

.twinkling {
	background: transparent var(--assets-twinkling) repeat top center;
	z-index: -2;
	animation: move-twink-back 200s linear infinite;
}

.clouds {
	background: transparent var(--assets-clouds) repeat top center;
	z-index: -1;
	opacity: 0.4;
	animation: move-clouds-back 200s linear infinite;
}

@utility graph-container {
	@apply absolute w-full h-full;
}

@utility logo-container {
	@apply absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%];
}

@utility logo {
	@apply mx-auto h-[33vh] w-auto transition-all group-hover:rotate-x-25;
}

@utility title-container {
	@apply absolute bottom-[20px] md:bottom-[100px] left-[50%] -translate-x-[50%] flex flex-col gap-3 md:gap-6 items-center transition-all group-hover:-rotate-x-25;
}

@utility title {
	@apply text-6xl lg:text-8xl font-title bg-gradient-to-r from-obsidian-500 via-purple-400 to-pink-500 inline-block text-transparent bg-clip-text;
}

@utility subtitle {
	@apply text-xl lg:text-3xl text-balance text-center font-heading text-white;
}

@source inline("graph-container");
@source inline("logo-container");
@source inline("logo");
@source inline("title-container");
@source inline("title");
@source inline("subtitle");