master
1{{- /*gotype: github.com/antonmedv/gitmal/pkg/templates.PreviewParams*/ -}}
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Chroma Themes Preview</title>
8 <style>
9 * {
10 box-sizing: border-box;
11 }
12
13 body {
14 margin: 0;
15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
16 background: #ffffff;
17 color: #3c3c43;
18 line-height: 1.4;
19 }
20
21 header {
22 position: sticky;
23 top: 0;
24 background: #f6f6f7;
25 border-bottom: 1px solid #c2c2c4;
26 padding: 12px 16px;
27 z-index: 10;
28 }
29
30 .meta {
31 color: rgba(60, 60, 67, .78);
32 font-size: 12px
33 }
34
35 main {
36 padding: 16px
37 }
38
39 .grid {
40 display: grid;
41 grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
42 gap: 16px;
43 justify-content: center;
44 }
45
46 .card {
47 border: 1px solid #c2c2c4;
48 border-radius: 10px;
49 overflow: hidden;
50 background: #fff;
51 }
52
53 /* Dark tone variant for theme cards */
54 .card.dark {
55 background: #1b1b1f; /* dark bg */
56 color: rgba(255, 255, 245, .86); /* light text */
57 border-color: #3c3f44; /* dark border */
58 }
59
60 .card h2 {
61 margin: 0;
62 padding: 10px 12px;
63 font-size: 14px;
64 border-bottom: 1px solid #c2c2c4;
65 display: flex;
66 justify-content: space-between;
67 align-items: center;
68 }
69
70 .card.dark h2 {
71 border-bottom-color: #3c3f44;
72 }
73
74 .badge {
75 font-size: 11px;
76 padding: 2px 6px;
77 border-radius: 6px;
78 border: 1px solid #c2c2c4;
79 color: rgba(60, 60, 67, .78);
80 background: #ffffff;
81 }
82
83 .card.dark .badge {
84 border-color: #3c3f44;
85 color: rgba(235, 235, 245, .6);
86 background: #1b1b1f;
87 }
88
89 .sample {
90 padding: 12px;
91 }
92
93 pre {
94 margin: 0;
95 padding: 8px 16px;
96 overflow-x: auto;
97 white-space: pre;
98 word-spacing: normal;
99 word-break: normal;
100 word-wrap: normal;
101 tab-size: 4;
102 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
103 border-radius: 6px;
104 background-color: #f6f6f7;
105 }
106
107 .dark pre {
108 background-color: #161618;
109 }
110
111 pre > code {
112 display: block;
113 padding: 0 16px;
114 width: fit-content;
115 min-width: 100%;
116 line-height: 20px;
117 font-size: 12px;
118 color: rgba(60, 60, 67);
119 }
120
121 .dark pre > code {
122 color: rgba(255, 255, 245, .86);
123 }
124 </style>
125</head>
126<body>
127<header>
128 <div><strong>Chroma themes preview</strong></div>
129 <div class="meta">Showing {{ .Count }} themes. Use <code>--theme <name></code> in the app.</div>
130</header>
131<main>
132 <div class="grid">
133 {{ range .Themes }}
134 <section class="card {{ .Tone }}">
135 <h2><span>{{ .Name }}</span><span class="badge">{{ .Tone }}</span></h2>
136 <div class="sample">
137 {{ .HTML }}
138 </div>
139 </section>
140 {{ end }}
141 </div>
142</main>
143</body>
144</html>