Use lightningcss

resources/css/app.css

@@ -0,0 +1,8 @@
+@import url('variables.css');
+@import url('fonts.css');
+@import url('layout.css');
+@import url('colours.css');
+@import url('code.css');
+@import url('content.css');
+@import url('notes.css');
+@import url('indieauth.css');

resources/css/code.css

@@ -0,0 +1,3 @@
+.hljs {
+  border-radius: .5rem;
+}

resources/css/colours.css

@@ -0,0 +1,28 @@
+body {
+  background-color: var(--color-secondary);
+  color: var(--color-primary);
+}
+
+a {
+  color: var(--color-link);
+
+  &:visited {
+    color: var(--color-link-visited);
+  }
+
+  &.auth:visited {
+    color: var(--color-link);
+  }
+}
+
+#site-header {
+  & a:visited {
+    color: var(--color-link);
+  }
+
+  & .rss-icon {
+    & svg {
+      color: var(--rss-color-link);
+    }
+  }
+}

resources/css/content.css

@@ -0,0 +1,64 @@
+@import url('h-card.css');
+
+.h-entry {
+  border-inline-start: 1px solid var(--color-primary);
+  padding-inline-start: .5rem;
+
+  & .reply-to {
+    font-style: italic;
+  }
+
+  & .post-info {
+    & a {
+      text-decoration: none;
+    }
+  }
+
+  & .note-metadata {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    & .replies,
+    & .likes,
+    & .reposts {
+      display: inline-flex;
+      flex-direction: row;
+      gap: .5rem;
+      align-items: center;
+    }
+
+    & .syndication-links {
+      flex-flow: row wrap;
+
+      & a {
+        text-decoration: none;
+
+        & svg {
+          width: 1rem;
+          height: 1rem;
+        }
+      }
+    }
+  }
+}
+
+.feather {
+  width: 24px;
+  height: 24px;
+  stroke: currentcolor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

resources/css/fonts.css

@@ -0,0 +1,17 @@
+body {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-md);
+}
+
+code {
+  font-family: var(--font-family-monospace);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-headings);
+}

resources/css/h-card.css

@@ -0,0 +1,32 @@
+.h-card {
+  & .hovercard {
+    display: none;
+    position: absolute;
+    z-index: 100;
+    padding: 1rem;
+    border-radius: 1rem;
+    box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
+    background-color: var(--color-secondary);
+    width: fit-content;
+    transition: opacity 0.5s ease-in-out;
+    opacity: 0;
+    flex-direction: column;
+    gap: .5rem;
+
+    & .u-photo {
+      max-width: 6rem;
+    }
+
+    & .social-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &:hover {
+    & .hovercard {
+      display: flex;
+      opacity: 1;
+    }
+  }
+}

resources/css/indieauth.css

@@ -0,0 +1,13 @@
+.indieauth {
+  .error {
+    color: var(--color-danger);
+    background-color: var(--color-danger-shadow);
+    border: 1px solid var(--color-danger);
+    border-radius: .5rem;
+    display: flex;
+    padding-inline: 1rem;
+    padding-block: .5rem;
+    width: fit-content;
+    margin-block-end: 1rem;
+  }
+}

resources/css/layout.css

@@ -0,0 +1,55 @@
+.grid {
+  display: grid;
+  grid-template-columns: 5vw 1fr 5vw;
+  grid-template-rows: min-content 1fr min-content;
+  row-gap: 1rem;
+}
+
+#site-header {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+
+  & .rss-icon {
+    & svg {
+      width: auto;
+      height: 1rem;
+    }
+  }
+}
+
+main {
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+.h-feed {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.h-entry {
+  & p:first-of-type,
+  & h1:first-of-type {
+    margin-block-start: 0;
+  }
+}
+
+.pagination {
+  margin-block-start: 1rem;
+}
+
+footer {
+  grid-column: 2 / 3;
+  grid-row: 3 / 4;
+
+  & .iwc-logo {
+    max-width: 85vw;
+  }
+
+  & .footer-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+}

resources/css/notes.css

@@ -0,0 +1,38 @@
+main {
+  & > .u-comment {
+    margin-block-start: 2rem;
+    margin-inline-start: 2rem;
+    border-inline-start: 1px solid var(--color-primary);
+    padding-inline-start: .5rem;
+
+    & .mini-h-card {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      & .u-photo {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        margin-block-end: 0.5rem;
+      }
+    }
+  }
+
+  & .notes-subtitle {
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
+  & .webmentions-author-list {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1rem;
+
+    & img {
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
+    }
+  }
+}

resources/css/variables.css

@@ -0,0 +1,25 @@
+:root {
+  /* Font Family */
+  --font-family-headings: 'Rockwell', 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
+  --font-family-body: 'Charter', 'Bitstream Charter', 'Sitka Text', 'Cambria', serif;
+  --font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
+
+  /* Font Size */
+  --font-size-sm: 0.75rem;   /* 12px */
+  --font-size-base: 1rem;    /* 16px, base */
+  --font-size-md: 1.25rem;   /* 20px */
+  --font-size-lg: 1.5rem;    /* 24px */
+  --font-size-xl: 1.75rem;   /* 28px */
+  --font-size-xxl: 2rem;     /* 32px */
+  --font-size-xxxl: 2.25rem; /* 36px */
+
+  /* Colours */
+  --color-primary: oklch(36.8% 0.1 125.505deg);
+  --color-secondary: oklch(96.3% 0.1 125.505deg);
+  --color-link: oklch(48.09% 0.146 241.41deg);
+  --color-link-visited: oklch(70.44% 0.21 304.41deg);
+  --color-primary-shadow: oklch(19.56% 0.054 125.505deg / 40%);
+  --rss-color-link: oklch(67.59% 0.189 42.04deg);
+  --color-danger: oklch(64.41% 0.281 23.29deg);
+  --color-danger-shadow: oklch(64.41% 0.281 23.29deg / 10%);
+}