BinarySandia04
b224c2ba65
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 32s
107 lines
2.7 KiB
Vue
107 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import HeaderLinks from './HeaderLinks.vue';
|
|
import SiteOptions from './site_options/SiteOptions.vue';
|
|
import StickyHeader from './StickyHeader.vue';
|
|
|
|
const asciiLines = [
|
|
"░█▀█░█▀▄░█▀█░█▀█░█▀▄░█▀█░▀█▀░█▀▀",
|
|
"░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░░█░░█░█",
|
|
"░▀░▀░▀░▀░▀░▀░▀░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀"
|
|
];
|
|
|
|
const revealedLines = ref<number>(0);
|
|
let asciiTimer: ReturnType<typeof setInterval> | null = null;
|
|
const HAS_ANIMATED_KEY = 'ascii-animated';
|
|
|
|
function startAsciiAnimation() {
|
|
if (sessionStorage.getItem(HAS_ANIMATED_KEY)) {
|
|
revealedLines.value = asciiLines.length;
|
|
return;
|
|
}
|
|
|
|
const delay = 400;
|
|
let count = 0;
|
|
|
|
asciiTimer = setInterval(() => {
|
|
count++;
|
|
revealedLines.value = count;
|
|
if (count >= asciiLines.length) {
|
|
clearInterval(asciiTimer!);
|
|
asciiTimer = null;
|
|
sessionStorage.setItem(HAS_ANIMATED_KEY, '1');
|
|
}
|
|
}, delay);
|
|
}
|
|
|
|
onMounted(() => {
|
|
startAsciiAnimation();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (asciiTimer) clearInterval(asciiTimer);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="header-container website">
|
|
<pre v-if="revealedLines > 0" class="ascii-title" aria-hidden="true">{{ asciiLines.slice(0, revealedLines).join('\n') }}</pre>
|
|
<HeaderLinks></HeaderLinks>
|
|
</div>
|
|
</div>
|
|
<div class="header-container">
|
|
</div>
|
|
<div class="container">
|
|
<SiteOptions></SiteOptions>
|
|
</div>
|
|
</div>
|
|
<StickyHeader></StickyHeader>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
position: relative;
|
|
margin-top: 30px;
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-container {
|
|
&.website {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
@media screen and (max-width: 600px) {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-container {
|
|
position:relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ascii-title {
|
|
font-family: 'Hurmit', monospace;
|
|
color: var(--color-link);
|
|
text-shadow: 0 0 8px var(--color-link), 0 0 4px var(--color-link);
|
|
font-size: clamp(0.35rem, 1.2vw, 0.65rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.1ch;
|
|
margin: 0;
|
|
white-space: pre;
|
|
min-height: clamp(1.05rem, 3.6vw, 1.95rem);
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.ascii-title {
|
|
font-size: clamp(0.28rem, 1.8vw, 0.5rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.1ch;
|
|
}
|
|
}
|
|
</style> |