.

2020-03-18 00:26:41 -04:00 · 2020-03-18 00:26:41 -04:00 · 0538487c03
parent 4b51ed3438
commit 0538487c03
6 changed files with 155 additions and 5 deletions
--- a/src/components.tsx
+++ b/src/components.tsx
@ -5,14 +5,57 @@ export class Layout extends React.Component {
    return (
      <html lang="en">
        <head>
-          <meta charSet="UTF-8" />
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="author" content="Leandro Facchinetti" />
          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
+            name="description"
+            content="Convert email newsletters into Atom feeds."
          />
-          <title>Document</title>
+          <link
+            rel="icon"
+            type="image/png"
+            href="/favicon-32x32.png"
+            sizes="32x32"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            href="/favicon-16x16.png"
+            sizes="16x16"
+          />
+          <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+          <link rel="stylesheet" type="text/css" href="styles.css" />
+          <title>Kill the Newsletter!</title>
        </head>
-        <body>{this.props.children}</body>
+        <body style={{ textAlign: "center" }}>
+          <header>
+            <h1>
+              <a href="/">Kill the Newsletter!</a>
+            </h1>
+            <p>Convert email newsletters into Atom feeds</p>
+            <p>
+              <img
+                alt="Convert email newsletters into Atom feeds"
+                src="/logo.png"
+                width="150"
+              />
+            </p>
+          </header>
+          <main>{this.props.children}</main>
+          <footer>
+            <p>
+              By <a href="https://www.leafac.com">Leandro Facchinetti</a> ·{" "}
+              <a href="https://github.com/leafac/www.kill-the-newsletter.com">
+                Source
+              </a>{" "}
+              ·{" "}
+              <a href="mailto:kill-the-newsletter@leafac.com">
+                Report an Issue
+              </a>
+            </p>
+          </footer>
+        </body>
      </html>
    );
  }
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/logo--full.png
+++ b/static/logo--full.png
--- a/static/styles.css
+++ b/static/styles.css
@ -0,0 +1,107 @@
+body {
+  font-family: Charter, Georgia, serif;
+  line-height: 1.5;
+  max-width: 600px;
+  padding: 0 2em;
+  margin: 2em auto;
+}
+
+a {
+  color: black;
+}
+
+code {
+  font-family: Menlo, Consolas, monospace;
+  font-size: 0.875em;
+}
+
+h1,
+h2 {
+  line-height: 1.3;
+  margin-top: 2em;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.25em;
+  font-weight: normal;
+  font-style: italic;
+}
+
+header a {
+  text-decoration: none;
+}
+
+footer {
+  font-size: 0.875em;
+}
+
+nav,
+figure {
+  text-align: center;
+  margin: 2em 0;
+}
+
+figcaption {
+  font-style: italic;
+}
+
+img,
+svg,
+video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 3px;
+}
+
+video,
+audio {
+  width: 100%;
+}
+
+summary {
+  cursor: pointer;
+}
+
+pre,
+fieldset,
+input,
+textarea {
+  border: 1px solid #dfdfdf;
+  border-radius: 3px;
+}
+
+pre {
+  --grvsc-padding-h: 1em;
+  --grvsc-border-radius: 3px;
+  --grvsc-line-highlighted-background-color: #eee;
+}
+
+legend + pre {
+  --grvsc-padding-v: 0;
+  --grvsc-padding-h: 0;
+  border: none;
+  margin: 0;
+}
+
+pre code {
+  font-size: 0.75em;
+}
+
+legend {
+  font-weight: bold;
+}
+
+input,
+textarea {
+  padding: 0.25em;
+}
+
+textarea {
+  box-sizing: border-box;
+  width: 100%;
+  resize: none;
+}