diff --git a/src/init.luau b/src/init.luau index 782481b..3b29b28 100644 --- a/src/init.luau +++ b/src/init.luau @@ -12,91 +12,132 @@ return h.html({ lang = "en" })({ rel = "icon", href = "https://git.luau.software/luau.software/assets/raw/branch/main/luau-logo.png", }), - h.link({ - rel = "stylesheet", - href = "https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.classless.min.css", - }), h.style()({ [[ - :root { - --pico-primary: #335FFF; - --pico-primary-hover: #2B50D8; - --pico-primary-focus: #335FFF40; - --pico-background-color: #000000; - --pico-card-background-color: #202227; - --pico-card-border-color: #353741; - --pico-color: #EEEFF1; - --pico-muted-color: #BCBEC8; - --pico-muted-border-color: #353741; - --pico-h1-color: #F7F7F8; - --pico-h2-color: #EEEFF1; - } - html, body { - height: 100%; - margin: 0; - padding: 0; - background-color: #000000; - } + * { margin: 0; padding: 0; box-sizing: border-box; } + body { + min-height: 100vh; display: flex; align-items: center; justify-content: center; + background: #000; + color: #eee; + font-family: system-ui, sans-serif; + overflow: hidden; } + + .bg-logo { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 500px; + height: 500px; + opacity: 0.06; + filter: drop-shadow(0 0 80px #335FFF) drop-shadow(0 0 160px #335FFF88); + pointer-events: none; + z-index: 0; + } + + .glow { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 400px; + height: 400px; + background: radial-gradient(circle, #335FFF18 0%, transparent 70%); + pointer-events: none; + z-index: 0; + } + main { + position: relative; + z-index: 1; display: flex; flex-direction: column; align-items: center; - justify-content: center; text-align: center; - width: 100%; - max-width: 860px; padding: 2rem; } - header { - text-align: center; - margin-bottom: 1rem; + + h1 { + font-size: 4rem; + font-weight: 600; + letter-spacing: -0.03em; + color: #fff; + margin-bottom: 0.3rem; } + + .tagline { + font-size: 1.1rem; + color: #666; + margin-bottom: 3rem; + } + .cards { display: flex; - flex-direction: row; + gap: 12px; flex-wrap: wrap; - gap: 10px; justify-content: center; - width: 100%; } - article { - min-width: 220px; - text-align: center; + + .card { + background: #0a0a0c99; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid #1a1a20; + border-radius: 10px; + padding: 1.25rem 1.75rem; + text-decoration: none; + color: #eee; + transition: border-color 0.2s, background 0.2s; + } + + .card:hover { + border-color: #335FFF44; + background: #0e0e14b3; + } + + .card-label { + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: #555; + margin-bottom: 0.4rem; + } + + .card-value { + font-size: 0.95rem; + font-weight: 500; + color: #335FFF; } ]], }), }), h.body()({ + h.img({ + class = "bg-logo", + src = "https://git.luau.software/luau.software/assets/raw/branch/main/luau-logo.png", + alt = "", + }), + h.div({ class = "glow" }), h.main()({ - h.header()({ - h.h1()({ - "luau.software", - }), - h.p()({ - "Luau enthusiasm since 2025.", - }), + h.h1()({ + "luau.software", + }), + h.p({ class = "tagline" })({ + "Luau enthusiasm since 2025.", }), h.div({ class = "cards" })({ - h.article()({ - h.header()({ - "Contact email:", - }), - h.a({ href = "mailto://cyclic@luau.software"})({ - "cyclic@luau.software", - }), + h.a({ class = "card", href = "mailto:cyclic@luau.software" })({ + h.div({ class = "card-label" })({ "Contact" }), + h.div({ class = "card-value" })({ "cyclic@luau.software" }), }), - h.article()({ - h.header()({ - "Luau themed Git:", - }), - h.a({ href = "https://git.luau.software" })({ - "Gitea Instance", - }), + h.a({ class = "card", href = "https://git.luau.software" })({ + h.div({ class = "card-label" })({ "Git" }), + h.div({ class = "card-value" })({ "git.luau.software" }), }), }), }),