tiny 88x31 lexicon for atproto
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>88x31s</title>
7 <style>
8 body {
9 margin: {{.Margin}}px;
10 }
11 img {
12 image-rendering: {{.ImageRendering}};
13 {{if .InitialSize}}
14 width: calc({{.InitialSize}} * 88px);
15 height: auto;
16 {{end}}
17 {{if .HoverCSS}}
18 transition: .067s;
19 }
20 img:hover {
21 {{if .HoverScale}}
22 transform: scale({{.HoverScale}});
23 {{end}}
24 {{if .HoverRotate}}
25 rotate: {{.HoverRotate}}deg;
26 {{end}}
27 {{end}}
28 }
29
30 .button {
31 display: inline-block;
32 margin-right: {{.MarginRight}}px;
33 margin-bottom: {{.MarginBottom}}px;
34 }
35 {{if .Attribute}}
36 .special {
37 background: linear-gradient(88deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
38 }
39 {{end}}
40 </style>
41 </head>
42 <body>
43 <main>
44 {{template "content" .}}
45 </main>
46 </body>
47</html>