refactor: replace _footer.scss and _shortcode.scss with UnoCSS

Former-commit-id: 272a67d7a8b8752dda3cddf44482e9d85de2c4d0

5 files changed, 40 insertions, 29 deletions

diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
index a4fbd231..6f9a9126 100644
--- a/layouts/_partials/footer.html
+++ b/layouts/_partials/footer.html
@@ -1,15 +1,19 @@
-<footer id="footer">
-    <section id="footer-copyright">
+<footer class="my-[2rem] mx-auto font-mono
+    md:w-[var(--page-width)] md:flex md:justify-between">
+    <!-- copyright -->
+    <section>
         <p class="copyright">&copy; 2022-{{ now | dateFormat "2006" }} <a href="https://www.guhub.cn/" target="_blank">Eltrac</a></p>
         <p class="license">{{ T "footer.licenseStatement" (printf "<a href=\"https://creativecommons.org/licenses/by-sa/4.0/\" target=\"_blank\">CC BY-SA 4.0</a>") | safeHTML }}</p>
     </section>
-    <section id="footer-links">
+    <!-- links -->
+    <section class="flex flex-col md:items-end">
         <!-- Internal Links -->
-        <ul class="footer-navigation footer-navigation-internal">
+        <ul class="list-none flex gap-[0.25rem] ps-0 my-[0.5rem] mx-0 md:justify-end">
             {{ range .Site.Params.footerInternalLinks }}
             <li><a href="{{ .link }}" title="{{ .name }}">{{ .name }}</a></li>
+            <li class="font-secondary last:hidden ml-[0.25rem]">/</li>
             {{ end }}
-            <li>
+            <li class="inline-flex items-center">
                 {{ if eq .Site.Language.Lang "en" }}
                 <a href="/en/posts/index.xml" title="RSS (English)" target="_blank">
                 {{ else if eq .Site.Language.Lang "zh" }}
@@ -21,10 +25,10 @@
         </ul>
 
         <!-- External Links -->
-        <ul class="footer-navigation">
+        <ul class="list-style-none flex gap-[0.5rem] ps-0 my-[0.5rem] mx-0 md:justify-end">
             {{ range .Site.Params.footerExternalLinks }}
-            <li><a href="{{ .link }}" title="{{ .name }}" target="_blank">
-                <img src="{{ .icon }}" />
+            <li class="inline-flex items-center"><a href="{{ .link }}" title="{{ .name }}" target="_blank">
+                <img class="h-[1rem] w-auto inline-block rounded-full grayscale dark:invert" src="{{ .icon }}" />
             </a></li>
             {{ end }}
         </ul>
diff --git a/layouts/_shortcodes/callout.html b/layouts/_shortcodes/callout.html
index 62112390..a432cd4d 100644
--- a/layouts/_shortcodes/callout.html
+++ b/layouts/_shortcodes/callout.html
@@ -1,6 +1,8 @@
-<div class="callout">
+<div class="rounded-[0.25rem] leading-[1.75] py-[1rem] px-[1.25rem]
+    flex gap-[0.75rem] my-[0.5rem]"
+    style="background-color: rgba(var(--block-background-color-rgb), 0.5)">
     <div class="callout-icon">{{ index .Params 1 }}</div>
     <div class="callout-text">
         {{ index .Params 0 | markdownify }}
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/_shortcodes/link.html b/layouts/_shortcodes/link.html
index 1b9c4f79..abd1b1aa 100644
--- a/layouts/_shortcodes/link.html
+++ b/layouts/_shortcodes/link.html
@@ -1,14 +1,15 @@
-<a href="{{.Get "link" }}" target="_blank"
-    class="{{ if (.Get "type") }}{{ .Get "type" }}-link{{ else }}blog-link{{ end }}">
-    {{ if and (isset .Params "image") .Params.image }}
-    <div class="link-image">
-        <img src="{{ .Params.image }}" class="no-fancybox" alt="{{ .Params.title }}" />
-    </div>
-    {{ end }}
-    {{ if ne (.Get "type") "podcast" }}
-    <div class="link-content">
-        <h4>{{.Get "title" }}</h4>
-        <p>{{.Get "description" }}</p>
-    </div>
-    {{ end }}
+{{ if eq (.Get "type") "podcast" }}
+<a href="{{ .Get "link" }}" target="_blank" title="{{ .Get "title" }}"
+    class="block w-[calc(25%_-_1rem)] rounded-md overflow-hidden box-border p-0"
+    style="background-color: var(--block-background-color);
+        color: var(--text-color);text-decoration: none;">
+    <img src="{{ .Get "image" }}" class="block m-0!" alt="{{ .Get "title" }}">
 </a>
+{{ else }}
+<a href="{{ .Get "link" }}" target="_blank"
+    class="block w-[calc(50%_-_1rem)] rounded-[1rem] box-border px-[1.5rem]"
+    style="background-color: var(--block-background-color);
+        color: var(--text-color);text-decoration: none;">
+    <h3>{{ .Get "title" }}</h3>
+</a>
+{{ end }}
diff --git a/layouts/_shortcodes/quotecard.html b/layouts/_shortcodes/quotecard.html
index dfaf04e2..f4b4621a 100644
--- a/layouts/_shortcodes/quotecard.html
+++ b/layouts/_shortcodes/quotecard.html
@@ -1,3 +1,11 @@
-<div class="quote-card" {{ with .Get "rotate" }}style="transform: rotate({{. }}deg)"{{ end }}>
+<div class="text-[1.2rem] md:text-[1.5rem] text-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"
+    style="background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)),
+      repeating-radial-gradient(rgba(255,255,255,0.25) 0 0.0001%, rgba(255,255,255,0.04) 0 0.0002%) 50% 0 / 2500px 2500px,
+      repeating-conic-gradient(rgba(255,255,255,0.25) 0 0.0001%, rgba(255,255,255,0.04) 0 0.0002%) 60% 60% / 2500px 2500px;
+    background-blend-mode: normal, difference;"
+    {{ with .Get "rotate" }}style="transform: rotate({{. }}deg)"{{ end }}>
     {{ .Inner | markdownify }}
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/_shortcodes/sidenote.html b/layouts/_shortcodes/sidenote.html
deleted file mode 100644
index bf2a87d3..00000000
--- a/layouts/_shortcodes/sidenote.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="sidenote">
-    <h4 class="sidenote-title">{{ index .Params 0 | markdownify }}</h4>
-    <div class="sidenote-content">{{ index .Params 1 | markdownify }}</div>
-</div>