diff --git a/src/components/PostList.astro b/src/components/PostList.astro index 54885bb..0c0f979 100644 --- a/src/components/PostList.astro +++ b/src/components/PostList.astro @@ -13,7 +13,7 @@ const posts = ( 'blog', (entry) => filterFn(entry) && (import.meta.env.DEV || !entry.data.draft) ) -).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()); +).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()); --- { @@ -34,4 +34,71 @@ const posts = ( #no-posts-found { text-align: center; } + + /* The following styling rules have been adopted from: + https://github.com/codrops/LineHoverStyles/ */ + + @media (min-width: 640px) { + .post-list a { + position: relative; + outline: none; + cursor: pointer; + text-decoration: none; + white-space: nowrap; + } + + .post-list a:focus { + outline: 2px solid rgba(255, 255, 255, 0.4); + outline-offset: 3px; + } + + .post-list a:focus:not(:focus-visible) { + background: transparent; + } + + .post-list a:focus-visible { + color: rgba(255, 255, 255, 0.4); + outline: 2px solid rgba(255, 255, 255, 0.4); + outline-offset: 3px; + background: transparent; + } + + .post-list a:hover { + outline: none; + color: rgba(255, 255, 255, 0.4); + } + + .post-list a::before, + .post-list a::after { + position: absolute; + width: 100%; + height: 1px; + background: currentColor; + top: 100%; + left: 0; + pointer-events: none; + } + + .post-list a::before { + content: ''; + transform-origin: 0% 50%; + transform: scale3d(0, 1, 1); + transition: transform 0.3s; + } + + .post-list a:hover::before { + transform: scale3d(1, 1, 1); + } + + .post-list a::after { + content: ''; + top: calc(100% + 4px); + transition: transform 0.3s; + transform-origin: 100% 50%; + } + + .post-list a:hover::after { + transform: scale3d(0, 1, 1); + } + }