Damillora
/
Yuika
mirror of https://github.com/Damillora/Yuika
1
0
Fork 0
Code Issues Releases Wiki Activity

Update design for tags and authors

This commit is contained in:
Damillora 2020-11-12 02:54:23 +07:00
parent e504c91a49
commit 4f438b295a
8 changed files with 79 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/styles.css
View File

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

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

6
index.hbs
View File

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

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "yuika",
"description": "nanao.moe's blog theme",
"version": "2.1.3",
"version": "2.2.0",
"engines": {
"ghost-api": "v3"
},

14
partials/post-card.hbs
View File

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

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

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