Various CSS tweaks and optimizations

Prevent sub and sup from affecting line-height.

Set touch-action on .items to prevent browser navigation.

Move font-family specific CSS to the appropriate file.

Update primary font-family for UI to be even more
compatible with various operating systems.

Make .entry-content font-weight variable depending
on font-family used.

ui/static/css/common.css

@@ -735,6 +735,7 @@ a.button {
 
 .items {
     overflow-x: hidden;
+    touch-action: pan-y;
 }
 
 .hide-read-items .item-status-read:not(.current-item) {
@@ -836,7 +837,7 @@ article.feed-parsing-error {
 .entry-content {
     padding-top: 15px;
     font-size: 1.2em;
-    font-weight: 300;
+    font-weight: var(--entry-content-font-weight);
     font-family: var(--entry-content-font-family);
     color: var(--entry-content-color);
     line-height: 1.4em;
@@ -962,6 +963,22 @@ article.feed-parsing-error {
     font-weight: 600;
 }
 
+.entry-content sub,
+.entry-content sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+.entry-content sub {
+    bottom: -0.25em;
+}
+
+.entry-content sup {
+    top: -0.5em;
+}
+
 details.entry-enclosures {
     margin-top: 25px;
 }

ui/static/css/dark.css

@@ -1,5 +1,5 @@
 :root {
-    --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --body-color: #efefef;
     --body-background: #222;
     --hr-border-color: #555;
@@ -94,7 +94,6 @@
     --entry-content-code-background: #555;
     --entry-content-code-border-color: #888;
     --entry-content-quote-color: #777;
-    --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
     --entry-enclosure-border-color: #333;
 
     --parsing-error-color: #eee;

ui/static/css/light.css

@@ -1,5 +1,5 @@
 :root {
-    --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --body-color: #333;
     --body-background: #fff;
     --hr-border-color: #ccc;
@@ -94,7 +94,6 @@
     --entry-content-code-background: #f0f0f0;
     --entry-content-code-border-color: #ddd;
     --entry-content-quote-color: #666;
-    --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
     --entry-enclosure-border-color: #333;
 
     --parsing-error-color: #333;

ui/static/css/sans_serif.css

@@ -1,3 +1,5 @@
 :root {
-    --entry-content-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+    --entry-content-font-weight: 400;
+    --entry-content-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --entry-content-quote-font-family: var(--entry-content-font-family);
 }

ui/static/css/serif.css

@@ -1,3 +1,5 @@
 :root {
+    --entry-content-font-weight: 300;
     --entry-content-font-family: Georgia, 'Times New Roman', Times, serif;
+    --entry-content-quote-font-family: var(--entry-content-font-family);
 }

ui/static/css/system.css

@@ -1,5 +1,5 @@
 :root {
-    --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --body-color: #333;
     --body-background: #fff;
     --hr-border-color: #ccc;
@@ -93,7 +93,6 @@
     --entry-content-code-background: #f0f0f0;
     --entry-content-code-border-color: #ddd;
     --entry-content-quote-color: #666;
-    --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
     --entry-enclosure-border-color: #333;
 
     --parsing-error-color: #333;
@@ -106,7 +105,6 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
         --body-color: #efefef;
         --body-background: #222;
         --hr-border-color: #555;
@@ -200,7 +198,6 @@
         --entry-content-code-background: #555;
         --entry-content-code-border-color: #888;
         --entry-content-quote-color: #777;
-        --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
         --entry-enclosure-border-color: #333;
 
         --parsing-error-color: #eee;