minor edits

static/less/articles.less

@@ -86,12 +86,12 @@ rr-item-articles {
 		gap: 8px;
 	}
 
-	.text {
+	> div {
 		overflow: hidden;
 		flex: 1 1 calc(100% - var(--picture-width) - var(--h-gap));
 	}
 
-	.picture {
+	picture {
 		width: 120px;
 		height: 80px;
 		text-align: right;

static/ts/ui/articles.ts

@@ -192,9 +192,9 @@ class Item extends HTMLElement {
 		this.read = this.data.read;
 
 		this.append(buildHeader(this.data), buildText(this.data));
-
-		let img = buildImage(this.data);
-		img && this.append(img);
+		if (this.data.image_url && settings.getItem("showImages")) {
+			this.append(buildPicture(this.data.image_url));
+		}
 
 		pubsub.subscribe("articles-updated", this);
 	}
@@ -227,7 +227,6 @@ function buildHeader(article: types.Article) {
 
 function buildText(article: types.Article) {
 	let node = document.createElement("div");
-	node.className = "text";
 
 	let title = document.createElement("h3");
 	title.textContent = article.title;
@@ -240,19 +239,12 @@ function buildText(article: types.Article) {
 	return node;
 }
 
-function buildImage(article: types.Article) {
-	if (!article.image_url) { return; }
-	if (!settings.getItem("showImages")) { return; }
-
-	let node = document.createElement("div");
-	node.className = "picture";
-
+function buildPicture(image_url: string) {
+	let node = document.createElement("picture");
 	let img = new Image();
-	img.src = article.image_url;
+	img.src = image_url;
 	img.loading = "lazy";
-
 	node.append(img);
-
 	return node;
 }
 

static/ts/ui/detail.ts

@@ -20,6 +20,11 @@ const BODY_CSS = `
 		height: auto !important;
 	}
 
+	iframe, video {
+		width: 100%;
+		aspect-ratio: 16/9;
+	}
+
 	br { display: none; }
 `;
 
@@ -31,7 +36,7 @@ export default class Detail extends HTMLElement {
 	set article(data: types.Article) {
 		let article = new Article(data);
 		this.replaceChildren(article, new Tools(article), buildCloseButton(this.app));
-		await articles.markRead([data.id]);
+		articles.markRead([data.id]);
 	}
 }
 
@@ -151,6 +156,7 @@ function buildBody(article: types.Article, content?: string) {
 	shadow.querySelectorAll("img").forEach(elm => elm.loading = "lazy");
 	shadow.querySelectorAll("a").forEach(elm => elm.target = "_blank");
 	shadow.querySelectorAll("[style]").forEach(elm => elm.removeAttribute("style"));
+	shadow.querySelectorAll("[class]").forEach(elm => elm.removeAttribute("class"));
 
 	return node;
 }