diff --git a/app/assets/css/journal-base.css b/app/assets/css/journal-base.css index 8561a2b..7675430 100644 --- a/app/assets/css/journal-base.css +++ b/app/assets/css/journal-base.css @@ -203,7 +203,10 @@ color: var(--journal-color-muted); } +/* The card is one link (UI-SPEC L5): the title anchor stretches over the + whole card, and the card shows the keyboard focus. */ .journal-post-card { + position: relative; display: flex; flex-direction: column; gap: var(--journal-space-2); @@ -213,6 +216,11 @@ background: var(--journal-color-bg); } +.journal-post-card:has(.journal-post-card__title a:focus-visible) { + outline: 2px solid var(--journal-color-accent); + outline-offset: 2px; +} + .journal-post-card .journal-featured-image { margin: calc(-1 * var(--journal-space-4)) calc(-1 * var(--journal-space-4)) var(--journal-space-2); } @@ -230,6 +238,13 @@ text-decoration: none; } +.journal-post-card__title a::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; +} + .journal-post-card__date { color: var(--journal-color-muted); font-size: 0.85em; @@ -239,10 +254,6 @@ margin: 0; } -.journal-post-card__more { - margin-top: auto; -} - .journal-related { margin-top: var(--journal-space-5); } diff --git a/app/components/Journal/PostCard.vue b/app/components/Journal/PostCard.vue index 1c4e396..ae7ca1c 100644 --- a/app/components/Journal/PostCard.vue +++ b/app/components/Journal/PostCard.vue @@ -1,26 +1,31 @@ diff --git a/app/components/Journal/PostList.vue b/app/components/Journal/PostList.vue index 59eeba3..4f85a35 100644 --- a/app/components/Journal/PostList.vue +++ b/app/components/Journal/PostList.vue @@ -1,13 +1,14 @@ diff --git a/app/components/Journal/RelatedPosts.vue b/app/components/Journal/RelatedPosts.vue index 1b4c59e..23b7504 100644 --- a/app/components/Journal/RelatedPosts.vue +++ b/app/components/Journal/RelatedPosts.vue @@ -1,6 +1,7 @@