diff --git a/docs/configuration.md b/docs/configuration.md
index 0944e67..06701d2 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -446,6 +446,7 @@ Preview:
| ---- | ---- | -------- | ------- |
| channels | array | yes | |
| limit | integer | no | 25 |
+| style | string | no | horizontal-cards |
| video-url-template | string | no | https://www.youtube.com/watch?v={VIDEO-ID} |
##### `channels`
@@ -460,6 +461,13 @@ Then scroll down and click on "Share channel", then "Copy channel ID":
##### `limit`
The maximum number of videos to show.
+##### `style`
+Used to change the appearance of the widget. Possible values are `horizontal-cards` and `grid-cards`.
+
+Preview of `grid-cards`:
+
+
+
##### `video-url-template`
Used to replace the default link for videos. Useful when you're running your own YouTube front-end. Example:
diff --git a/docs/images/videos-widget-grid-cards-preview.png b/docs/images/videos-widget-grid-cards-preview.png
new file mode 100644
index 0000000..5c4f109
Binary files /dev/null and b/docs/images/videos-widget-grid-cards-preview.png differ
diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css
index 27e8aa7..a1d47b8 100644
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -329,23 +329,36 @@ body {
--cards-per-row: 6.5;
}
-.cards-grid {
- --cards-per-row: 6;
-}
-
-.cards-horizontal, .cards-vertical, .cards-grid {
+.cards-horizontal, .cards-vertical {
--cards-gap: calc(var(--widget-content-vertical-padding) * 0.7);
display: flex;
gap: var(--cards-gap);
}
+.card {
+ display: flex;
+ flex-direction: column;
+}
+
+.cards-horizontal .card {
+ flex-shrink: 0;
+ width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
+}
+
+.cards-grid .card {
+ min-width: 0;
+}
+
.cards-horizontal {
overflow-x: auto;
padding-bottom: 1rem;
}
.cards-grid {
- flex-wrap: wrap;
+ --cards-per-row: 6;
+ display: grid;
+ grid-template-columns: repeat(var(--cards-per-row), 1fr);
+ gap: calc(var(--widget-content-vertical-padding) * 0.7);
}
@container widget (max-width: 1300px) { .cards-horizontal { --cards-per-row: 5.5; } }
@@ -361,12 +374,7 @@ body {
@container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } }
@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } }
-.card {
- flex-shrink: 0;
- width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
- display: flex;
- flex-direction: column;
-}
+
.widget-error-header {
display: flex;
diff --git a/internal/assets/templates.go b/internal/assets/templates.go
index fe82ed5..6328463 100644
--- a/internal/assets/templates.go
+++ b/internal/assets/templates.go
@@ -22,7 +22,8 @@ var (
RedditCardsHorizontalTemplate = compileTemplate("reddit-horizontal-cards.html", "widget-base.html")
RedditCardsVerticalTemplate = compileTemplate("reddit-vertical-cards.html", "widget-base.html")
ReleasesTemplate = compileTemplate("releases.html", "widget-base.html")
- VideosTemplate = compileTemplate("videos.html", "widget-base.html")
+ VideosTemplate = compileTemplate("videos.html", "widget-base.html", "video-card-contents.html")
+ VideosGridTemplate = compileTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html")
StocksTemplate = compileTemplate("stocks.html", "widget-base.html")
RSSListTemplate = compileTemplate("rss-list.html", "widget-base.html")
RSSCardsTemplate = compileTemplate("rss-cards.html", "widget-base.html")
diff --git a/internal/assets/templates/video-card-contents.html b/internal/assets/templates/video-card-contents.html
new file mode 100644
index 0000000..3bfd234
--- /dev/null
+++ b/internal/assets/templates/video-card-contents.html
@@ -0,0 +1,12 @@
+{{ define "video-card-contents" }}
+
+