44 lines
910 B
Plaintext
44 lines
910 B
Plaintext
package layouts
|
||
|
||
// CenteredCard layout for auth pages (login, register, welcome, authorize)
|
||
// Optimized for popup/webview viewports: 360×540 to 480×680
|
||
templ CenteredCard(title string) {
|
||
@Base(title) {
|
||
@centeredStyles()
|
||
<wa-page>
|
||
<main class="main-centered">
|
||
<wa-card>
|
||
{ children... }
|
||
</wa-card>
|
||
</main>
|
||
</wa-page>
|
||
}
|
||
}
|
||
|
||
// centeredStyles contains the CSS for the centered card layout
|
||
templ centeredStyles() {
|
||
<style>
|
||
.main-centered {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100%;
|
||
padding: var(--wa-space-l);
|
||
box-sizing: border-box;
|
||
}
|
||
.main-centered wa-card {
|
||
width: 100%;
|
||
max-width: 48ch;
|
||
}
|
||
/* Viewport constraints for popup/webview (360-480px width) */
|
||
@media (max-width: 400px) {
|
||
.main-centered {
|
||
padding: var(--wa-space-m);
|
||
}
|
||
.main-centered wa-card {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
}
|