Merge pull request #6 from m4sk1n/master

@m4sk1n thanks for this
2017-08-07 15:38:51 -05:00 · 2017-08-07 15:38:51 -05:00 · 29843abda7
commit 29843abda7
parent 09a09eb65d c19aba70d8
3 changed files with 147 additions and 3 deletions
--- a/static/github-logo.svg
+++ 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>
--- 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){
--- a/static/stylesheet.css
+++ 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
+}
+