card view, minor css bugfixes

vue/src/components/RssFeeds.vue

@@ -10,6 +10,8 @@ const {
   showModal,
   viewMode,
   currentIndex,
+  leaveArticleView,
+  layout,
   nextArticle,
   prevArticle,
   fetchData,
@@ -38,7 +40,7 @@ onMounted(async () => {
   <div>
     <div v-if="showMessage" class="message">{{ message }}</div>
 
-    <div v-if="viewMode === 'list'" id='article' class='article'>
+    <div v-if="viewMode === 'list'" id='article' class='article' :class="{ 'article--cards': layout === 'cards' }">
       <p v-if="feeds.length == 0">No unread articles.</p>
       <template v-for="(   feed, index   ) in    feeds   ">
         <div v-bind:id="index" class="observe">
@@ -48,13 +50,13 @@ onMounted(async () => {
           <p v-if="!feed.readable" class="feed-original-link">
             <a :href="feed.url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
           </p>
-          <p class="feed-content" v-html='feed.content'></p>
+          <p class="feed-content" :class="{ 'feed-content--clamped': layout === 'cards' && !feed.readable }" v-html='feed.content'></p>
         </div>
       </template>
     </div>
 
     <div v-else class="article-single">
-      <button type="button" class="article-single__back" @click="viewMode = 'list'">&larr; Back to list</button>
+      <button type="button" class="article-single__back" @click="leaveArticleView">&larr; Back to list</button>
       <p v-if="feeds.length == 0">No unread articles.</p>
       <template v-else>
         <p class="feed-source">{{ feeds[currentIndex].feedTitle }}</p>
@@ -87,6 +89,46 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.article--cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  align-items: start;
+  gap: 1rem;
+}
+
+.article--cards .observe {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-background-soft);
+}
+
+.article--cards .feed-title {
+  border-bottom: none;
+}
+
+.article--cards h3 {
+  margin: 0;
+  padding: 0 1em 0.5em;
+}
+
+.article--cards .feed-content {
+  flex: 1;
+}
+
+.article--cards .feed-content--clamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.article--cards .feed-content img {
+  display: none;
+}
+
 .feed-original-link a {
   display: inline-flex;
   align-items: center;