From 748bb50f1e0025b7b4339a82157fe4bbe95cd85d Mon Sep 17 00:00:00 2001
From: changjun <52chinaweb@gmail.com>
Date: Sun, 7 May 2023 23:28:05 +0800
Subject: [PATCH] feat: head style

---
 .eslintrc                       |  2 +-
 Elegant.nnwtheme/stylesheet.css | 16 +++++++++++++++-
 Elegant.nnwtheme/template.html  | 17 ++++++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 4af236c..cd1c4fb 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,3 @@
 {
-  "extends": [ "@antfu", "@unocss"],
+  "extends": [ "@antfu", "@unocss"]
 }
diff --git a/Elegant.nnwtheme/stylesheet.css b/Elegant.nnwtheme/stylesheet.css
index e272d2b..5c74dd6 100644
--- a/Elegant.nnwtheme/stylesheet.css
+++ b/Elegant.nnwtheme/stylesheet.css
@@ -15,10 +15,24 @@
 .xxLargeText{font-size:1.5rem;line-height:2rem;}
 /* layer: default */
 .mx-auto{margin-left:auto;margin-right:auto;}
+.mt-2{margin-top:0.5rem;}
+.mt-4{margin-top:1rem;}
+.mt-6{margin-top:1.5rem;}
+.h-18{height:4.5rem;}
 .max-w-prose{max-width:80ch;}
+.w-18{width:4.5rem;}
+.flex{display:flex;}
+.flex-col{flex-direction:column;}
+@keyframes fade-in{from{opacity:0}to{opacity:1}}
+.animate-fade-in{animation:fade-in 1s linear 1;}
+.items-center{align-items:center;}
+.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.5rem * var(--un-space-x-reverse));}
+.rounded-md{border-radius:0.375rem;}
 .px-8{padding-left:2rem;padding-right:2rem;}
-.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
+.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
 .font-sans{font-family:ui-sans-serif,system-ui;}
+.text-gray-300{--un-text-opacity:1;color:rgba(209,213,219,var(--un-text-opacity));}
+.opacity-80{opacity:0.8;}
 /* layer: my-style */
 /* my style */
 
diff --git a/Elegant.nnwtheme/template.html b/Elegant.nnwtheme/template.html
index 3a829f5..c057f9a 100644
--- a/Elegant.nnwtheme/template.html
+++ b/Elegant.nnwtheme/template.html
@@ -30,7 +30,22 @@ body: The body of the article.
 
 -->
 
-<article class="prose max-w-prose px-8 py-10 mx-auto prose-dark dark:prose-light font-sans [[text_size_class]]">
+<div class="max-w-prose mx-auto flex flex-col items-center mt-6">
+  <img src="[[avatar_src]]" class="w-18 h-18 rounded-md" alt="">
+  <div class="flex mt-4 space-x-2">
+    <a href="[[preferred_link]]" class="text-gray-300" alt="original text" title="original text [[title]]">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M27 29H13c-1.1 0-2-.9-2-2v-4h2v4h14V13h-4v-2h4c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2z"/><path fill="currentColor" d="M11 19h10v2H11zm0-4h10v2H11zm0-4h10v2H11z"/><path fill="currentColor" d="M5 3h14c1.1 0 2 .9 2 2v4h-2V5H5v14h4v2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2z"/></svg>
+    </a>
+    <a href="[[feed_link]]" class="text-gray-300" alt="[[feed_link_title]]" title="[[feed_link_title]]">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M4 24h10v2H4zm0-6h10v2H4zm22-4H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2zM6 6v6h20V6zm20 22h-6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2zm-6-8v6h6v-6z"/></svg>
+    </a>
+  </div>
+</div>
+
+<article class="animate-fade-in prose max-w-prose px-8 py-3 mx-auto prose-dark dark:prose-light font-sans [[text_size_class]]">
   <h1>[[title]]</h1>
+  <p class="mt-2 opacity-80">[[datetime_medium]]</p>
   [[body]]
 </article>
+
+