Move post styles to "post.css" to make blog/[id].astro smaller

src/components/blog/post.css

···
+.content {
+  /* Custom Flags */
+
+  & blockquote {
+    &[data-bq-flag--note],
+    &[data-bq-flag--alert],
+    &[data-bq-flag--info] {
+      color: black;
+    }
+
+    &[data-bq-flag--note] {
+      --accent: var(--rainbow-4);
+      --icon: "📝";
+      --name: "Note";
+    }
+
+    &[data-bq-flag--alert] {
+      --accent: var(--rainbow-0);
+      --icon: "🚨";
+      --name: "Alert";
+    }
+
+    &[data-bq-flag--info] {
+      --accent: var(--rainbow-5);
+      --icon: "📚";
+      --name: "Info";
+    }
+  }
+
+  & p,
+  & div:has(> p) {
+    &[data-para-flag--bg-red],
+    &[data-para-flag--bg-orange],
+    &[data-para-flag--bg-yellow],
+    &[data-para-flag--bg-green],
+    &[data-para-flag--bg-blue],
+    &[data-para-flag--bg-purple] {
+      /* contrasting colour */
+      color: black;
+    }
+
+    &[data-para-flag--bg-red] {
+      background-color: var(--rainbow-0);
+    }
+
+    &[data-para-flag--bg-orange] {
+      background-color: var(--rainbow-1);
+    }
+
+    &[data-para-flag--bg-yellow] {
+      background-color: var(--rainbow-2);
+    }
+
+    &[data-para-flag--bg-green] {
+      background-color: var(--rainbow-3);
+    }
+
+    &[data-para-flag--bg-blue] {
+      background-color: var(--rainbow-4);
+    }
+
+    &[data-para-flag--bg-purple] {
+      background-color: var(--rainbow-5);
+    }
+  }
+
+  & img {
+    &[data-img-flag--small="true"] {
+      width: 50%;
+    }
+
+    &[data-img-flag--left="true"] {
+      float: left;
+    }
+
+    &[data-img-flag--right="true"] {
+      float: right;
+    }
+
+    &[data-img-flag--centre="true"] {
+      margin-inline: auto;
+    }
+  }
+
+  /* Headings */
+
+  & h2,
+  & h3,
+  & h4 {
+    margin-block-start: 2rem;
+    margin-block-end: 2rem;
+
+    color: var(--typo-subheading);
+
+    & + & {
+      margin-block-start: 0;
+    }
+
+    :has(+ &) {
+      margin-block-end: 0;
+    }
+  }
+
+  & h2 {
+    font-size: 3.6rem;
+  }
+
+  & h3 {
+    font-size: 2.8rem;
+  }
+
+  & h4 {
+    font-size: 2.4rem;
+  }
+
+  /* Paragraphs */
+  & p,
+  & blockquote {
+    clear: both;
+    margin-block: 2rem;
+  }
+
+  & div:has(> p) {
+    margin-block: 1rem;
+  }
+
+  /* Images */
+  & img {
+    height: auto; /* fix height issues ?? */
+    margin: 1rem;
+  }
+
+  & a {
+    text-decoration: 0.2rem underline;
+
+    &:link {
+      color: var(--typo-url);
+    }
+    &:visited {
+      color: var(--typo-visited);
+    }
+    &:hover {
+      text-decoration: 0.1rem wavy underline;
+    }
+    &:active {
+      color: var(--rainbow-3);
+    }
+  }
+
+  /* Standard Lists */
+  & ul,
+  & ol {
+    margin-inline-start: 4rem;
+    & & {
+      margin-inline-start: 2rem;
+    }
+  }
+
+  /* Blockquotes */
+  & blockquote {
+    --accent: var(--bg-secondary);
+    border-left: 0.2rem solid hsl(from var(--accent) h s calc(l * 0.9));
+    padding: 1rem 4rem 1rem 1rem;
+    margin: 1rem;
+    border-radius: 0.5rem;
+    background-color: var(--accent);
+    width: fit-content;
+    min-width: 20rem;
+
+    &::before {
+      content: var(--icon) " " var(--name) / var(--name);
+    }
+  }
+
+  /* Inline code */
+  :not(pre) > code {
+    color: var(--typo-code);
+    background-color: var(--bg-code);
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    /* make blockquote code use a lighter version of the accent with a darker background */
+    :is(blockquote) & {
+      color: hsl(from var(--accent) h calc(s * 0.8) calc(l * 1.4));
+      background-color: #00000080;
+    }
+  }
+
+  /* Outline Code */
+  & pre:has(> code) {
+    padding: 0.5rem;
+    border-radius: 1rem;
+  }
+
+  .astro-code {
+    background-color: var(--bg-code) !important;
+    margin-block: 1rem;
+    padding: 0;
+    position: relative;
+
+    & code {
+      display: block;
+      padding: 1rem;
+
+      & span {
+        color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
+      }
+    }
+  }
+
+  /* Check lists */
+  .task-list-item {
+    list-style: none;
+  }
+
+  .task-list-item label {
+    display: flex;
+    margin-block-start: 0.5rem;
+    margin-block-end: 0.75rem;
+
+    gap: 0.5rem;
+
+    & input[type="checkbox"] {
+      width: 2.5rem;
+      height: 2.5rem;
+      margin-inline-end: 0.5rem;
+
+      background: light-dark(rgb(0, 0, 0, 0.2), rgb(255, 255, 255, 0.4));
+      border-radius: 0.5rem;
+      border: 0.1rem solid var(--typo-body);
+
+      &:checked {
+        --checkmark: url("../../assets/check.svg");
+        background: var(--checkmark) center/2rem padding-box no-repeat
+          var(--rainbow-2);
+      }
+    }
+  }
+
+  /* Table */
+  & table {
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    & th,
+    & td {
+      border: 0.1rem solid white;
+      padding: 0.5rem;
+    }
+
+    & thead th {
+      background-color: var(--bg-secondary);
+    }
+
+    & tbody tr:nth-child(2n) {
+      background-color: #ffffff10;
+    }
+  }
+}

