]>
Commit | Line | Data |
---|---|---|
1 | <!DOCTYPE HTML> | |
2 | ||
3 | <html lang="en"> | |
4 | <head> | |
5 | <meta charset="utf-8"> | |
6 | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
7 | <meta name="author" content="Rubén Beltrán del Río"> | |
8 | <meta name="description" content="New corona regulations for Berlin"> | |
9 | ||
10 | <meta name="theme-color" content="#db5945"> | |
11 | ||
12 | <style> | |
13 | body { | |
14 | background: linear-gradient(270deg, #fff 0%, #ccc 100%); | |
15 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
16 | padding: 2em; | |
17 | } | |
18 | ||
19 | h1 { | |
20 | background: linear-gradient(104deg, rgba(229,19,34,1) 95%, rgba(229,19,34,0) 95%); | |
21 | color: #fff; | |
22 | padding: 0.5em 1em; | |
23 | text-transform: uppercase; | |
24 | } | |
25 | ||
26 | ul { | |
27 | list-style: none; | |
28 | } | |
29 | ||
30 | li { | |
31 | margin: 1em; | |
32 | } | |
33 | ||
34 | li h2 { | |
35 | font-size: 1.4em; | |
36 | margin: 0; | |
37 | background: linear-gradient(104deg, rgba(229,19,34,1) 95%, rgba(229,19,34,0) 95%); | |
38 | color: #fff; | |
39 | padding: 0.2em 1em 0.2em 0.5em; | |
40 | width: max-content; | |
41 | } | |
42 | ||
43 | li p { | |
44 | margin: 0; | |
45 | } | |
46 | ||
47 | li span { | |
48 | display: inline-block; | |
49 | } | |
50 | ||
51 | li .emoji { | |
52 | position: absolute; | |
53 | font-size: 4em; | |
54 | margin-left: -1.1em; | |
55 | } | |
56 | ||
57 | li .text { | |
58 | font-size: 2em; | |
59 | padding: 0.5em 1em; | |
60 | margin-left: 0.5em; | |
61 | background: #fff; | |
62 | } | |
63 | </style> | |
64 | ||
65 | <title>New Corona Regulations for Berlin</title> | |
66 | </head> | |
67 | <body> | |
68 | <h1> | |
69 | New Corona Regulations Berlin | |
70 | </h1> | |
71 | <ul> | |
72 | <% for (const rule of it.rules) { %> | |
73 | <li> | |
74 | <h2>Starting <%= rule.time %></h2> | |
75 | <p> | |
76 | <span class="emoji"><%= rule.rule.emoji %></span> | |
77 | <span class="text"><%= rule.rule.text %></span> | |
78 | </p> | |
79 | </li> | |
80 | <% } %> | |
81 | </ul> | |
82 | </body> | |
83 | </html> | |
84 |