Use lightningcss

public/assets/css/app.css

@@ -1,8 +1,2 @@
-@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');
+:root{--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-sm:.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:oklch(36.8% .1 125.505);--color-secondary:oklch(96.3% .1 125.505);--color-link:oklch(48.09% .146 241.41);--color-link-visited:oklch(70.44% .21 304.41);--color-primary-shadow:oklch(19.56% .054 125.505/.4);--rss-color-link:oklch(67.59% .189 42.04);--color-danger:oklch(64.41% .281 23.29);--color-danger-shadow:oklch(64.41% .281 23.29/.1)}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)}.grid{grid-template-rows:min-content 1fr min-content;grid-template-columns:5vw 1fr 5vw;row-gap:1rem;display:grid}#site-header{grid-area:1/2/2/3;& .rss-icon{& svg{width:auto;height:1rem}}}main{grid-area:2/2/3/3}.h-feed{flex-direction:column;gap:2rem;display:flex}.h-entry{& p:first-of-type,& h1:first-of-type{margin-block-start:0}}.pagination{margin-block-start:1rem}footer{grid-area:3/2/4/3;& .iwc-logo{max-width:85vw}& .footer-actions{flex-direction:row;gap:1rem;display:flex}}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)}}}.hljs{border-radius:.5rem}.h-card{& .hovercard{z-index:100;box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);background-color:var(--color-secondary);opacity:0;border-radius:1rem;flex-direction:column;gap:.5rem;width:fit-content;padding:1rem;transition:opacity .5s ease-in-out;display:none;position:absolute;& .u-photo{max-width:6rem}& .social-icon{width:1rem;height:1rem}}&:hover{& .hovercard{opacity:1;display:flex}}}.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{flex-direction:row;gap:1rem;display:flex;& .replies,& .likes,& .reposts{flex-direction:row;align-items:center;gap:.5rem;display:inline-flex}& .syndication-links{flex-flow:wrap;& a{text-decoration:none;& svg{width:1rem;height:1rem}}}}}.feather{stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:24px;height:24px}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}main{&>.u-comment{border-inline-start:1px solid var(--color-primary);margin-block-start:2rem;margin-inline-start:2rem;padding-inline-start:.5rem;& .mini-h-card{flex-direction:row;align-items:baseline;display:inline-flex;& .u-photo{border-radius:50%;width:2rem;height:2rem;margin-block-end:.5rem}}}& .notes-subtitle{font-size:1.2rem;font-weight:600}& .webmentions-author-list{flex-flow:wrap;gap:1rem;display:flex;& img{border-radius:50%;width:4rem;height:4rem}}}.indieauth{& .error{color:var(--color-danger);background-color:var(--color-danger-shadow);border:1px solid var(--color-danger);border-radius:.5rem;width:fit-content;margin-block-end:1rem;padding-block:.5rem;padding-inline:1rem;display:flex}}
+/*# sourceMappingURL=/assets/css/app.css.map */

public/assets/css/code.css

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

public/assets/css/colours.css

@@ -1,28 +0,0 @@
-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);
-    }
-  }
-}

public/assets/css/content.css

@@ -1,64 +0,0 @@
-@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;
-}

public/assets/css/fonts.css

@@ -1,17 +0,0 @@
-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);
-}

public/assets/css/h-card.css

@@ -1,32 +0,0 @@
-.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;
-    }
-  }
-}

public/assets/css/indieauth.css

@@ -1,13 +0,0 @@
-.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;
-  }
-}