66 lines
1.0 KiB
Svelte
66 lines
1.0 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
|
|
let heightOdd = false;
|
|
let widthOdd = false;
|
|
|
|
function updateOdd() {
|
|
heightOdd = window.innerHeight % 2 === 1;
|
|
widthOdd = window.innerWidth % 2 === 1;
|
|
}
|
|
|
|
onMount(() => {
|
|
updateOdd();
|
|
window.addEventListener('resize', updateOdd);
|
|
});
|
|
</script>
|
|
|
|
<div class="axes" class:heightOdd class:widthOdd>
|
|
<div class="horizontal"></div>
|
|
<div class="vertical"></div>
|
|
</div>
|
|
|
|
<style>
|
|
.axes {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
--size: 3px;
|
|
}
|
|
|
|
.axes .horizontal,
|
|
.axes .vertical {
|
|
position: absolute;
|
|
background-color: red;
|
|
z-index: 5;
|
|
opacity: 0.66;
|
|
}
|
|
|
|
.axes .horizontal {
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: var(--size);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.axes .vertical {
|
|
top: 0;
|
|
left: 50%;
|
|
width: var(--size);
|
|
height: 100%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/*.axes.heightOdd .horizontal {*/
|
|
/* top: calc(50% + 1px);*/
|
|
/*}*/
|
|
|
|
/*.axes.widthOdd .vertical {*/
|
|
/* left: calc(50% + 1px);*/
|
|
/*}*/
|
|
</style>
|