feat: head style

This commit is contained in:
changjun
2023-05-07 23:28:05 +08:00
parent e82e8f7b51
commit 748bb50f1e
3 changed files with 32 additions and 3 deletions

View File

@@ -1,3 +1,3 @@
{
"extends": [ "@antfu", "@unocss"],
"extends": [ "@antfu", "@unocss"]
}

View File

@@ -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 */

View File

@@ -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>