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

Former-commit-id: 272a67d7a8b8752dda3cddf44482e9d85de2c4d0

1 files changed, 12 insertions, 8 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>