mirror of
https://github.com/Damillora/Yuika
synced 2024-11-05 02:17:32 +00:00
be consistent
This commit is contained in:
parent
220f054a95
commit
68038ed11b
@ -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;
|
||||
|
@ -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">
|
||||
|
@ -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}}
|
||||
|
@ -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">•</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">•</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>
|
||||
|
2
post.hbs
2
post.hbs
@ -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}}
|
||||
|
4
tag.hbs
4
tag.hbs
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user