garden/layouts/estate/list.html

45 lines
No EOL
1.5 KiB
HTML

{{ define "main" }}
<style>
main { max-width: 900px !important; }
.estate-value-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--size-3);
margin: var(--size-4) 0;
}
.estate-value-card article {
border: 1px solid var(--garden-border);
border-radius: var(--radius-2);
padding: var(--size-3);
text-align: center;
}
.estate-value-card article header {
font-size: var(--font-size-0);
color: var(--garden-text-dim);
}
.estate-value-card article .stat {
font-size: var(--font-size-5);
font-weight: 600;
line-height: 1.2;
}
.estate-badge {
display: inline-block;
padding: 0.15em 0.5em;
border-radius: var(--radius-1);
font-size: var(--font-size-00);
font-family: var(--font-mono);
}
.estate-badge.ok { background: color-mix(in srgb, var(--garden-fix) 15%, transparent); color: var(--garden-fix); }
.estate-badge.warn { background: color-mix(in srgb, var(--garden-build) 15%, transparent); color: var(--garden-build); }
.estate-badge.err { background: color-mix(in srgb, var(--garden-warning) 15%, transparent); color: var(--garden-warning); }
table { font-size: var(--font-size-0); }
table th { color: var(--garden-text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--font-size-00); }
</style>
<section>
<header>
<h1>{{ .Title }}</h1>
{{- with .Description }}<p data-text="dim">{{ . }}</p>{{- end }}
</header>
{{ .Content }}
</section>
{{ end }}