From 048e3fcde7c2536f9eb54fac9e15647b02e4f455 Mon Sep 17 00:00:00 2001
From: Carter McBride <18412686+carterworks@users.noreply.github.com>
Date: Wed, 19 Jun 2024 14:43:01 -0600
Subject: [PATCH] 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
---
 config/template.html  |  6 ++++--
 public/manifest.json  | 15 +++++++++++++++
 public/news-emoji.svg |  8 ++++++++
 public/style.css      | 13 ++++++++++++-
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 public/manifest.json
 create mode 100644 public/news-emoji.svg
diff --git a/config/template.html b/config/template.html
index d9e624f..021f6cc 100644
--- a/config/template.html
+++ b/config/template.html
@@ -6,11 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <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="manifest" href="manifest.json" />
 </head>
 
 <body>
-  <h1>📰 Carter's RSS Feeds</h1>
+  <h1>Carter's RSS Feeds</h1>
 
   {% for group, feeds in data %}
   <h2>{{ group }}</h2>
@@ -33,7 +35,7 @@
   {% endfor %} {% endfor %} {% if errors | length > 0 %}
   <h2>Errors</h2>
   <p>There were errors trying to parse these feeds:</p>
-  <ul>
+  <ul class="errors">
     {% for error in errors %}
     <li>{{ error }}</li>
     {% endfor %}
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..a76f469
--- /dev/null
+++ b/public/manifest.json
@@ -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"
+  }]
+}
diff --git a/public/news-emoji.svg b/public/news-emoji.svg
new file mode 100644
index 0000000..1746fc4
--- /dev/null
+++ b/public/news-emoji.svg
@@ -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>
diff --git a/public/style.css b/public/style.css
index 9ea2d7e..20982a2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -12,6 +12,11 @@ body {
   color: var(--color-text);
 }
 
+.inline-icon {
+  height: 1em;
+  vertical-align: text-bottom;
+}
+
 summary {
   cursor: pointer;
 }
@@ -37,11 +42,17 @@ details:has(li.has-recent) {
   }
 }
 
+details,
+.errors li {
+  word-break: break-all;
+}
+
 .feed-url {
   color: #aaa;
 }
 
-.article-timestamp {
+.article-timestamp,
+.feed-url {
   font-size: 0.75em;
 }
 
