rewriting the template to make the page mobile-proof + adding short descriptions + new color scheme

This commit is contained in:
manetta 2021-02-23 12:59:10 +01:00
parent 8ca8bdd0ed
commit 9c02d34f02
4 changed files with 174 additions and 56 deletions

View File

@ -16,11 +16,10 @@ def update():
parsed = feedparser.parse(feed) parsed = feedparser.parse(feed)
x = str(x) x = str(x)
print(parsed)
tmp['feeds'][x] = {} tmp['feeds'][x] = {}
tmp['feeds'][x]['title'] = parsed.feed.title tmp['feeds'][x]['title'] = parsed.feed.title
tmp['feeds'][x]['link'] = parsed.feed.link tmp['feeds'][x]['link'] = parsed.feed.link
tmp['feeds'][x]['rss'] = parsed.entries[0].title_detail.base
tmp['feeds'][x]['description'] = parsed.feed.description tmp['feeds'][x]['description'] = parsed.feed.description
for post in parsed.entries: for post in parsed.entries:
@ -35,6 +34,7 @@ def update():
post['feed_details'] = {} post['feed_details'] = {}
post['feed_details']['title'] = parsed.feed.title post['feed_details']['title'] = parsed.feed.title
post['feed_details']['link'] = parsed.feed.link post['feed_details']['link'] = parsed.feed.link
post['feed_details']['rss'] = parsed.entries[0].title_detail.base
post['feed_details']['description'] = parsed.feed.description post['feed_details']['description'] = parsed.feed.description
tmp['all_posts_sorted'][str(post_date)].append(post) tmp['all_posts_sorted'][str(post_date)].append(post)

View File

@ -1,6 +1,6 @@
body{ body{
background-color: pink; background-color: #e1cfd9;
/*color: red;*/ color: #7137c8ff;
margin: 1em; margin: 1em;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
@ -12,38 +12,64 @@ h1#title{
margin: 1em auto; margin: 1em auto;
} }
h1#title img{ h1#title img{
width: 500px; width: 90%;
max-width: 500px;
}
h1{
text-align: center;
margin: 3em auto 0;
} }
h2{ h2{
margin: 0 0 1em; margin: 0 0 1em;
} }
table{ div.add{
table-layout: fixed; color: blue;
width: 100%; margin: 2em auto;
border-collapse: collapse; text-align: center;
}
table tr{
border-bottom: 20px solid white;
}
table td{
padding: 1em 2em;
vertical-align: top;
}
table td:first-of-type{
width: 100px;
} }
section#feeds{
margin: 5em 0;
text-align: center;
}
section#feeds div.feed{
padding: 1em 2em;
border-bottom: 20px solid white;
}
section#feeds div.feed.el0{
border-top: 20px solid white;
}
section#feeds div.feed div{
margin: 1em auto;
}
section#feeds div.feed div.description{
max-width: 400px;
}
section#api{ section#api{
margin: 6em 0em; margin: 5em 0;
color: fuchsia;
} }
section#api div.accesspoint{ section#api div.accesspoint{
margin: 0; padding: 1em 2em;
padding: 1em 2em; border-bottom: 20px solid #aa87deff;
border-bottom: 20px solid black; }
section#api div.accesspoint:first-of-type{
border-top: 20px solid #aa87deff;
}
footer{
font-size: small;
text-align: center;
margin: 3em 0;
} }
p{
color: blue;
font-size: small;
margin: 2em auto 3em;
max-width: 400px;
}
a, a,
a:active, a:active,
a:visited, a:visited,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 143 KiB

View File

@ -4,31 +4,27 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>multifeeder</title> <title>multifeeder</title>
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css"> <link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<h1 id="title"> <h1 id="title">
<img src="/img/multifeeder.svg"> <img src="/img/multifeeder.svg">
</h1> </h1>
<div align="center">(<a href="https://git.vvvvvvaria.org/varia/multifeeder/src/branch/master/feeds.txt" target="_blank">Add a feed</a>)</div> <div class="add">(<a href="https://git.vvvvvvaria.org/varia/multifeeder/src/branch/master/feeds.txt" target="_blank">Add a feed</a>)</div>
<div align="center">Currently feeding:</div> <section id="feeds">
<br> <h1>Currently feeding</h1>
<br> <p>The following feeds are rendered in the Multifeeder. The feeds in this list include streams of projects and activities in and around Varia.</p>
<table>
<tbody>
{% for x, feed in db['feeds'].items() %} {% for x, feed in db['feeds'].items() %}
<tr> <div class="feed el{{ x }}">
<td class="title">{{ feed.title }}</td> <div class="title">{{ feed.title }}</div>
<td class="link"><a href="{{ feed.link }}" target="_blank">{{ feed.link }}</a></td> <div class="description">{{ feed.description }}</div>
<td class="description">{{ feed.description }}</td> <div class="rss"><a href="{{ feed.rss }}" target="_blank">{{ feed.rss }}</a></div>
</tr> </div>
{% endfor %} {% endfor %}
</tbody> </section>
</table>
<br>
<br>
<section id="api"> <section id="api">
<h1>Aggregated Publishing Interface (API)</h1>
<p>This is the Multifeeder API :---), an Aggregated Publishing Interface supporting any kinds of publishing experiments. Currently the API is used to feed <a href="https://televex.vvvvvvaria.org">Varia's TeleVex</a>.</p>
<div class="accesspoint"> <div class="accesspoint">
<h2>/API/latest/[num]</h2> <h2>/API/latest/[num]</h2>
For example: <a href="/API/latest/5" target="_blank">https://multi.vvvvvvaria.org/API/latest/5</a> For example: <a href="/API/latest/5" target="_blank">https://multi.vvvvvvaria.org/API/latest/5</a>
@ -54,5 +50,8 @@
Format: JSON Format: JSON
</div> </div>
</section> </section>
<footer>
<div>Multifeeding RSS streams into a point of access.</div>
<a href="https://git.vvvvvvaria.org/varia/multifeeder" target="_blank">https://git.vvvvvvaria.org/varia/multifeeder</a></footer>
</body> </body>
</html> </html>