Enhance mobile view (#6)

* Add SVG favicon and webapp manifest

* Word wrap the urls

* Add id and start url in webapp manifest

* Shrink feed url size

* Remove emoji from page title
This commit is contained in:
Carter McBride 2024-06-19 14:43:01 -06:00 committed by GitHub
parent 50a0c2fb7e
commit 048e3fcde7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 39 additions and 3 deletions

View file

@ -6,11 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>📰 Carter's RSS Feeds</title> <title>📰 Carter's RSS Feeds</title>
<link rel="icon" href="news-emoji.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="manifest" href="manifest.json" />
</head> </head>
<body> <body>
<h1>📰 Carter's RSS Feeds</h1> <h1>Carter's RSS Feeds</h1>
{% for group, feeds in data %} {% for group, feeds in data %}
<h2>{{ group }}</h2> <h2>{{ group }}</h2>
@ -33,7 +35,7 @@
{% endfor %} {% endfor %} {% if errors | length > 0 %} {% endfor %} {% endfor %} {% if errors | length > 0 %}
<h2>Errors</h2> <h2>Errors</h2>
<p>There were errors trying to parse these feeds:</p> <p>There were errors trying to parse these feeds:</p>
<ul> <ul class="errors">
{% for error in errors %} {% for error in errors %}
<li>{{ error }}</li> <li>{{ error }}</li>
{% endfor %} {% endfor %}

15
public/manifest.json Normal file
View file

@ -0,0 +1,15 @@
{
"name": "Carter's RSS Feeds",
"short_name": "Carter's RSS Feeds",
"start_url": "/",
"display": "standalone",
"background_color": "#FCF5E4",
"theme_color": "#FCF5E4",
"description": "Updates from RSS feeds that Carter likes",
"id": "/",
"icons": [{
"sizes": "any",
"src": "news-emoji.svg",
"type": "image/svg+xml"
}]
}

8
public/news-emoji.svg Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-10 0 2610 2048">
<path fill="currentColor"
d="M337 1838q-61 -44 -86.5 -109t-30.5 -134t-5 -124v-1433h1992v100h178v1333q0 55 -5 124t-30.5 134t-86.5 109h-1926zM501 1738q-27 -23 -31.5 -59t-4.5 -68v-416h952v416q0 32 4.5 68t31.5 59h-952zM465 1015v-240h400v240h-400zM1597 1594v-80h400v80h-400zM1025 1015
v-80h400v80h-400zM374 1738h1773q-30 -65 -35 -137t-5 -130v-1333h-1792v1333q0 74 7.5 147t51.5 120zM1597 1434v-80h400v80h-400zM1025 855v-80h400v80h-400zM1597 1274v-80h400v80h-400zM1597 1015v-80h400v80h-400zM1597 855v-80h400v80h-400zM2255 1694
q23 -47 26.5 -105.5t3.5 -117.5v-1233h-78v1233q0 52 6 106.5t42 116.5zM1230 620q72 0 125.5 -53.5t53.5 -125.5q0 -74 -53 -127t-126 -53t-126 53t-53 127q0 73 53 126t126 53zM465 600h522v-299h-522v299zM1995 600v-299h-522v299h522z" />
</svg>

After

Width:  |  Height:  |  Size: 1,018 B

View file

@ -12,6 +12,11 @@ body {
color: var(--color-text); color: var(--color-text);
} }
.inline-icon {
height: 1em;
vertical-align: text-bottom;
}
summary { summary {
cursor: pointer; cursor: pointer;
} }
@ -37,11 +42,17 @@ details:has(li.has-recent) {
} }
} }
details,
.errors li {
word-break: break-all;
}
.feed-url { .feed-url {
color: #aaa; color: #aaa;
} }
.article-timestamp { .article-timestamp,
.feed-url {
font-size: 0.75em; font-size: 0.75em;
} }