forked from sam/fedifeed
Improved look
Signed-off-by: Marcin Mikołajczak <me@m4sk.in>
This commit is contained in:
Marcin Mikołajczak
parent
09a09eb65d
commit
c19aba70d8
3 changed files with 147 additions and 3 deletions
7
static/github-logo.svg
Normal file
7
static/github-logo.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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){
|
||||
|
|
|
|||
130
static/stylesheet.css
Normal file
130
static/stylesheet.css
Normal file
|
|
@ -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
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue