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

more iterating on design

Browse Source
This commit is contained in:
Damillora 2019-11-10 04:10:51 +07:00
parent 69e1f526a7
commit 4921167b3f
10 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/styles.css
View File

@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
@tailwind base;
@ -52,12 +53,12 @@ header {
}
@screen md {
#post .kg-width-wide .kg-image {
min-width: 125%;
min-width: 115%;
}
}
@screen lg {
#post .kg-width-wide .kg-image {
min-width: 175%;
min-width: 125%;
}
}
@screen xl {

2
author.hbs
View File

@ -50,7 +50,7 @@
</div>
{{/author}}
<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
<div class="flex flex-wrap justify-start post-feed content w-full px-4">
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}

3
default.hbs
View File

@ -13,8 +13,9 @@
{{ghost_head}}
</head>
<body class="{{body_class}}">
<div class="w-full">
{{{body}}}
</div>
<footer class="md:h-16">
<div class="flex flex-col md:flex-row justify-end md:items-center h-full mb-4 md:mb-0">
<div class="text-white md:flex-grow text-sm mx">

4
index.hbs
View File

@ -8,12 +8,10 @@
{{> "site-header"}}
</div>
</div>
<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
<div class="flex flex-wrap justify-start post-feed content w-full px-4">
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
</div>
{{#contentFor "scripts"}}
{{/contentFor}}

2
package.json
View File

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

8
page.hbs
View File

@ -15,7 +15,7 @@
</div>
{{/primary_tag}}
{{/if}}
<div class="mb-4">
<div>
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
</div>
</div>
@ -24,11 +24,13 @@
</div>
</div>
<main class="container px-2 md:px-24 lg:px-64 xl:px-64 my-6 mx-auto content" id="post">
<div>
<div class="px-4">
<main class="container mx-auto content" id="post">
<div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
{{content}}
</div>
</main>
</div>
{{/post}}
</article>

4
partials/post-background.hbs
View File

@ -24,10 +24,10 @@ with a `no-image` class so we can style it accordingly.
}
}
</style>
<div class="h-40 md:h-64 responsive-{{slug}}-img bg-cover bg-center">
<div class="h-64 responsive-{{slug}}-img bg-cover bg-center">
{{else}}
<div class="h-40 md:h-64 bg-black">
<div class="h-64 bg-gray-500">
{{/if}}

14
partials/post-card.hbs
View File

@ -1,21 +1,21 @@
<div class="post-card w-full md:w-1/2 px-3 py-6">
<div class="post-card w-full md:w-1/2 xl:w-1/3 px-3 py-6 ">
<article class="relative group w-full">
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="h-full md:bg-black md:opacity-50 md:group-hover:opacity-75 transition-opacity">
<div class="h-full bg-black opacity-50 group-hover:opacity-75 transition-opacity">
</div>
</div>
<div class="md:absolute md:bottom-0 md:px-6 md:py-2 mt-4 md:mt-0 w-full">
<div class="absolute bottom-0 px-6 py-2 mt-4 mt-0 w-full">
{{#if primary_tag}}
{{#primary_tag}}
<div class="py-1">
<a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-2 md:px-2 md:py-1 text-white text-sm md:text-xs">{{name}}</p></a>
<a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
</div>
{{/primary_tag}}
{{/if}}
<div class="text-black mt-2 md:mt-0 text-xl md:text-white md:group-hover:text-gray-300">
<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 text-black mt-2 mb-4 text-sm md:text-white">
<div class="block mt-2 mb-4 text-sm text-white">
<p>{{excerpt words="30"}}</p>
</div>
<div class="flex flex-row items-center my-2">
@ -30,7 +30,7 @@
{{/if}}
{{/foreach}}
</div>
<div class="flex-grow flex flex-coltext-black text-xs md:text-white">
<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>

8
post.hbs
View File

@ -43,12 +43,13 @@
</div>
</div>
<main class="container px-2 md:px-24 lg:px-64 xl:px-64 my-6 mx-auto content" id="post">
<div>
<div class="px-4">
<main class="container mx-auto content" id="post">
<div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
{{content}}
</div>
</main>
<div class="container px-24 my-6">
<div class="container mx-auto">
<div class="my-4" id="comments">
</div>
<div class="my-4 flex flex-row justify-between">
@ -74,6 +75,7 @@
{{/next_post}}
</div>
</div>
</div>
{{/post}}
</article>

2
tag.hbs
View File

@ -27,7 +27,7 @@
</div>
{{/tag}}
<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
<div class="flex flex-wrap justify-start post-feed content w-full px-4">
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}