[rbdr/corona-regeln] / templates / index.eta

<!DOCTYPE HTML>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Rubén Beltrán del Río">
    <meta name="description" content="New corona regulations for Berlin">

    <meta name="theme-color" content="#db5945">

    <style>
    body {
      background: linear-gradient(270deg, #fff 0%, #ccc 100%);
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      padding: 2em;
    }

    h1 {
      background: linear-gradient(104deg, rgba(229,19,34,1) 95%, rgba(229,19,34,0) 95%);
      color: #fff;
      padding: 0.5em 1em;
      text-transform: uppercase;
    }

ul {
  list-style: none;
}

li {
  margin: 1em;
}

li h2 {
  font-size: 1.4em;
  margin: 0;
  background: linear-gradient(104deg, rgba(229,19,34,1) 95%, rgba(229,19,34,0) 95%);
  color: #fff;
  padding: 0.2em 1em 0.2em 0.5em;
  width: max-content;
}

li p {
  margin: 0;
}

li span {
  display: inline-block;
}

li .emoji {
  position: absolute;
  font-size: 4em;
  margin-left: -1.1em;
}

li .text {
  font-size: 2em;
  padding: 0.5em 1em;
  margin-left: 0.5em;
  background: #fff;
}
    </style>

    <title>New Corona Regulations for Berlin</title>
  </head>
  <body>
      <h1>
        New Corona Regulations Berlin
      </h1>
      <ul>
        <% for (const rule of it.rules) { %>
        <li>
          <h2>Starting <%= rule.time %></h2>
          <p>
            <span class="emoji"><%= rule.rule.emoji %></span>
            <span class="text"><%= rule.rule.text %></span>
          </p>
        </li>
        <% } %>
      </ul>
  </body>
</html>
Commit	Line	Data
07d8db2b RBR	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