ngn
91a11e4611
All checks were successful
Build the docker image for the frontend application / build (push) Successful in 27s
Signed-off-by: ngn <ngn@ngn.tf>
73 lines
1.3 KiB
Svelte
73 lines
1.3 KiB
Svelte
<script>
|
|
import { _ } from "$lib/locale.js";
|
|
let { picture, title } = $props();
|
|
</script>
|
|
|
|
<header>
|
|
<div style="--length: {title.length + 1}">
|
|
<h1>{title}<span>_</span></h1>
|
|
</div>
|
|
<img src="/assets/{picture}.png" alt="" />
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
background: var(--transparent);
|
|
height: 250px;
|
|
}
|
|
|
|
header div {
|
|
padding: 0 40px 10px 40px;
|
|
color: var(--color);
|
|
font-size: var(--size-6);
|
|
font-family:
|
|
Consolas,
|
|
Monaco,
|
|
Lucida Console,
|
|
Liberation Mono,
|
|
DejaVu Sans Mono,
|
|
Bitstream Vera Sans Mono,
|
|
Courier New,
|
|
monospace;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
header div h1 {
|
|
text-shadow: var(--text-shadow);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
animation: typing 0.8s steps(var(--length), end);
|
|
}
|
|
|
|
header div span {
|
|
content: "_";
|
|
display: inline-block;
|
|
animation: blink 1.5s steps(2) infinite;
|
|
}
|
|
|
|
header img {
|
|
width: 220px;
|
|
padding: 0 50px;
|
|
}
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
header {
|
|
height: 180px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
header div {
|
|
padding: 30px 20px 20px 20px;
|
|
}
|
|
|
|
header img {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|