Inline article list CSS

Author: twm

css/ListArticle.css

@@ -284,7 +284,6 @@ textarea[readonly] {
 @import "./Article.css";
 @import "./GlobalBar.css";
 @import "./icons.css";
-@import "./ListArticle.css";
 @import "./StateToggle.css";
 @import "./Tabs.css";
 @import "./FeedView.css";

css/main.css

@@ -1,3 +1,93 @@
+<style nonce="{{ csp_nonce }}">
+
+.list-article {
+    margin: 0.75rem 0;
+}
+
+.list-article-inner {
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+.list-article-slider {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+    --focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */
+
+    .outbound {
+        padding: calc(2 * var(--button-border-width));
+        flex: 1 1 100%;
+        width: 100%;
+        display: grid;
+        /* XXX: Using grid here is starting to look a little silly. */
+        grid-template-areas:
+            "meta1"
+            "meta2";
+        grid-template-rows: 1fr 1fr;
+        gap: 0.5rem;
+
+        text-decoration: none;
+        /* We set the color on the container to set the color of the ellipsis generated by text-overflow. */
+        color: var(--quiet-text-color);
+
+        .meta1 {
+            grid-area: meta1;
+            color: var(--quiet-text-color);
+            text-transform: uppercase;
+            font-size: smaller;
+        }
+        .meta2 {
+            grid-area: meta2;
+        }
+        .meta1,
+        .meta2 {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .title {
+            color: var(--text-color);
+        }
+        .snippet {
+            color: var(--quiet-text-color);
+            padding-left: 0.5rem;
+        }
+    }
+
+    read-toggle,
+    .view-link {
+        flex: 0 0 var(--bar-height);
+    }
+    read-toggle {
+        button {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .view-link {
+    }
+
+    .outbound-icon,
+    read-toggle button,
+    .view-link {
+        font-size: var(--icon-size);
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+            flex: 0 0 auto;
+            display: block;
+            align-self: center;
+            justify-self: center;
+        }
+    }
+
+}
+</style>
+
 {% for article in articles %}
 <div class="list-article">
   <div class="list-article-inner">