Damillora/Yuika
1
0
Fork 0
mirror of https://github.com/Damillora/Yuika synced 2024-12-25 05:33:45 +00:00
Code Issues Releases Wiki Activity

Theme tweaks

Browse Source
This commit is contained in:
Damillora 2020-06-16 17:47:02 +07:00
parent 36d8fb6dcb
commit 80a1d7ef6f
3 changed files with 65 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/css/styles.css
View File

@ -16,13 +16,23 @@ header {
@apply transition-bg;
}
.index-navbar header {
@apply transition-bg;
background-color: transparent;
}
.index-navbar:hover header {
@apply bg-yuika-blue-700 transition-bg;
}
.index-header {
min-height: 300px;
height: 50vh;
}
@screen md {
.index-header {
height: 70vh;
}
}
.no-image {
@apply bg-yuika-blue-500
}
@ -65,7 +75,7 @@ header {
@apply border-l-4 border-yuika-blue-700 pl-8;
}
#post pre {
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 border border-yuika-blue-500;
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500;
}
#post .kg-card {
@apply py-4 flex flex-col items-center object-contain my-4 mx-0;
@ -165,7 +175,7 @@ footer {
line-height: 2rem;
}
.nav li:hover {
@apply bg-yuika-blue-700 transition-bg;
@apply bg-yuika-blue-500 transition-bg;
}
@screen md {
@ -182,7 +192,7 @@ footer {
}
.post-article {
@apply pb-32;
@apply pb-32 pt-8;
}
.content {
@ -221,7 +231,10 @@ footer {
}
.primary-tag-header {
@apply bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm;
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition-bg;
}
.primary-tag-header:hover {
@apply bg-blue-900 transition-bg;
}
.tag-header {
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
@ -229,6 +242,20 @@ footer {
.author-header {
@apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
}
.author-list {
@apply flex flex-row items-center my-2 py-2 transition-bg;
}
.author-list:hover {
@apply bg-red-700 transition-bg;
}
.author-images {
@apply flex flex-row;
}
.author-names {
@apply flex-grow flex flex-col;
}
@tailwind components;
@tailwind utilities;

6
partials/post-card.hbs
View File

@ -19,8 +19,8 @@
<div class="mt-0 text-xs text-white group-hover:text-gray-300">
<p><span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
</div>
<div class="flex flex-row items-center my-2">
<div class="flex flex-row">
<div class="author-list text-xs text-white">
<div class="author-images">
{{#foreach authors}}
{{#if profile_image}}
<div class="h-8 ml-1 mr-3">
@ -31,7 +31,7 @@
{{/if}}
{{/foreach}}
</div>
<div class="flex-grow flex flex-col text-xs text-white">
<div class="author-names">
<div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
</div>

60
post.hbs
View File

@ -8,37 +8,39 @@
</div>
</div>
<div class="absolute bottom-0 py-6 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>
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
</div>
<div class="mb-4">
<p><span class="text-white text-sm"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
</div>
<div class="flex flex-row">
{{#foreach authors}}
{{#if profile_image}}
<div class="h-8 ml-1 mr-3">
<a href="{{url}}">
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
</a>
</div>
{{else}}
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}}
{{/foreach}}
<div class="text-white">
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
<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>
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
</div>
<div class="mb-4">
<p><span class="text-white text-sm"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
</div>
<div class="author-list text-base text-white">
<div class="author-images">
{{#foreach authors}}
{{#if profile_image}}
<div class="h-8 ml-1 mr-3">
<a href="{{url}}">
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
</a>
</div>
{{/if}}
{{/foreach}}
</div>
<div class="author-names">
<div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>