81 lines
2.4 KiB
Plaintext
81 lines
2.4 KiB
Plaintext
package pages
|
|
|
|
import (
|
|
"net/http"
|
|
|
|
"forge.capytal.company/capytalcode/project-comicverse/lib/router/rerrors"
|
|
|
|
"keikos.work/templates/layouts"
|
|
)
|
|
|
|
type Home struct{}
|
|
|
|
func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
|
if err := p.page().Render(r.Context(), w); err != nil {
|
|
rerrors.InternalError(err).ServeHTTP(w, r)
|
|
}
|
|
}
|
|
|
|
templ (p *Home) page() {
|
|
@layouts.Page() {
|
|
<main class="fixed w-100% h-screen md:flex justify-center items-center">
|
|
<h1
|
|
class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-0 mt-4 vertical-lr",
|
|
"md:relative md:m-0 md:horizontal-tb md:w-fit" }
|
|
>
|
|
Keiko <span class="font-japanese text-8xl">稽古</span>
|
|
</h1>
|
|
<div class="absolute z-2 w-100% h-100% md:flex justify-center items-center top-0 left-0">
|
|
<div
|
|
class={ "absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent",
|
|
"md:bg-gradient-to-t md:from-20% md:to-50% md:opacity-100" }
|
|
aria-hidden="true"
|
|
></div>
|
|
<img
|
|
class="absolute z-1 top-0 left-0 -translate-x-15% h-100% md:relative md:h-70% md:translate-x-0 md:rounded-xl"
|
|
src="/assets/img/2.png"
|
|
/>
|
|
</div>
|
|
</main>
|
|
<div
|
|
class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
|
|
aria-hidden="true"
|
|
></div>
|
|
<section class="relative bg-black w-100% h-screen flex flex-col justify-between">
|
|
<h2
|
|
class="relative z-4 m-0 pt-4 text-9xl vertical-lr text-stroke-1px text-stroke-white text-transparent"
|
|
>
|
|
Socials
|
|
</h2>
|
|
<ul class="relative z-3 list-none text-4xl p-0 pr-5 underline">
|
|
<li class="flex justify-end mb-4">
|
|
<a class="flex items-center gap-2">
|
|
Instagram
|
|
<span class="inline-block i-pixelarticons:camera h-3rem"></span>
|
|
</a>
|
|
</li>
|
|
<li class="flex justify-end mb-4">
|
|
<a class="flex items-center gap-2">
|
|
Tumblr
|
|
<span class="inline-block i-pixelarticons:file-alt h-3rem"></span>
|
|
</a>
|
|
</li>
|
|
<li class="flex justify-end">
|
|
<a class="flex items-center gap-2">
|
|
BlueSky
|
|
<span class="inline-block i-pixelarticons:bug h-3rem"></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<span
|
|
class="absolute z-2 w-full h-full bg-gradient-to-b from-black to-transparent"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span
|
|
class="absolute z-1 w-full h-full bg-heropattern"
|
|
aria-hidden="hidden"
|
|
></span>
|
|
</section>
|
|
}
|
|
}
|