46 lines
975 B
Vue
46 lines
975 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
title: String,
|
|
catchphrase: String,
|
|
subtitle: String
|
|
})
|
|
</script>
|
|
<template>
|
|
<header>
|
|
<div>
|
|
<h1 class="cli">
|
|
<span class="beforeBlink decoration"><span class="pink">=</span><span class="yellow">=</span><span class="cyan">=</span>>> {{ title }}</span>
|
|
<span class="blink"> █</span>
|
|
<span class="afterBlink hint">{{ catchphrase }}</span>
|
|
</h1>
|
|
<p class="subtitle">{{ subtitle }}</p>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
<style lang="scss">
|
|
header {
|
|
width: 90vw;
|
|
display: grid;
|
|
justify-items: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 2.5rem;
|
|
grid-template-columns: 100%;
|
|
h1 {
|
|
font-size: calc(min(6vw,2.5rem));
|
|
.decoration {
|
|
font-variant-ligatures: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.blink {
|
|
animation: blink 1s step-start infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |