misc linting, error handling and code-splitting

src/lib/styles/card.scss

@@ -0,0 +1,167 @@
+@keyframes pulse-live {
+	0% {
+		box-shadow: 0 0 0 0 var(--pulse);
+	}
+	70% {
+		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(0, 212, 57, 0);
+	}
+}
+
+@mixin pulse-dot {
+	&::after {
+		content: '';
+		top: 50%;
+		margin-left: 0.4rem;
+		position: absolute;
+		display: block;
+		border-radius: 50%;
+		background-color: var(--color);
+		border-radius: 50%;
+		transform: translate(-50%, -50%);
+		animation: pulse-live 2s infinite;
+		height: 16px;
+		width: 16px;
+	}
+}
+
+.card {
+	background: #fbf6f4;
+	box-shadow: var(
+		--str-shadow-s,
+		0px 0px 2px #22242714,
+		0px 1px 4px #2224271f,
+		0px 4px 8px #22242729
+	);
+	pointer-events: all;
+	cursor: auto;
+}
+
+.header {
+	display: flex;
+	padding: 0.75rem;
+	background-color: white;
+	align-items: center;
+	font-size: 16px;
+
+	.icon {
+		height: 24px;
+		width: 24px;
+		margin-right: 0.75rem;
+	}
+
+	.subtle {
+		margin-left: 0.25rem;
+		color: rgba(0, 0, 0, 0.4);
+		font-weight: 500;
+		font-size: 0.9rem;
+	}
+
+	.status {
+		height: 1rem;
+		width: 1rem;
+		border-radius: 50%;
+		margin-left: auto;
+		position: relative;
+		@include pulse-dot;
+
+		&.ok {
+			--color: var(--positive);
+			--pulse: var(--pulse-positive);
+		}
+		&.warning {
+			--color: var(--warning);
+			--pulse: var(--pulse-warning);
+		}
+		&.error {
+			--color: var(--negative);
+			--pulse: var(--pulse-negative);
+		}
+	}
+}
+
+.footer {
+	padding: 0.5rem;
+	background-color: white;
+}
+
+.resource {
+	display: grid;
+	grid-template-columns: auto auto;
+	padding: 0.5rem;
+	background-color: var(--bg);
+
+	row-gap: 6px;
+	max-width: 330px;
+
+	> div,
+	span {
+		display: flex;
+		padding: 0 0.5rem;
+	}
+}
+
+:global(.resource .title svg) {
+	height: 1rem;
+	width: 1rem;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-evenly;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+
+	margin-top: auto;
+	background: white;
+	padding: 0.5rem;
+	border-bottom-left-radius: 0.25rem;
+	border-bottom-right-radius: 0.25rem;
+
+	button {
+		border: none;
+		position: relative;
+		background: transparent;
+		height: unset;
+		border-radius: 0.5rem;
+		display: inline-block;
+		text-decoration: none;
+		padding: 0 0.5rem;
+		flex: 1;
+
+		span {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 1.5rem;
+			padding: 0 0.5rem;
+			margin-left: -0.5rem;
+			border: 1px solid #eaddd5;
+			border-radius: inherit;
+			white-space: nowrap;
+			cursor: pointer;
+			font-weight: 700;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			right: 0;
+			top: 0;
+			border-radius: 0.5rem;
+			width: 100%;
+			height: 100%;
+			transition: transform 0.1s ease;
+			will-change: box-shadow 0.25s;
+			pointer-events: none;
+		}
+	}
+}
+
+.positive {
+	color: #077c35;
+}