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>
|
|||
|
|
}
|