Mastodon
/
mastofeed-iframe-embed
mirror of https://github.com/fenwick67/mastofeed
1
0
Fork 0
Code Issues Releases Wiki Activity

add light theme

This commit is contained in:
fenwick67 2017-04-30 14:44:32 -05:00
parent 4ef12a4253
commit 21abbc8281
4 changed files with 136 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.js
View File

@ -16,9 +16,15 @@ app.get('/api/feed',function(req,res){
}
var opts = {};
if (req.query.size){
opts.size = req.query.size;
}
if (req.query.theme){
opts.theme = req.query.theme;
}
var req = request.get(feedUrl);
convert(req,{},function(er,data){
convert(req,opts,function(er,data){
if (er){
res.status(500);
res.send('error fetching or parsing feed');

11
lib/convert.js
View File

@ -10,8 +10,8 @@ module.exports = function(stream,opts,callback){
var callback = callback;
var opts = opts;
if (typeof opts == 'function'){
callback = opts;
opts = {};
callback = opts;
opts = {};
}
// convert s from atom feed to a full html page for rendering
@ -19,7 +19,7 @@ module.exports = function(stream,opts,callback){
if (er) {
return callback(er);
}
callback(null,buildUp(data));
callback(null,buildUp(data,opts));
});
}
@ -60,7 +60,10 @@ function breakDown(stream,callback){
}
// hydrate the json to html
function buildUp(jsonObj){
function buildUp(jsonObj,opts){
// assign opts to the obj
jsonObj.opts = opts||{};
// add some links to the item for avatar et cetera
jsonObj.items.forEach(function(item){

13
lib/template.ejs
View File

@ -2,7 +2,20 @@
<head>
<meta charset="UTF-8"></meta>
<style type="text/css"></style>
<% if (opts.theme && opts.theme.toLowerCase() == 'light'){ %>
<link rel="stylesheet" href="/light.css"></link>
<% } else { %>
<link rel="stylesheet" href="/dark.css"></link>
<% } %>
<% if (opts.size){ %>
<style type="text/css">
html,body{
font-size: <%= opts.size.toString().slice(0,4) %>%;
}
</style>
<% } %>
</head>
<body>
<div class="meta">

86
static/light.css Normal file
View File

@ -0,0 +1,86 @@
html,
body {
background-color: #fff;
font-family: Roboto, sans-serif;
color: #000;
font-weight: light;
overflow-x: hidden;
font-size: 100%;
}
* {
margin: 0;
padding: 0;
}
a,
a * {
color: #09c;
}
.meta {
padding: 1rem;
background-color: #f0f0f0;
}
.meta * {
line-height: 2rem;
}
.item {
padding: 1rem;
border-top: solid 2px #d6d6d6;
}
.item-content,
.description,
.title {
font-size: 1.2rem;
}
.item-content {
max-width: 750px;
}
.item-content p {
margin: 0.5em 0;
}
.item-title,
.date,
.author-fullname,
.description {
color: #808080;
font-size: 0.9rem;
}
.author {
display: flex;
margin: 1rem 0;
}
.author-info {
margin: 0 1rem;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.author-info .author-displayname {
font-size: 1.2rem;
color: #000;
text-decoration: none;
display: block;
font-weight: bolder;
}
.avatar {
width: 3rem;
height: 3rem;
border: none;
border-radius: 10%;
}
.enclosures {
padding: 0.5em 0;
display: flex;
flex-direction: row;
max-height: 12rem;
max-width: 42rem;
overflow: hidden;
}
.enclosure,
.enclosure > img {
flex: 0 1 1;
display: inline-block;
border: none;
cursor: zoom-in;
max-height: 12rem;
max-width: 42rem;
}