Move style.js to its own file; clean up theme

2 files changed, 129 insertions, 146 deletions

@@ -0,0 +1,29 @@
+/* Make a "Hide/Show Stale Items" button */
+
+var staleHidden = false;
+var staleItems = new Set(document.getElementsByClassName("stale"));
+var staleFeeds = new Set(document.getElementsByClassName("stale_feed"));
+var feedlistFeeds = new Set(document.getElementById("feedlist").children);
+
+function hideShowStale(){
+    var display;
+    if (staleHidden) {
+        display = null; staleHidden = false;
+        flBG = null; flBB = null;
+    } else {
+        display = 'none'; staleHidden = true;
+        flBG = 'inherit'; flBB = '1px solid';
+    }
+    staleItems.forEach(e => { e.style.display = display; });
+    staleFeeds.forEach(e => { e.style.display = display; });
+    if (window.innerWidth > 720) {
+        feedlistFeeds.forEach(e => { e.style.background = flBG; e.style.borderBottom = flBB; });
+    }
+}
+
+var button = document.getElementById("stalebutton");
+button.addEventListener("click", function() {
+    hideShowStale();
+    if (staleHidden) { button.textContent = "show stale"; }
+    else { button.textContent = "hide stale"; }
+});
@@ -1,219 +1,173 @@
 body {
-    background: #888;
+    font: 16px/1.2 sans-serif;
 }
 
 main {
-    position: relative;
     display: flex;
-    flex: column nowrap;
+    flex-flow: row nowrap;
 }
 
 #items {
     max-width: 70ch;
 }
 
