git.r.bdr.sh - rbdr/corona-regeln/blob - templates/index.eta

   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