From 9b66a79a8c83758be5a7a4681c9e027203450823 Mon Sep 17 00:00:00 2001 From: webfussel Date: Thu, 12 Jun 2025 09:08:21 +0200 Subject: [PATCH] add: category, date sorting Add category layouts and date sorting --- app/assets/css/blogCard.css | 24 + app/assets/css/global.css | 4 +- app/components/Blog/Author.vue | 8 +- app/components/Blog/Card.vue | 10 +- app/components/Blog/Category.vue | 24 + app/components/Blog/types.ts | 1 + app/pages/blog/index.vue | 18 +- bun.lock | 2341 ++++ content.config.ts | 7 +- content/blog/0000.start.md | 7 +- content/blog/0001.entry1.md | 6 +- content/blog/0002.entry2.md | 6 +- content/blog/0003.entry3.md | 6 +- content/blog/0004.entry4.md | 18 + package-lock.json | 17696 ----------------------------- package.json | 9 +- server/routes/blog/rss.xml.ts | 39 + 17 files changed, 2495 insertions(+), 17729 deletions(-) create mode 100644 app/components/Blog/Category.vue create mode 100644 app/components/Blog/types.ts create mode 100644 bun.lock create mode 100644 content/blog/0004.entry4.md delete mode 100644 package-lock.json create mode 100644 server/routes/blog/rss.xml.ts diff --git a/app/assets/css/blogCard.css b/app/assets/css/blogCard.css index 027b501..66fe68e 100644 --- a/app/assets/css/blogCard.css +++ b/app/assets/css/blogCard.css @@ -12,6 +12,17 @@ scale: 1.05; } + & > .image { + flex: 0 0 200px; + width: 100%; + + & img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + & .card-content { display: flex; flex-direction: column; @@ -24,6 +35,11 @@ margin-bottom: 1rem; } + & header { + display: flex; + flex-direction: column; + } + & footer { margin-top: auto; display: flex; @@ -41,4 +57,12 @@ color: var(--color-orange); } } +} + + + +@media (width <= 780px) { + .BlogCard header { + align-items: center; + } } \ No newline at end of file diff --git a/app/assets/css/global.css b/app/assets/css/global.css index c2e4d07..f266ffb 100755 --- a/app/assets/css/global.css +++ b/app/assets/css/global.css @@ -290,7 +290,7 @@ span.chip { .grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } @@ -325,7 +325,7 @@ span.chip { } @media (width <= 780px) { - h1, h2, h3, h4, h5, h6, p { + h1, h2, h3, h4, h5, h6, p, small { text-align: center; } } diff --git a/app/components/Blog/Author.vue b/app/components/Blog/Author.vue index 3cd93e7..6045e67 100644 --- a/app/components/Blog/Author.vue +++ b/app/components/Blog/Author.vue @@ -1,7 +1,7 @@