blog posts

public/css/feed.css

@@ -1,23 +1,76 @@
-.skip-to {
-    display: inline-block;
-    margin-block-start: var(--spacing-block-xs);
+h2 {
+    margin-block-start: var(--spacing-block-md);
 }
 
-.skip-to ul {
-    margin-block-start: var(--spacing-block-xs);
-}
-
-.skip-to :is(ul, li) {
-    display: inline-block;
-    list-style-type: disc;
-}
-
-.skip-to li:last-of-type {
-    list-style: none;
+h3 {
+    margin-block-start: var(--spacing-block-sm);
 }
 
 .h-entry {
-    outline: 0.125rem solid var(--colour-primary-fg);
-    outline-offset: 1rem;
-    border-radius: 0.25rem;
+    background-color: var(--colour-primary-bg-accent);
+    border: 0.125rem solid var(--colour-primary-fg);
+    border-radius: 1rem;
+    margin-inline: -1rem;
+    margin-block-start: var(--spacing-block-sm);
+    transition-duration: 250ms;
+
+    &:is(:hover, :focus, :focus-within, :focus-visible) {
+        background-color: var(--colour-primary-fg-accent);
+        color: var(--colour-primary-bg-accent);
+        transition-duration: 100ms;
+    }
+
+    + .h-entry {
+       margin-block-start: var(--spacing-block-xs);
+    }
+
+    .u-url {
+        color: inherit;
+        display: inline-block;
+        height: 100%;
+        padding: 1rem;
+        text-decoration: none;
+        width: 100%;
+    }
+
+    .p-name {
+        margin-block-start: 0;
+
+        + * {
+            margin-block-start: var(--spacing-block-xs);
+        }
+    }
+
+    p:has(.dt-published, .dt-updated) {
+        font-size: var(--font-size-sm);
+        font-style: italic;
+
+        &:not(.p-name + *) {
+            margin-block-start: 0;
+        }
+    }
+}
+
+.skip-to {
+    display: inline-block;
+    margin-block-start: var(--spacing-block-xs);
+
+    :is(ul, li) {
+        display: inline-block;
+        list-style-type: disc;
+    }
+
+    ul {
+        margin-block-start: var(--spacing-block-xs);
+    }
+
+    li:last-of-type {
+        list-style: none;
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .h-entry {
+        transition-property: background-color, color;
+    }
 }