{post.subtitle}
{post.title}
@@ -55,7 +58,7 @@ transition: background-color 0.16s ease-in-out; margin: 4px; - --notch-size-devlog: 40px; + --notch-size-devlog: 36px; clip-path: polygon( 0% var(--notch-size-devlog), var(--notch-size-devlog) 0%, @@ -71,15 +74,49 @@ background-color: var(--color-background-highlight-hover); } - .post:hover .post-title, .post:hover .post-date { + .post:hover .post-title, .post:hover .post-date, .post-number { color: var(--color-text-dark); } + .post:hover .post-img-container { + background-color: transparent; + } + + .post-img-container { + position: relative; + height: fit-content; + width: fit-content; + background-color: var(--color-background-highlight-hover); + + transition: background-color 0.16s ease-in-out; + clip-path: polygon( + 0% var(--notch-size-devlog), + var(--notch-size-devlog) 0%, + calc(100% - var(--notch-size-devlog)) 0%, + 100% var(--notch-size-devlog), + 100% calc(100% - var(--notch-size-devlog)), + 100% 100%, + var(--notch-size-devlog) 100%, + 0% calc(100% - var(--notch-size-devlog)) + ); + } + .post-img { width: 150px; height: 120px; margin: 0; object-fit: cover; + + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% 0%, + 100% 0%, + 100% calc(100% - var(--notch-size-devlog)), + calc(100% - var(--notch-size-devlog)) 100%, + 0% 100%, + 0% 100% + ); } .post-text-container { @@ -89,7 +126,7 @@ justify-content: center; } - .post-date, .post-title { + .post-date, .post-title, .post-number { font-family: 'Space Mono', monospace; margin: 4px 0; transition: color 0.16s ease-in-out; @@ -104,4 +141,15 @@ font-size: 1.3rem; font-weight: 700; } + + .post-number { + font-size: 0.77rem; + font-weight: 700; + position: absolute; + right: 2px; + bottom: 1px; + margin: 0; + padding: 0; + line-height: 1rem; + } \ No newline at end of file
+