2024-03-15 17:55:28 +00:00
|
|
|
package layouts
|
|
|
|
|
|
2024-03-15 22:48:11 +00:00
|
|
|
templ StaticPage(title string, subtitle string) {
|
2024-03-15 17:55:28 +00:00
|
|
|
<!DOCTYPE html>
|
2024-03-15 22:48:11 +00:00
|
|
|
<html class={ "text-uigrey-100" , "bg-uigrey-900" }>
|
2024-03-15 17:55:28 +00:00
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Clustvirt</title>
|
|
|
|
|
<link href="/static/css/style.css" type="text/css" rel="stylesheet" />
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2024-03-15 22:48:11 +00:00
|
|
|
<header>
|
|
|
|
|
@header(title, subtitle)
|
2024-03-15 17:55:28 +00:00
|
|
|
</header>
|
2024-03-15 22:48:11 +00:00
|
|
|
<div id="content" name="content" class={ "flex" , "flex-col" , "gap-2" }>
|
|
|
|
|
{ children... }
|
2024-03-15 17:55:28 +00:00
|
|
|
</div>
|
|
|
|
|
<footer>
|
|
|
|
|
@footer()
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
templ header(title string, subtitle string) {
|
2024-03-15 22:48:11 +00:00
|
|
|
<h2 class={ "text-lg" , "font-semibold" , "italic" , "h-6" }>{ subtitle }</h2>
|
|
|
|
|
@nav(title)
|
2024-03-15 17:55:28 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-15 22:48:11 +00:00
|
|
|
templ nav(title string) {
|
|
|
|
|
<nav class={ "w-100" , "bg-uigrey-600" , "shadow" , "shadow-uigrey-700" , "md:px-auto" }>
|
|
|
|
|
<div class={
|
|
|
|
|
"md:h-16",
|
|
|
|
|
"h-28",
|
|
|
|
|
"mx-auto",
|
|
|
|
|
"md:px-4",
|
|
|
|
|
"container",
|
|
|
|
|
"flex",
|
|
|
|
|
"items-center",
|
|
|
|
|
"justify-between",
|
|
|
|
|
"flex-wrap",
|
|
|
|
|
"md:flex-nowrap" }>
|
|
|
|
|
<h1 class={ "text-2xl", "font-bold", "text-uiblue-200", "md:order-1" }>{ title }</h1>
|
|
|
|
|
<div class={"text-uigrey-200", "font-semibold", "md:w-auto", "md:order-2", "order-3"}>
|
|
|
|
|
<ul class={ "flex", "justify-between", "sm:w-full", "md:w-auto" }>
|
|
|
|
|
<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">What</a></li>
|
|
|
|
|
<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Why</a></li>
|
|
|
|
|
<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Goals</a></li>
|
|
|
|
|
<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Stretch</a></li>
|
|
|
|
|
<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Requests</a></li>
|
|
|
|
|
<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Never</a></li>
|
|
|
|
|
<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Notes</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class={"order-2", "md:order-3"}>Login</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
2024-03-15 17:55:28 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
templ footer() {
|
|
|
|
|
<div class="flex gap-4 md:gap-6 sm:gap-8 divide divide-solid">
|
|
|
|
|
<div id="footer_left" class="flex-auto basis-1/4 md:basis-1/3 p-2">Left</div>
|
|
|
|
|
<div id="footer_middle" class="flex-auto basis-1/2 md:basis-1/3 p-2">Middle</div>
|
|
|
|
|
<div id="footer_right" class="flex-auto basis-1/4 md:basis-1/3 p-2">Right</div>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
