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

2
author.hbs
View File

@ -50,7 +50,7 @@
</div> </div>
{{/author}} {{/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}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}

3
default.hbs
View File

@ -13,8 +13,9 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
<div class="w-full">
{{{body}}} {{{body}}}
</div>
<footer class="md:h-16"> <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="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"> <div class="text-white md:flex-grow text-sm mx">

4
index.hbs
View File

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

2
package.json
View File

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

8
page.hbs
View File

@ -15,7 +15,7 @@
</div> </div>
{{/primary_tag}} {{/primary_tag}}
{{/if}} {{/if}}
<div class="mb-4"> <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> </div>
@ -24,11 +24,13 @@
</div> </div>
</div> </div>
<main class="container px-2 md:px-24 lg:px-64 xl:px-64 my-6 mx-auto content" id="post"> <div class="px-4">
<div> <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}} {{content}}
</div> </div>
</main> </main>
</div>
{{/post}} {{/post}}
</article> </article>

4
partials/post-background.hbs
View File

@ -24,10 +24,10 @@ with a `no-image` class so we can style it accordingly.
} }
} }
</style> </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}} {{else}}
<div class="h-40 md:h-64 bg-black"> <div class="h-64 bg-gray-500">
{{/if}} {{/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"> <article class="relative group w-full">
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}} {{> 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> </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}} {{#if primary_tag}}
{{#primary_tag}} {{#primary_tag}}
<div class="py-1"> <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> </div>
{{/primary_tag}} {{/primary_tag}}
{{/if}} {{/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> <a href="{{url}}"><h1 class="font-light">{{title}}</h1></a>
</div> </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> <p>{{excerpt words="30"}}</p>
</div> </div>
<div class="flex flex-row items-center my-2"> <div class="flex flex-row items-center my-2">
@ -30,7 +30,7 @@
{{/if}} {{/if}}
{{/foreach}} {{/foreach}}
</div> </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> <div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p> <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> <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>
</div> </div>
<main class="container px-2 md:px-24 lg:px-64 xl:px-64 my-6 mx-auto content" id="post"> <div class="px-4">
<div> <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}} {{content}}
</div> </div>
</main> </main>
<div class="container px-24 my-6"> <div class="container mx-auto">
<div class="my-4" id="comments"> <div class="my-4" id="comments">
</div> </div>
<div class="my-4 flex flex-row justify-between"> <div class="my-4 flex flex-row justify-between">
@ -74,6 +75,7 @@
{{/next_post}} {{/next_post}}
</div> </div>
</div> </div>
</div>
{{/post}} {{/post}}
</article> </article>

2
tag.hbs
View File

@ -27,7 +27,7 @@
</div> </div>
{{/tag}} {{/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}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}