blog posts

public/css/base.css

@@ -27,7 +27,7 @@
   --colour-primary-fg: var(--colour-primary-90);
   --colour-primary-fg-accent: var(--colour-primary-80);
   --colour-primary-bg: var(--colour-primary-10);
-  --colour-primary-fg-accent: var(--colour-primary-20);
+  --colour-primary-bg-accent: var(--colour-primary-20);
   --colour-code-fg: var(--colour-primary-90);
   --colour-code-bg: var(--colour-primary-15);
   --colour-hyperlink: var(--colour-hyperlink-80);
@@ -56,7 +56,7 @@
     --colour-primary-fg: var(--colour-primary-20);
     --colour-primary-fg-accent: var(--colour-primary-40);
     --colour-primary-bg: var(--colour-primary-95);
-    --colour-primary-fg-accent: var(--colour-primary-90);
+    --colour-primary-bg-accent: var(--colour-primary-90);
     --colour-hyperlink: var(--colour-hyperlink-40);
   }
 }
@@ -162,13 +162,13 @@ h3, h4, h5, h6 {
 
 /** Hyperlinks */
 
-a:is(:link, :visited) {
+:is(:link, :visited) {
   color: var(--colour-hyperlink);
   text-decoration: underline;
   display: inline;
 }
 
-a:hover {
+:hover {
   text-decoration: wavy;
 }
 

public/css/feed-entry.css

@@ -1,3 +1,9 @@
+p:has(.dt-published, .dt-updated) {
+    font-size: var(--font-size-sm);
+    font-style: italic;
+    margin-block-start: 0;
+}
+
 .p-summary {
   font-style: italic;
   font-size: var(--font-size-sm);

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;
+    }
 }