mirror of
https://github.com/Damillora/Yuika
synced 2024-12-25 05:33:45 +00:00
Update design for tags and authors
This commit is contained in:
parent
e504c91a49
commit
4f438b295a
@ -329,15 +329,21 @@ footer {
|
||||
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-300 ease-in-out;
|
||||
}
|
||||
.primary-tag-header:hover {
|
||||
@apply bg-blue-900 transition duration-300 ease-in-out;
|
||||
@apply transition-all duration-300 ease-in-out underline;
|
||||
}
|
||||
.tag-header {
|
||||
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
|
||||
}
|
||||
.tag-accent-color {
|
||||
@apply inline-block rounded-full align-text-bottom h-16 w-16;
|
||||
|
||||
}
|
||||
.author-header {
|
||||
@apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
|
||||
}
|
||||
|
||||
.author-image {
|
||||
@apply inline-block rounded-full align-text-bottom h-16 w-16;
|
||||
}
|
||||
.author-list {
|
||||
@apply flex flex-row items-center my-2 py-2;
|
||||
}
|
||||
@ -347,6 +353,9 @@ footer {
|
||||
.author-names {
|
||||
@apply flex-grow flex flex-col;
|
||||
}
|
||||
.author-names a:hover {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
/* 6. Post feed */
|
||||
.post-feed {
|
||||
|
||||
18
author.hbs
18
author.hbs
@ -7,20 +7,16 @@
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-6 h-full left-0 right-0">
|
||||
<div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
|
||||
<div class="my-2">
|
||||
<span class="author-header">Author</span>
|
||||
<div>
|
||||
<span class="text-white text-sm">Author</span>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-col items-begin mr-4">
|
||||
{{#if profile_image}}
|
||||
<div class="my-2">
|
||||
<img class="rounded-full h-16" src="{{profile_image}}" alt="{{name}}" />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="flex flex-col items-begin my-2">
|
||||
<div>
|
||||
<h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>
|
||||
<div class="flex flex-row items-center mb-2">
|
||||
{{#if profile_image}}
|
||||
<img class="author-image" src="{{profile_image}}" alt="{{name}}" />
|
||||
{{/if}}
|
||||
<h1 class="text-white text-2xl md:text-4xl ml-4">{{name}}</h1>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
||||
|
||||
@ -5,20 +5,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-4 left-0 right-0">
|
||||
<div class="container mx-auto content-full flex flex-col">
|
||||
<div class="container mx-auto content-full flex flex-col py-4">
|
||||
{{#if @site.logo}}
|
||||
<div class="w-24 h-24 py-4">
|
||||
<img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
|
||||
</div>
|
||||
{{/if}}
|
||||
<a href="{{@site.url}}" class="block flex flex-col pl-4 flex-grow">
|
||||
<div class="block flex flex-col pl-4 flex-grow">
|
||||
<div class="">
|
||||
<h1 class="text-2xl md:text-4xl font-light text-white">{{@site.title}}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<p class="text-lg md:text-xl font-light text-white">{{@site.description}}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "yuika",
|
||||
"description": "nanao.moe's blog theme",
|
||||
"version": "2.1.3",
|
||||
"version": "2.2.0",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
|
||||
@ -1,17 +1,25 @@
|
||||
<div class="post-card">
|
||||
<article class="relative md:flex md:flex-row w-full h-full hover:bg-gray-400 transition duration-500 ease-in-out py-4 px-4">
|
||||
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<article class="relative md:flex md:flex-row w-full h-full transition duration-500 ease-in-out py-4 px-4">
|
||||
<a href="{{url}}">
|
||||
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
</a>
|
||||
<div class="md:pl-4">
|
||||
<div class="pt-4 md:pt-0 py-1">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
{{#if accent_color}}
|
||||
<a href="{{url}}">
|
||||
<span class="primary-tag-header" style="background-color: {{accent_color}};">{{name}}</span>
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}">
|
||||
<span class="primary-tag-header">{{name}}</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="mt-0 text-xl hover:text-yuika-blue-700 transition duration-500 ease-in-out">
|
||||
<div class="mt-0 text-yuika-blue-700 hover:underline transition duration-500 ease-in-out">
|
||||
<a href="{{url}}"><h1 class="text-xl md:text-2xl font-light">{{title}}</h1></a>
|
||||
</div>
|
||||
<div class="mt-0 text-xs">
|
||||
|
||||
14
partials/primary-tag.hbs
Normal file
14
partials/primary-tag.hbs
Normal file
@ -0,0 +1,14 @@
|
||||
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
{{#if accent_color}}
|
||||
<a href="{{url}}">
|
||||
<span class="primary-tag-header" style="background-color: {{accent_color}};">{{name}}</span>
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}">
|
||||
<span class="primary-tag-header">{{name}}</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
26
post.hbs
26
post.hbs
@ -8,13 +8,9 @@
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-4 left-0 right-0">
|
||||
<div class="container mx-auto content-full">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<div>
|
||||
<a href="{{url}}"><span class="primary-tag-header">{{name}}</span></a>
|
||||
</div>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
<div>
|
||||
{{> primary-tag}}
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
|
||||
</div>
|
||||
@ -81,9 +77,19 @@
|
||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||
{{#if related_posts}}
|
||||
{{#../primary_tag}}
|
||||
<div class="px-3 w-full">
|
||||
<p class="text-2xl">More in <a href="{{url}}" class="primary-tag-header text-2xl">{{name}}</a> </p>
|
||||
</div>
|
||||
<div class="px-3 w-full">
|
||||
<p class="text-2xl">More in
|
||||
{{#if accent_color}}
|
||||
<a href="{{url}}">
|
||||
<span class="primary-tag-header text-2xl" style="background-color: {{accent_color}};">{{name}}</span>
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}">
|
||||
<span class="primary-tag-header text-2xl">{{name}}</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</p>
|
||||
</div>
|
||||
{{/../primary_tag}}
|
||||
<div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
|
||||
{{#foreach related_posts}}
|
||||
|
||||
24
tag.hbs
24
tag.hbs
@ -8,19 +8,27 @@
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-6 h-full left-0 right-0">
|
||||
<div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
|
||||
<div class="my-2">
|
||||
<span class="tag-header">Tag</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>
|
||||
<span class="text-white text-sm">Tag</span>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
{{#if description}}
|
||||
<p>{{description}}</p>
|
||||
<div class="flex flex-row items-center py-2">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<p>A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}</p>
|
||||
<span class="tag-accent-color bg-blue-700"></span>
|
||||
{{/if}}
|
||||
<h1 class="text-white text-2xl md:text-4xl ml-4">
|
||||
{{name}}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="text-white text-sm">
|
||||
{{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
</div>
|
||||
{{#if description}}
|
||||
<div class="text-white pt-4">
|
||||
<p>{{description}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user