feat: footer style

This commit is contained in:
changjun
2023-05-07 23:43:39 +08:00
parent 748bb50f1e
commit e7acd9e7a9
2 changed files with 28 additions and 14 deletions

View File

@@ -15,6 +15,7 @@
.xxLargeText{font-size:1.5rem;line-height:2rem;} .xxLargeText{font-size:1.5rem;line-height:2rem;}
/* layer: default */ /* layer: default */
.mx-auto{margin-left:auto;margin-right:auto;} .mx-auto{margin-left:auto;margin-right:auto;}
.mb-6{margin-bottom:1.5rem;}
.mt-2{margin-top:0.5rem;} .mt-2{margin-top:0.5rem;}
.mt-4{margin-top:1rem;} .mt-4{margin-top:1rem;}
.mt-6{margin-top:1.5rem;} .mt-6{margin-top:1.5rem;}
@@ -30,8 +31,11 @@
.rounded-md{border-radius:0.375rem;} .rounded-md{border-radius:0.375rem;}
.px-8{padding-left:2rem;padding-right:2rem;} .px-8{padding-left:2rem;padding-right:2rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;} .py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.text-center{text-align:center;}
.font-sans{font-family:ui-sans-serif,system-ui;} .font-sans{font-family:ui-sans-serif,system-ui;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-gray-300{--un-text-opacity:1;color:rgba(209,213,219,var(--un-text-opacity));} .text-gray-300{--un-text-opacity:1;color:rgba(209,213,219,var(--un-text-opacity));}
.opacity-60{opacity:0.6;}
.opacity-80{opacity:0.8;} .opacity-80{opacity:0.8;}
/* layer: my-style */ /* layer: my-style */
/* my style */ /* my style */

View File

@@ -30,22 +30,32 @@ body: The body of the article.
--> -->
<div class="max-w-prose mx-auto flex flex-col items-center mt-6"> <div class="animate-fade-in max-w-prose mx-auto font-sans [[text_size_class]]">
<img src="[[avatar_src]]" class="w-18 h-18 rounded-md" alt="">
<div class="flex mt-4 space-x-2"> <div class="flex flex-col items-center mt-6">
<a href="[[preferred_link]]" class="text-gray-300" alt="original text" title="original text [[title]]"> <img src="[[avatar_src]]" class="w-18 h-18 rounded-md" alt="">
<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> <div class="flex mt-4 space-x-2">
</a> <a href="[[preferred_link]]" class="text-gray-300" alt="original text" title="original text [[title]]">
<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="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>
<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>
</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> </div>
<article class="prose px-8 py-3 prose-dark dark:prose-light">
<h1>[[title]]</h1>
<p class="mt-2 opacity-80">[[datetime_medium]]</p>
[[body]]
</article>
<footer class="text-center flex flex-col mb-6">
<p class="opacity-60 text-sm">- THE END -</p>
<a href="[[feed_link]]" class="">[[byline]]</a>
</footer>
</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>