From c19aba70d8cf6cb5037b0fd56b0449f55f120572 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20Miko=C5=82ajczak?= <me@m4sk.in>
Date: Fri, 21 Jul 2017 14:42:12 +0200
Subject: [PATCH] Improved look
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Marcin Mikołajczak <me@m4sk.in>
---
 static/github-logo.svg |   7 +++
 static/index.html      |  13 ++++-
 static/stylesheet.css  | 130 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 147 insertions(+), 3 deletions(-)
 create mode 100644 static/github-logo.svg
 create mode 100644 static/stylesheet.css
diff --git a/static/github-logo.svg b/static/github-logo.svg
new file mode 100644
index 0000000..9a088ed
--- /dev/null
+++ b/static/github-logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="1024" height="998.752" viewBox="0, 0, 1024, 998.752">
+  <g id="Layer_1" transform="translate(0, 0)">
+    <path d="M512,-0 C229.25,-0 0,229.25 0,512 C0,738.25 146.688,930.125 350.156,997.812 C375.75,1002.5 385.094,986.687 385.094,973.187 C385.094,960.999 384.625,920.625 384.375,877.875 C242,908.812 211.906,817.5 211.906,817.5 C188.594,758.375 155.062,742.625 155.062,742.625 C108.531,710.875 158.592,711.5 158.592,711.5 C209.998,715.062 237.062,764.25 237.062,764.25 C282.75,842.5 356.937,819.875 386.062,806.75 C390.716,773.75 403.966,751.125 418.562,738.375 C304.906,725.438 185.344,681.5 185.344,485.312 C185.344,429.374 205.313,383.75 238,347.906 C232.781,334.906 215.156,282.812 243.062,212.344 C243.062,212.344 286,198.594 383.874,264.844 C424.686,253.438 468.468,247.813 511.999,247.625 C555.499,247.813 599.311,253.5 640.187,264.906 C737.875,198.594 780.875,212.406 780.875,212.406 C808.875,282.937 791.25,334.968 786,347.906 C818.812,383.75 838.625,429.375 838.625,485.312 C838.625,682 718.875,725.312 604.813,738 C623.251,753.875 639.563,785 639.563,832.75 C639.563,901.188 638.875,956.375 638.875,973.25 C638.875,986.875 648.187,1002.812 674.125,997.812 C877.438,930 1024,738.125 1024,512 C1024,229.25 794.75,-0 512,-0 z" fill="#FFFFFF"/>
+  </g>
+</svg>
diff --git a/static/index.html b/static/index.html
index 394aa45..79d25fd 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,10 +1,15 @@
-<html><head>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
 	<title>Mastofeed - embeddable Mastodon feeds</title>
+    <link rel="stylesheet" href="./stylesheet.css">
 </head>
 <body>
+<br>
+<div>
 <h1>Mastofeed</h1>
 <h4>Embedded Mastodon feeds for blogs etc.</h4>
-<a href="https://github.com/fenwick67/mastofeed">Fork on Github</a><br>
+<a href="https://github.com/fenwick67/mastofeed" class="cta button alt">Fork on Github <img class="link-logo after" src="github-logo.svg" alt="Github Logo" data-reactid="19"></a><br>
 <br><hr><br>
 <form action="javascript:genUrl()">
 	<label>Instance URL:<input required type="text" id="urlin" placeholder="octodon.social"></label><br>
@@ -25,8 +30,10 @@
 <br>
 <label>Use this markup in your HTML: <br><textarea id="result" placeholder="result will go here"></textarea></label>
 <br>
-<h4>Live Preview:</h4>
+<h3>Live Preview:</h3>
 <iframe id="frame" allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800" src="/api/feed?url=https%3A%2F%2Foctodon.social%2Fusers%2Ffenwick67.atom&theme=dark&size=100&header=true"></iframe>
+<br>
+</div>
 <script>
 window.genUrl = function genUrl(){
 	function val(id){
diff --git a/static/stylesheet.css b/static/stylesheet.css
new file mode 100644
index 0000000..40145d7
--- /dev/null
+++ b/static/stylesheet.css
@@ -0,0 +1,130 @@
+/*
+ * Based on .css file from https://joinmastodon.org (by Gargron and latrani)
+ */
+
+@import url(https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:500|Roboto:400,500);
+@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
+a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
+body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
+dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
+h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li,
+mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small,
+span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead,
+time, tr, tt, u, ul, var, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup,
+menu, nav, section {
+    display: block
+}
+
+a {
+    outline: 0
+}
+
+label, h3 {
+    color: #607ea7;
+    margin-bottom: 26px
+    font-size: 16px;
+    line-height: 24px
+}
+
+body {
+    text-rendering: optimizelegibility;
+    -webkit-font-feature-settings: "kern";
+    font-feature-settings: "kern";
+    -webkit-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    text-size-adjust: none
+    box-sizing: border-box;
+    font-family: Roboto, sans-serif;
+    background-color: #1f232b;
+    color: #5f6b84;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 400
+}
+
+h1 {
+    font-family: Montserrat, sans-serif;
+    font-size: 26px;
+    margin-bottom: 20px
+}
+
+button {
+    background: transparent;
+    border: 1px solid #9baec8;
+    padding: 3px 15px;
+    color: #9baec8;
+    margin-left: 4px
+    font-weight: 500;
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
+}
+
+button:hover {
+    background-color: #b5c3d6
+}
+
+input[type="text"], input[type="number"] {
+    outline: 0;
+    box-sizing: border-box;
+    border-radius: 4px;
+    display: block;
+    width: 100%;
+    border: none;
+    padding: 10px;
+    padding-right: 30px;
+    font-family: inherit;
+    background: #0e1013;
+    color: #9baec8;
+    font-size: 14px;
+    margin: 0
+}
+
+h4 {
+    font-family: Montserrat, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 20px;
+    color: #9baec8
+}
+
+img {
+    width: 16px;
+    height: 16px;
+    opacity: .5;
+    -webkit-transition: opacity .25s linear;
+    transition: opacity .25s linear
+}
+
+div {
+    max-width: 800px;
+    margin: 0 auto
+}
+
+iframe {
+    float: middle;
+}
+
+a {
+    display: inline-block;
+    text-align: center;
+    font-size: 16px;
+    text-decoration: none;
+    line-height: 36px;
+    padding: 4px 16px;
+    background: transparent;
+    border: 1px solid #9baec8;
+    border-radius: 4px;
+    padding: 3px 15px;
+    color: #9baec8;
+    margin-left: 4px
+}
+