src/pages/blog/[id].astro

···
 import { getEntry } from "astro:content";
 import { parse } from "node:path";
 
+import "@/components/blog/post.css";
+
 const { id } = Astro.params;
 if (!id) return Astro.redirect("/404");
 
···
     code.prepend(heading);
   });
 </script>
-
-<!-- post content styles -->
-<!-- TODO: REFACTOR -->
-<style is:global>
-  .content {
-    /* Custom Flags */
-
-    & blockquote {
-      &[data-bq-flag--note],
-      &[data-bq-flag--alert],
-      &[data-bq-flag--info] {
-        color: black;
-      }
-
-      &[data-bq-flag--note] {
-        --accent: var(--rainbow-4);
-        --icon: "📝";
-        --name: "Note";
-      }
-
-      &[data-bq-flag--alert] {
-        --accent: var(--rainbow-0);
-        --icon: "🚨";
-        --name: "Alert";
-      }
-
-      &[data-bq-flag--info] {
-        --accent: var(--rainbow-5);
-        --icon: "📚";
-        --name: "Info";
-      }
-    }
-
-    & p,
-    & div:has(> p) {
-      &[data-para-flag--bg-red],
-      &[data-para-flag--bg-orange],
-      &[data-para-flag--bg-yellow],
-      &[data-para-flag--bg-green],
-      &[data-para-flag--bg-blue],
-      &[data-para-flag--bg-purple] {
-        /* contrasting colour */
-        color: black;
-      }
-
-      &[data-para-flag--bg-red] {
-        background-color: var(--rainbow-0);
-      }
-
-      &[data-para-flag--bg-orange] {
-        background-color: var(--rainbow-1);
-      }
-
-      &[data-para-flag--bg-yellow] {
-        background-color: var(--rainbow-2);
-      }
-
-      &[data-para-flag--bg-green] {
-        background-color: var(--rainbow-3);
-      }
-
-      &[data-para-flag--bg-blue] {
-        background-color: var(--rainbow-4);
-      }
-
-      &[data-para-flag--bg-purple] {
-        background-color: var(--rainbow-5);
-      }
-    }
-
-    & img {
-      &[data-img-flag--small="true"] {
-        width: 50%;
-      }
-
-      &[data-img-flag--left="true"] {
-        float: left;
-      }
-
-      &[data-img-flag--right="true"] {
-        float: right;
-      }
-
-      &[data-img-flag--centre="true"] {
-        margin-inline: auto;
-      }
-    }
-
-    /* Headings */
-
-    & h2,
-    & h3,
-    & h4 {
-      margin-block-start: 2rem;
-      margin-block-end: 2rem;
-
-      color: var(--typo-subheading);
-
-      & + & {
-        margin-block-start: 0;
-      }
-
-      :has(+ &) {
-        margin-block-end: 0;
-      }
-    }
-
-    & h2 {
-      font-size: 3.6rem;
-    }
-
-    & h3 {
-      font-size: 2.8rem;
-    }
-
-    & h4 {
-      font-size: 2.4rem;
-    }
-
-    /* Paragraphs */
-    & p,
-    & blockquote {
-      clear: both;
-      margin-block: 2rem;
-    }
-
-    & div:has(> p) {
-      margin-block: 1rem;
-    }
-
-    /* Images */
-    & img {
-      height: auto; /* fix height issues ?? */
-      margin: 1rem;
-    }
-
-    & a {
-      text-decoration: 0.2rem underline;
-
-      &:link {
-        color: var(--typo-url);
-      }
-      &:visited {
-        color: var(--typo-visited);
-      }
-      &:hover {
-        text-decoration: 0.1rem wavy underline;
-      }
-      &:active {
-        color: var(--rainbow-3);
-      }
-    }
-
-    /* Standard Lists */
-    & ul,
-    & ol {
-      margin-inline-start: 4rem;
-      & & {
-        margin-inline-start: 2rem;
-      }
-    }
-
-    /* Blockquotes */
-    & blockquote {
-      --accent: var(--bg-secondary);
-      border-left: 0.2rem solid hsl(from var(--accent) h s calc(l * 0.9));
-      padding: 1rem 4rem 1rem 1rem;
-      margin: 1rem;
-      border-radius: 0.5rem;
-      background-color: var(--accent);
-      width: fit-content;
-      min-width: 20rem;
-
-      &::before {
-        content: var(--icon) " " var(--name) / var(--name);
-      }
-    }
-
-    /* Inline code */
-    :not(pre) > code {
-      color: var(--typo-code);
-      background-color: var(--bg-code);
-      padding: 0.2rem;
-      border-radius: 0.5rem;
-
-      /* make blockquote code use a lighter version of the accent with a darker background */
-      :is(blockquote) & {
-        color: hsl(from var(--accent) h calc(s * 0.8) calc(l * 1.4));
-        background-color: #00000080;
-      }
-    }
-
-    /* Outline Code */
-    & pre:has(> code) {
-      padding: 0.5rem;
-      border-radius: 1rem;
-    }
-
-    .astro-code {
-      background-color: var(--bg-code) !important;
-      margin-block: 1rem;
-      padding: 0;
-      position: relative;
-
-      & code {
-        display: block;
-        padding: 1rem;
-
-        & span {
-          color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
-        }
-      }
-    }
-
-    /* Check lists */
-    .task-list-item {
-      list-style: none;
-    }
-
-    .task-list-item label {
-      display: flex;
-      margin-block-start: 0.5rem;
-      margin-block-end: 0.75rem;
-
-      gap: 0.5rem;
-
-      & input[type="checkbox"] {
-        width: 2.5rem;
-        height: 2.5rem;
-        margin-inline-end: 0.5rem;
-
-        background: light-dark(rgb(0, 0, 0, 0.2), rgb(255, 255, 255, 0.4));
-        border-radius: 0.5rem;
-        border: 0.1rem solid var(--typo-body);
-
-        &:checked {
-          --checkmark: url("../../assets/check.svg");
-          background: var(--checkmark) center/2rem padding-box no-repeat
-            var(--rainbow-2);
-        }
-      }
-    }
-
-    /* Table */
-    & table {
-      border-collapse: collapse;
-      border-spacing: 0;
-
-      & th,
-      & td {
-        border: 0.1rem solid white;
-        padding: 0.5rem;
-      }
-
-      & thead th {
-        background-color: var(--bg-secondary);
-      }
-
-      & tbody tr:nth-child(2n) {
-        background-color: #ffffff10;
-      }
-    }
-  }
-</style>
 
 <!-- page styles -->
 <style>