refactor: UnoCSS-ify post pages, endnotes and NRT

5 files changed, 13 insertions, 111 deletions

diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 10c7900d..4ffe742c 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -1,102 +1,4 @@
 
-/* post */
-
-.post-header {
-  margin-bottom: 2rem;
-
-  .post-title {
-    font-size: 2rem;
-    font-weight: 900;
-    filter: url(#x);
-  }
-
-  .post-subtitle {
-    display: block;
-    color: var(--secondary-text-color);
-    font-style: italic;
-    font-size: 1.2rem;
-  }
-}
-
-.post-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    align-items: center;
-
-    .post-date, .tag {
-      color: var(--secondary-text-color)
-    }
-
-    .post-category {
-        @include postCategoryPill;
-    }
-}
-
-.page-content {
-  min-height: 60%;
-}
-
-.post-content {
-  margin-bottom: 50px;
-  line-height: 2
-}
-
-/* related posts */
-
-.nrt {
-    margin-top: 2rem;
-    padding-bottom: 2rem; /* in case nrt-title overlaps */
-    position: relative;
-    .nrt-title {
-        position: absolute;
-        z-index: -1;
-        bottom: 0;
-        right: 0;
-        font-size: 2rem;
-        margin: 0;
-        opacity: .25;
-        font-style: italic;
-    }
-    .nrt-header {
-        display: flex;
-        justify-content: space-between;
-        .nrt-link {
-            font-weight: 800;
-        }
-        .nrt-reading-time {
-            color: var(--secondary-text-color)
-        }
-    }
-    .nrt-subtitle {
-        color: var(--secondary-text-color);
-        font-weight: normal;
-    }
-    .nrt-summary {
-        font-weight: light
-    }
-}
-
-/* endnotes */
-
-#post-endnotes {
-    color: var(--secondary-text-color);
-    font-size: 1rem;
-    h3 {
-        font-size: 1rem;
-        width: fit-content;
-        margin: 0;
-    }
-    ul {
-        li {
-            list-style-type: '→';
-            padding-left: 1rem;
-            &::marker {
-                color: var(--secondary-text-color);
-            }
-        }
-    }
-}
 
 /* gallery shortcode */
 
diff --git a/layouts/_partials/posts/endnotes.html b/layouts/_partials/posts/endnotes.html
index e7245ad4..43c8fe74 100644
--- a/layouts/_partials/posts/endnotes.html
+++ b/layouts/_partials/posts/endnotes.html
@@ -1,9 +1,9 @@
 {{ if .Params.endnotes }}
 <hr>
-<div id="post-endnotes">
-    <ul>
+<div id="post-endnotes" class="font-secondary text-[1rem]">
+    <ul class="list-none">
       {{ range .Params.endnotes }}
-      <li>{{ . | markdownify }}</li>
+      <li class="flex gap-4 pl-4"><span>→</span> {{ . | markdownify }}</li>
       {{ end }}
     </ul>
 </div>
diff --git a/layouts/_partials/posts/now-read-this.html b/layouts/_partials/posts/now-read-this.html
index 6f2950c2..2c894f27 100644
--- a/layouts/_partials/posts/now-read-this.html
+++ b/layouts/_partials/posts/now-read-this.html
@@ -1,17 +1,17 @@
 {{ with site.RegularPages.Related . | first 1 }}
-<div class="nrt post-content">
-  <h4 class="nrt-title">{{ T "nowReadThis" }}</h4>
+<div class="mt-8 pb-8 relative leading-[2]">
+  <h4 class="absolute -z-1 bottom-0 right-0 text-[2rem] m-0 opacity-25 font-italic">{{ T "nowReadThis" }}</h4>
   {{ range . }}
-  <div class="nrt-header">
-      <a class="nrt-link" href="{{ .RelPermalink }}" data-umami-event="🤔 Click Related Post">
+  <div class="flex justify-between">
+      <a class="font-800" href="{{ .RelPermalink }}" data-umami-event="🤔 Click Related Post">
           {{ .LinkTitle }}
           {{ with .Params.subtitle }}
-              <span class="nrt-subtitle">：{{ . }}</span>
+              <span class="font-secondary font-normal">：{{ . }}</span>
           {{ end }}
       </a>
-      <span class="nrt-reading-time">⏱️ {{ .ReadingTime }}min </span>
+      <span class="font-secondary">⏱️ {{ .ReadingTime }}min </span>
   </div>
-  <div class="nrt-summary">
+  <div class="font-light">
       <p>{{ .Summary | plainify }}</p>
   </div>
   {{ end }}
diff --git a/layouts/_shortcodes/quotecard.html b/layouts/_shortcodes/quotecard.html
index f4b4621a..34696da2 100644
--- a/layouts/_shortcodes/quotecard.html
+++ b/layouts/_shortcodes/quotecard.html
@@ -1,4 +1,4 @@
-<div class="text-[1.2rem] md:text-[1.5rem] text-italic text-center
+<div class="text-[1.2rem] md:text-[1.5rem] font-italic text-center
     my-[3rem] md:my-[5rem] mx-[1rem] md:mx-[3rem] p-[1rem]
     border border-solid border-gray-300 rounded-[1rem] shadow-lg
     rotate-[3deg] bg-[rgba(255,255,255,0.35)] backdrop-blur-md"
diff --git a/layouts/library/page.html b/layouts/library/page.html
index e4f7949a..6ad02bcb 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article id="book-page">
+    <article>
         <header class="flex flex-col items-center gap-[0.5rem]">
             <div class="relative border-[0.2rem] border-solid border-white shadow-lg w-[10rem] md:w-[15rem]"
                 style="view-transition-name: book-{{ .File.UniqueID }}">
@@ -27,7 +27,7 @@
             </p>
         </header>
         <div class="markdown-body">
-            <div class="book-content">
+            <div class="leading-[2]">
                 {{ .Content }}
             </div>
             <!-- Endnotes -->