feat: desktop styling
This commit is contained in:
@@ -18,18 +18,24 @@ func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
|||||||
|
|
||||||
templ (p *Home) page() {
|
templ (p *Home) page() {
|
||||||
@layouts.Page() {
|
@layouts.Page() {
|
||||||
<main class="fixed w-100% h-screen">
|
<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-4 vertical-lr">
|
<h1
|
||||||
|
class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-4 vertical-lr",
|
||||||
|
"md:relative md:m-0 md:horizontal-tb md:w-fit" }
|
||||||
|
>
|
||||||
Keiko <span class="font-japanese text-8xl">稽古</span>
|
Keiko <span class="font-japanese text-8xl">稽古</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div
|
<div class="absolute z-2 w-100% h-100% md:flex justify-center items-center top-0 left-0">
|
||||||
class="absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent"
|
<div
|
||||||
aria-hidden="true"
|
class={ "absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent",
|
||||||
></div>
|
"md:bg-gradient-to-t md:from-20% md:to-50% md:opacity-100" }
|
||||||
<img
|
aria-hidden="true"
|
||||||
class="absolute z-1 top-0 left-0 -translate-x-15% h-100%"
|
></div>
|
||||||
src="/assets/img/2.png"
|
<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>
|
</main>
|
||||||
<div
|
<div
|
||||||
class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
|
class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
|
||||||
|
|||||||
Reference in New Issue
Block a user