1
0
mirror of https://github.com/Damillora/Yuika synced 2024-12-25 13:43:46 +00:00

be consistent

This commit is contained in:
Damillora 2019-11-26 02:25:00 +07:00
parent 220f054a95
commit 68038ed11b
6 changed files with 53 additions and 13 deletions

View File

@ -23,6 +23,9 @@ header {
height: 50vh;
}
.no-image {
@apply bg-yuika-blue-500
}
/* 3. Content Styling */
#post p {
@ -49,7 +52,21 @@ header {
#post a {
@apply text-yuika-blue-700;
}
#post ul {
@apply list-disc;
}
#post ol {
@apply list-decimal;
}
#post code {
@apply bg-gray-200 text-yuika-blue-700;
}
#post blockquote {
@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;
}
#post .kg-card {
@apply py-4 flex flex-col items-center object-contain my-4 mx-0;
}
@ -95,6 +112,7 @@ header {
#post .kg-bookmark-card {
@apply text-black;
}
#post .kg-bookmark-container {
@apply flex flex-row justify-between text-black border border-gray-500 bg-white transition-bg;
}
@ -140,12 +158,15 @@ footer {
top: 100%;
}
.nav li {
@apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
@apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4 transition-bg;
}
.nav li a {
@apply align-middle w-full table-cell;
line-height: 2rem;
}
.nav li:hover {
@apply bg-yuika-blue-700 transition-bg;
}
@screen md {
.nav {
@ -191,6 +212,20 @@ footer {
}
}
/* 5. Post Card */
.post-card .excerpt {
max-height: 3.75rem;
}
.primary-tag-header {
@apply bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm;
}
.tag-header {
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
}
.author-header {
@apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
}
@tailwind components;
@tailwind utilities;

View File

@ -9,7 +9,7 @@
<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">
<p class="bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm">Author</p>
<span class="author-header">Author</span>
</div>
<div class="flex flex-row">
<div class="flex flex-col items-begin mr-4">

View File

@ -28,6 +28,6 @@ with a `no-image` class so we can style it accordingly.
{{else}}
<div class="h-64 bg-gray-500">
<div class="h-64 no-image">
{{/if}}

View File

@ -4,18 +4,20 @@
<div class="h-full bg-black opacity-50 group-hover:opacity-75 transition-opacity">
</div>
<div class="absolute bottom-0 px-6 py-2 mt-4 mt-0 w-full">
<div class="py-1">
{{#if primary_tag}}
{{#primary_tag}}
<div class="py-1">
<a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
</div>
<a href="{{url}}">
<span class="primary-tag-header">{{name}}</span>
</a>
{{/primary_tag}}
{{/if}}
</div>
<div class="mt-0 text-xl text-white group-hover:text-gray-300">
<a href="{{url}}"><h1 class="font-light">{{title}}</h1></a>
</div>
<div class="block mt-2 mb-4 text-sm text-white max-h-24 overflow-hidden">
<p>{{excerpt words="30"}}</p>
<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">
@ -32,10 +34,13 @@
<div class="flex-grow flex flex-col text-xs text-white">
<div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</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>
<div class="block mt-2 mb-4 text-sm text-white excerpt overflow-hidden">
<p>{{excerpt words="30"}}</p>
</div>
</div>
</div>
</article>

View File

@ -12,7 +12,7 @@
{{#if primary_tag}}
{{#primary_tag}}
<div>
<a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
<a href="{{url}}"><span class="primary-tag-header">{{name}}</span></a>
</div>
{{/primary_tag}}
{{/if}}

View File

@ -9,8 +9,8 @@
</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>
<p class="bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm">Tag</p>
<div class="my-2">
<span class="tag-header">Tag</span>
</div>
<div>
<h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>