-.entries tr {
-    vertical-align: baseline;
+header {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: baseline;
+    justify-content: space-between;
 }
 
-.fresh {
-    font-weight: bold;
+time {
+    font-family: monospace;
 }
 
-td a { padding: 6px; }
+#page-nav {
+    border-bottom: 1px solid;
+    padding-bottom: 4px;
+}
 
-.entry-timestamp {
-    font: 0.9em monospace;
-    padding: 4px;
-    min-width: 10em;
+#last-updated,
+nav,
+footer {
+    font-size: 80%;
+    text-align: right;
 }
 
-#list {
-    padding: 2ch;
+footer {
+    border-top: 1px solid;
+    margin: 1ch 0;
+    padding: 1ch 0;
 }
 
-aside {
-    flex-grow: 1;
+table, .entry-title {
+    width: 100%;
+    border-collapse: collapse;
 }
 
-aside li {
-    list-style: none;
+td.entry-timestamp {
+    font: 50%/1.1 monospace;
     text-align: right;
+    padding: 4px;
 }
 
-aside li:nth-child(even),
-tr:nth-child(even)
-{
-    background: inherit;
+td.entry-extra {
+    font-family: monospace;
+    text-align: right;
+    white-space: nowrap;
 }
 
-aside li:nth-child(odd),
-tr:nth-child(odd)
-{
-    background: #aaa;
+td.entry-extra a,
+nav.flinks a {
+    display: inline-block;
 }
 
-aside a {
-    padding: 2px;
+td {
+    margin: 0; padding: 0;
 }
 
-a { display: block; }
-
-a:link {
-    text-decoration: none;
-    color: black;
-}
-a:visited {
-    color: inherit;
-}
-aside a:visited { font-style: normal; }
-a:hover {
-    background: yellow;
+tr:nth-child(even),
+#feedlist li:nth-child(even)
+{
+    background: white;
 }
-a:active{
-    background: cyan;
+tr:nth-child(odd),
+#feedlist li:nth-child(odd)
+{
+    background: #eee;
 }
 
-header {
-    display: flex;
-    flex: row wrap;
-    margin: 1ch 0;
-    align-items: baseline;
-    justify-content: space-between;
-}
-header h2, header h1 {
-    margin: 0;
+aside li {
+    list-style: none;
 }
-header h2 a { display: inline; }
-header .flinks {
-    font-size: 80%;
-    text-align: right;
-    flex-grow: 1;
+
+.fresh table,
+aside .fresh {
+    font-weight: bold;
 }
 
-body>nav {
-    border-bottom: 1px solid;
-    margin-top: 0;
-    text-align: right;
+a {
+    display: block;
+    padding: 4px 8px;
+    color: inherit;
 }
-body>nav a { display: inline; }
 
-.last-updated {
-    font-style: italic;
-    font-size: 80%;
-    text-align: right;
+a:link {
+    text-decoration: none;
 }
 
-.entries { border-collapse: collapse; }
+a:visited { color: inherit; }
 
-.entries, .entry-title { width: 100%; }
+a:hover {
+    background: yellow;
+}
+
+a:active {
+    background: cyan;
+}
 
-.entry-extra a { color: blue; display: inline; font-family: monospace; }
+.yt a { color: #ff0000; }
+.youtube { border-left: 1px solid #ff0000; }
+.reddit { border-left: 3px double #ff3000; }
+.twitter { border-left: 1px solid #179cf0; }
+.facebook { border-left: 3px double #4267b2; }
 
-.entry-title, .entry-timestamp, .entry-extra {
-    padding: 0; margin: 0; border: none;
+a#logo,
+a.anchor,
+footer a,
+#page-nav a {
+    padding: 0;
+    display: inline;
 }
 
-header a { display: inline; }
+footer a:link {
+    text-decoration: underline;
+}
 
 @media screen and (max-width: 720px) {
+    * { border: none; padding: 0; margin: 0; }
+    .entries, .entry-title { width: 100%; }
     main, header {
         flex-flow: row wrap;
-        padding:0; margin: 0;
     }
-    * { border: none; }
-    .entries, .entry-title { width: 100%; }
-    html, body, #list, #items { padding: 0; margin: 0; max-width: 100%; }
-    header h2, header p { margin: 4px; }
-    aside a { display: inline; }
+    header, nav { padding: 4px; }
     aside {
         padding: 2ch;
         order: 1;
         border-bottom: 1px solid;
     }
-    aside ul { margin: 0; padding: 0; }
-    #list { order: 2; }
     aside li {
         display: inline;
         background: inherit !important;
     }
     aside li::after {
+        content: " //";
         background: inherit;
         font-weight: normal;
-        content: " //";
     }
+     aside a { display: inline; }
     aside li:last-child::after {
         content: "";
     }
+    #list { order: 2; }
     .entry-timestamp {
         display: none;
     }
 }
 
-@media (prefers-color-scheme: light) {
-    body { background: white; color: black; }
-    aside li:nth-child(even),
-    tr:nth-child(even) { background: white; }
-    aside li:nth-child(odd),
-    tr:nth-child(odd) { background: #eee; }
-    a:link { color: black; }
-    a:hover { background: yellow; }
-    a:active { background: cyan; }
-    .entry-extra a { color: blue; }
-}
-
-@media (prefers-color-scheme: dark) {
-    body { background: black; color: white; }
-    aside li:nth-child(even),
-    tr:nth-child(even) { background: black; }
-    aside li:nth-child(odd),
-    tr:nth-child(odd) { background: #222; }
-    a:link { color: white; }
-    a:hover { color: yellow; background: inherit; }
-    a:active { color: cyan; background: inherit; }
-    .entry-extra a { color: cyan; }
-}
-
-@media screen and (max-width: 720px) and (prefers-color-scheme: dark) {
-    aside li { background: black !important; }
-}
-
-@media screen and (max-width: 720px) and (prefers-color-scheme: light) {
-    aside li { background: white !important; }
-}
-
-footer {
-    font-size: 80%;
-    font-style: italic;
-    text-align: right;
-}
-
-footer {
-    border-top: 1px solid;
-    padding: 1ch 0;
-}
-
-footer a:link {
-    display: inline;
-    text-decoration: underline;
-}
-
-.yt a {
-    color: #ff0000;
-}
-
-.youtube {
-    border-left: 1px solid #ff0000;
-}
-
-.reddit {
-    border-left: 3px double #ff3000;
-}
-
-.facebook {
-    border-left: 3px double #4267b2;
-}
-
-.twitter {
-    border-left: 1px solid #179cf0;
+@media screen and (prefers-color-scheme: dark) {
+    body {background: black; color: white; }
+    tr:nth-child(even),
+    #feedlist li:nth-child(even)
+    {
+        background: black;
+    }
+    tr:nth-child(odd),
+    #feedlist li:nth-child(odd)
+    {
+        background: #222;
+    }
+    a:hover {color: yellow; background: inherit;}
+    a:active {color: cyan; background: inherit;}
+    .entry-extra a {color: cyan;}
 }