Damillora/Yuika
1
0
Fork 0
mirror of https://github.com/Damillora/Yuika synced 2024-11-14 14:07:31 +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 f6e1eb9250
commit 79159ca397
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; @apply transition-bg;
} }
.index-navbar header { .index-navbar header {
@apply transition-bg;
background-color: transparent; background-color: transparent;
} }
.index-navbar:hover header {
@apply bg-yuika-blue-700 transition-bg;
}
.index-header { .index-header {
min-height: 300px; min-height: 300px;
height: 50vh; height: 50vh;
} }
@screen md {
.index-header {
height: 70vh;
}
}
.no-image { .no-image {
@apply bg-yuika-blue-500 @apply bg-yuika-blue-500
} }
@ -65,7 +75,7 @@ header {
@apply border-l-4 border-yuika-blue-700 pl-8; @apply border-l-4 border-yuika-blue-700 pl-8;
} }
#post pre { #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 { #post .kg-card {
@apply py-4 flex flex-col items-center object-contain my-4 mx-0; @apply py-4 flex flex-col items-center object-contain my-4 mx-0;
@ -165,7 +175,7 @@ footer {
line-height: 2rem; line-height: 2rem;
} }
.nav li:hover { .nav li:hover {
@apply bg-yuika-blue-700 transition-bg; @apply bg-yuika-blue-500 transition-bg;
} }
@screen md { @screen md {
@ -182,7 +192,7 @@ footer {
} }
.post-article { .post-article {
@apply pb-32; @apply pb-32 pt-8;
} }
.content { .content {
@ -221,7 +231,10 @@ footer {
} }
.primary-tag-header { .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 { .tag-header {
@apply bg-blue-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;
@ -229,6 +242,20 @@ footer {
.author-header { .author-header {
@apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm; @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 components;
@tailwind utilities; @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"> <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> <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>
<div class="flex flex-row items-center my-2"> <div class="author-list text-xs text-white">
<div class="flex flex-row"> <div class="author-images">
{{#foreach authors}} {{#foreach authors}}
{{#if profile_image}} {{#if profile_image}}
<div class="h-8 ml-1 mr-3"> <div class="h-8 ml-1 mr-3">
@ -31,7 +31,7 @@
{{/if}} {{/if}}
{{/foreach}} {{/foreach}}
</div> </div>
<div class="flex-grow flex flex-col text-xs text-white"> <div class="author-names">
<div> <div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p> <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
</div> </div>

60
post.hbs
View File

@ -8,37 +8,39 @@
</div> </div>
</div> </div>
<div class="absolute bottom-0 py-6 left-0 right-0"> <div class="absolute bottom-0 py-6 left-0 right-0">
<div class="container mx-auto content-full"> <div class="container mx-auto content-full">
{{#if primary_tag}} {{#if primary_tag}}
{{#primary_tag}} {{#primary_tag}}
<div> <div>
<a href="{{url}}"><span class="primary-tag-header">{{name}}</span></a> <a href="{{url}}"><span class="primary-tag-header">{{name}}</span></a>
</div> </div>
{{/primary_tag}} {{/primary_tag}}
{{/if}} {{/if}}
<div> <div>
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1> <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
</div> </div>
<div class="mb-4"> <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> <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>
<div class="flex flex-row"> <div class="author-list text-base text-white">
{{#foreach authors}} <div class="author-images">
{{#if profile_image}} {{#foreach authors}}
<div class="h-8 ml-1 mr-3"> {{#if profile_image}}
<a href="{{url}}"> <div class="h-8 ml-1 mr-3">
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/> <a href="{{url}}">
</a> <img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
</div> </a>
{{else}} </div>
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a> {{/if}}
{{/if}} {{/foreach}}
{{/foreach}} </div>
<div class="text-white"> <div class="author-names">
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p> <div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>