svelte/site/src/components/unused/debug-css.html

<script>
	export let style;
	let show = false;

	$: if (typeof document !== 'undefined') {
		if (show) document.body.classList.add('css-debug')
		else document.body.classList.remove('css-debug')
	}
</script>

<!--
-----------------------------------------------
	simple css-debug
-----------------------------------------------
-->

<label {style}>
	<input type="checkbox" bind:checked={show}> grid
</label>

{#if show}
<div class='guide horizontal' style='top: calc(var(--nav-h) + var(--top-offset))' />
<div class='guide vertical' style='left: var(--side-page)' />
<div class='guide vertical' style='right: var(--side-page)' />
<div class='guide vertical' style='left: var(--side-nav)' />
<div class='guide vertical' style='right: var(--side-nav)' />
{/if}

<style>
	label {
		position: fixed;
		padding: 0.3rem 1rem;
		font-size: 1.2rem;
		cursor: pointer;
		user-select: none;
		opacity: 0.5;
		font: 300 1rem/1.7 var(--font-ui);
		z-index: 30;
	}

	label:hover {
		opacity: 1
	}

	input {
		display: none
	}

	.guide {
		position: fixed;
		opacity: .5;
		z-index: 30
	}

	.horizontal {
		width: 100%;
		height: 0
	}

	.vertical {
		width: 0;
		height: 100vh
	}

	:global(.css-debug *) {
		outline: 1px solid rgba(73, 177, 238, 0.25);
	}
</style>