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

Yuika v2.0

Browse Source
This commit is contained in:
Damillora 2020-11-11 11:54:56 +07:00
parent 9c42ad1b30
commit e7ea38a451
14 changed files with 225 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
assets/css/styles.css
View File

@ -15,15 +15,29 @@ header {
/* 2. Site Header */ /* 2. Site Header */
.index-navbar { .index-navbar {
top: 0;
z-index: 10; z-index: 10;
@apply transition duration-500 ease-in-out; width: 100vw;
height: 4rem;
overflow: hidden;
@apply fixed transition-all duration-300 ease-in-out;
}
.index-navbar.enabled {
height: 100vh;
}
@screen md {
.index-navbar {
width: 4rem;
height: 100vh;
}
.index-navbar.enabled {
width: 100vw;
}
} }
.index-navbar header { .index-navbar header {
@apply transition duration-500 ease-in-out; z-index: 12;
background-color: transparent; @apply transition duration-300 ease-in-out h-full;
} background-color: rgba(0,0,0,0.5);
.index-navbar:hover header {
@apply bg-yuika-blue-700 transition duration-500 ease-in-out;
} }
.index-header { .index-header {
min-height: 300px; min-height: 300px;
@ -33,12 +47,43 @@ header {
@apply bg-yuika-blue-500 @apply bg-yuika-blue-500
} }
.site-title {
@apply flex flex-row transition duration-300 ease-in-out;
}
.site-head { .site-head {
@apply flex flex-row flex-grow py-2 transition duration-500 ease-in-out pl-4 flex flex-row flex-grow py-2; @apply flex flex-row flex-grow py-2 transition duration-300 ease-in-out pl-4 h-16;
} }
.site-head:hover { .site-head:hover {
@apply bg-yuika-blue-500; @apply bg-yuika-blue-500;
} }
.site-background {
position: absolute;
top: -23vh;
width: 100vw;
height: 100vh;
@apply transition-all duration-300 ease-in-out;
}
.index-navbar.enabled .site-background {
top: 0;
}
@screen md {
.site-background {
top:0;
right: -25vw;
}
.index-navbar.enabled .site-background {
top: 0;
right: 0;
}
}
.main-container {
@apply pt-16 relative;
}
@screen md {
.main-container {
@apply pt-0 ml-16 min-h-screen;
}
}
/* 3. Content Styling */ /* 3. Content Styling */
#post p { #post p {
@apply my-4; @apply my-4;
@ -146,10 +191,10 @@ header {
} }
#post .kg-bookmark-container { #post .kg-bookmark-container {
@apply flex flex-row justify-between text-black border-l-4 border-yuika-blue-700 bg-white transition duration-500 ease-in-out; @apply flex flex-row justify-between text-black border-l-4 border-yuika-blue-700 bg-white transition duration-300 ease-in-out;
} }
#post .kg-bookmark-container:hover { #post .kg-bookmark-container:hover {
@apply bg-gray-400 transition duration-500 ease-in-out; @apply bg-gray-400 transition duration-300 ease-in-out;
} }
#post .kg-bookmark-content { #post .kg-bookmark-content {
@apply w-2/3 py-4 px-4; @apply w-2/3 py-4 px-4;
@ -189,49 +234,30 @@ footer {
.nav-group { .nav-group {
} }
.nav-group #menushow { #menushow {
@apply cursor-pointer relative px-2 py-2 transition duration-500 ease-in-out; @apply cursor-pointer w-16 h-16 relative px-2 py-2 transition duration-300 ease-in-out text-center whitespace-no-wrap;
} }
.nav-group #menushow:hover { #menushow:hover {
@apply bg-yuika-blue-500 @apply bg-yuika-blue-500
} }
.nav { .nav {
@apply hidden flex-row w-full pl-0 my-0 absolute bg-yuika-blue-700 left-0 right-0; background: transparent;
@apply flex-col w-full pl-0 my-0;
top: 100%; top: 100%;
} }
.nav-group:hover .nav {
@apply block;
}
.nav li { .nav li {
@apply flex flex-row justify-start items-center my-0 text-white text-sm h-12 transition duration-500 ease-in-out; @apply w-full flex flex-row justify-start items-center my-0 text-white text-sm h-12 transition duration-300 ease-in-out;
} }
.nav li a { .nav li a {
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2; @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
} }
.nav li:hover { .nav li:hover {
@apply bg-yuika-blue-500 transition duration-500 ease-in-out; @apply bg-yuika-blue-500 transition duration-300 ease-in-out;
} }
@screen md { @screen md {
.nav-group #menushow {
@apply py-0;
}
.nav-group:hover .nav {
@apply flex;
}
.nav { .nav {
@apply flex static w-auto flex-row bg-transparent h-full; @apply pl-16;
} }
.nav li {
@apply object-contain justify-center items-center border-b-0 border-t-0 my-0 flex h-full;
}
.nav li a {
@apply justify-center;
}
}
.nav-fixed {
@apply bg-yuika-blue-700;
} }
.post-article { .post-article {
@ -266,17 +292,19 @@ footer {
} }
/* 5. Post Card */ /* 5. Post Card */
.post-background {
height: 18rem;
}
.post-card { .post-card {
@apply h-full;
}
@screen md {
.post-image {
max-width: 320px;
}
} }
.primary-tag-header { .primary-tag-header {
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-500 ease-in-out; @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-300 ease-in-out;
} }
.primary-tag-header:hover { .primary-tag-header:hover {
@apply bg-blue-900 transition duration-500 ease-in-out; @apply bg-blue-900 transition duration-300 ease-in-out;
} }
.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;
@ -297,17 +325,7 @@ footer {
/* 6. Post feed */ /* 6. Post feed */
.post-feed { .post-feed {
@apply grid grid-cols-1 row-gap-4 col-gap-4 my-8; @apply grid grid-cols-1 row-gap-4 my-8;
}
@screen md {
.post-feed {
@apply grid grid-cols-2;
}
}
@screen xl {
.post-feed {
@apply grid grid-cols-3;
}
} }
/* 7. Default transitions */ /* 7. Default transitions */

55
assets/js/nav-collapse.js
View File

@ -1,49 +1,6 @@
$(document).ready(function () { $("#menushow").click(function(){
$(".index-navbar").toggleClass('enabled');
var nav = document.querySelector('.index-navbar'); })
var feed = document.querySelector('.content'); $(".nav li").click(function(){
$(".index-navbar").toggleClass('enabled');
var lastScrollY = window.scrollY; })
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = $(document).height();
var ticking = false;
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = $(document).height();
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
function update() {
var trigger = feed.getBoundingClientRect().top + window.scrollY;
var progressMax = lastDocumentHeight - lastWindowHeight;
// show/hide nav
if (lastScrollY >= nav.getBoundingClientRect().bottom) {
nav.classList.add('nav-fixed');
} else {
nav.classList.remove('nav-fixed');
}
ticking = false;
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize, false);
update();
});

1
author.hbs
View File

@ -1,6 +1,5 @@
{{!< default}} {{!< default}}
{{#author}} {{#author}}
{{> "site-header"}}
<div class="relative group index-header"> <div class="relative group index-header">
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="w-full h-full opacity-50 bg-black"> <div class="w-full h-full opacity-50 bg-black">

28
default.hbs
View File

@ -20,33 +20,11 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
<div class="w-full min-h-screen"> {{> "site-header"}}
<div class="main-container">
{{{body}}} {{{body}}}
{{> footer}}
</div> </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 py-4">
<p><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</p>
</div>
<div class="flex flex-col md:flex-row text-white text-sm items-end text-right">
<div class="px-4 py-4">
<a href="{{@site.url}}">Latest Posts</a>
</div>
<div class="px-4 py-4">
{{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
</div>
<div class="px-4 py-4">
{{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
</div>
<div class="px-4 py-4">
Powered by <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
</div>
<div class="px-4 py-4">
<a href="https://github.com/Damillora/Yuika">Yuika</a> Theme by <a href="https://nanao.moe" target="_blank" rel="noopener">Damillora</a>
</div>
</div>
</div>
</footer>
<script <script
src="https://code.jquery.com/jquery-3.4.1.min.js" src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

6
index.hbs
View File

@ -1,11 +1,13 @@
{{!< default}} {{!< default}}
{{> "site-header"}} {{!--
<div class="relative group index-header"> <div class="relative group index-header">
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> header-background background=@site.cover_image}}
<div class="w-full h-full opacity-50 bg-black"> <div class="w-full h-full opacity-50 bg-black">
</div> </div>
</div> </div>
</div> </div>
--}}
<div class="post-feed content w-full px-2"> <div class="post-feed content w-full px-2">
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card"}}

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": "1.1.0", "version": "2.0.0",
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },

1
page.hbs
View File

@ -1,7 +1,6 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
{{> "site-header"}}
<div class="relative group index-header"> <div class="relative group index-header">
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="w-full h-full opacity-50 bg-black"> <div class="w-full h-full opacity-50 bg-black">

25
partials/footer.hbs Normal file
View File

@ -0,0 +1,25 @@
<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 py-4">
<p><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</p>
</div>
<div class="flex flex-col md:flex-row text-white text-sm items-end text-right">
<div class="px-4 py-4">
<a href="{{@site.url}}">Latest Posts</a>
</div>
<div class="px-4 py-4">
{{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
</div>
<div class="px-4 py-4">
{{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
</div>
<div class="px-4 py-4">
Powered by <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
</div>
<div class="px-4 py-4">
<a href="https://github.com/Damillora/Yuika">Yuika</a> Theme by <a href="https://nanao.moe" target="_blank" rel="noopener">Damillora</a>
</div>
</div>
</div>
</footer>

16
partials/post-background.hbs
View File

@ -10,18 +10,10 @@ If the template in question has a background image, then we render responsive im
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
with a `no-image` class so we can style it accordingly. with a `no-image` class so we can style it accordingly.
--}} --}}
<div>
{{#if feature_image}} {{#if feature_image}}
<img class="post-image" src="{{img_url feature_image size='m'}}">
<style type="text/css">
.responsive-{{slug}}-img {
background-image: url({{img_url feature_image size='m'}});
}
</style>
<div class="post-background responsive-{{slug}}-img bg-cover bg-center bg-yuika-blue-500">
{{else}} {{else}}
<img class="post-image" src="{{img_url @site.cover_image size='m'}}">
<div class="post-background no-image">
{{/if}} {{/if}}
</div>

80
partials/post-card.hbs
View File

@ -1,47 +1,45 @@
<div class="post-card"> <div class="post-card">
<article class="relative w-full h-full hover:bg-gray-400 transition duration-500 ease-in-out py-4 px-4"> <article class="relative md:flex md:flex-row w-full h-full hover:bg-gray-400 transition duration-500 ease-in-out py-4 px-4">
{{> 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"> <div class="md:pl-4">
</div> <div class="pt-4 md:pt-0 py-1">
</div> {{#if primary_tag}}
<div class="mt-4 py-1"> {{#primary_tag}}
{{#if primary_tag}} <a href="{{url}}">
{{#primary_tag}} <span class="primary-tag-header">{{name}}</span>
<a href="{{url}}"> </a>
<span class="primary-tag-header">{{name}}</span> {{/primary_tag}}
</a> {{/if}}
{{/primary_tag}}
{{/if}}
</div>
<div class="mt-0 text-xl hover:text-yuika-blue-700 transition duration-500 ease-in-out">
<a href="{{url}}"><h1 class="font-light">{{title}}</h1></a>
</div>
<div class="mt-0 text-xs">
<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>
{{#if authors}}
<div class="author-list text-xs ">
<div class="author-images">
{{#foreach authors}}
{{#if profile_image}}
<div class="h-8 ml-1 mr-3">
<a href="{{url}}">
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
</a>
</div>
{{/if}}
{{/foreach}}
</div> </div>
<div class="author-names"> <div class="mt-0 text-xl hover:text-yuika-blue-700 transition duration-500 ease-in-out">
<div> <a href="{{url}}"><h1 class="text-3xl font-light">{{title}}</h1></a>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p> </div>
<div class="mt-0 text-sm">
<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>
{{#if authors}}
<div class="author-list text-sm ">
<div class="author-images">
{{#foreach authors}}
{{#if profile_image}}
<div class="h-8 ml-1 mr-3">
<a href="{{url}}">
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
</a>
</div>
{{/if}}
{{/foreach}}
</div>
<div class="author-names">
<div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
</div>
</div> </div>
</div> </div>
{{/if}}
<div class="block mt-2 mb-4 text-base excerpt overflow-hidden">
<p>{{excerpt words="30"}}</p>
</div>
</div> </div>
{{/if}} </article>
<div class="block mt-2 mb-4 text-sm excerpt overflow-hidden">
<p>{{excerpt words="30"}}</p>
</div>
</article>
</div> </div>

47
partials/site-background.hbs Normal file
View File

@ -0,0 +1,47 @@
{{!--
Wow what the hell is going on in here even?
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
be a background image using CSS, we end up with a handful of inline styles.
If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
with a `no-image` class so we can style it accordingly.
--}}
{{#if @site.cover_image}}
<style type="text/css">
.responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='xl'}});
}
@media(max-width: 1000px) {
.responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='l'}});
background-image: -webkit-image-set(url({{img_url @site.cover_image size='l'}}) 1x,
url({{img_url @site.cover_image size='xl'}}) 2x);
background-image: image-set(url({{img_url @site.cover_image size='l'}}) 1x,
url({{img_url @site.cover_image size='xl'}}) 2x);
}
}
@media(max-width: 600px) {
.responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='m'}});
background-image: -webkit-image-set(url({{img_url @site.cover_image size='m'}}) 1x,
url({{img_url @site.cover_image size='l'}}) 2x);
background-image: image-set(url({{img_url @site.cover_image size='m'}}) 1x,
url({{img_url @site.cover_image size='l'}}) 2x);
}
}
</style>
<div class="h-full w-full responsive-site-header-img bg-cover bg-center bg-yuika-blue-500">
{{else}}
<div class="h-full w-full no-image">
{{/if}}

40
partials/site-header.hbs
View File

@ -1,24 +1,30 @@
<div class="w-full flex flex-row justify-begin items-center fixed index-navbar"> <div class="index-navbar">
<header class="flex flex-row w-full relative py-0"> <div class="site-background">
<div class="site-head"> {{> site-background }}
{{#if @site.logo}} </div>
<div class="w-12 h-12"> </div>
<img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain"> <header class="flex flex-col w-full relative py-0">
<div class="site-title">
<div id="menushow" class="py-2">
<span class="h-12 w-12 px-2 py-3 text-white material-icons" alt="menu">menu</span>
</div> </div>
{{/if}} <div class="site-head">
<a href="{{@site.url}}" class="block flex flex-col pl-4 flex-grow"> {{#if @site.logo}}
<div class=""> <div class="w-12 h-12">
<h1 class="text-lg text-white">{{@site.title}}</h1> <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
</div> </div>
<div class=""> {{/if}}
<p class="text-sm text-white">{{@site.description}}</p> <a href="{{@site.url}}" class="block flex flex-col pl-4 flex-grow">
</div> <div class="">
</a> <h1 class="text-lg text-white">{{@site.title}}</h1>
</div>
<div class="">
<p class="text-sm text-white">{{@site.description}}</p>
</div>
</a>
</div>
</div> </div>
<div class="nav-group"> <div class="nav-group">
<div id="menushow" class="">
<span class="h-12 w-12 px-3 py-3 text-white md:hidden material-icons" alt="menu">menu</span>
</div>
{{navigation}} {{navigation}}
</div> </div>
</header> </header>

3
post.hbs
View File

@ -1,7 +1,6 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
{{> "site-header"}}
<div class="relative group index-header"> <div class="relative group index-header">
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="h-full opacity-50 bg-black"> <div class="h-full opacity-50 bg-black">
@ -86,7 +85,7 @@
<p class="text-2xl">More in <a href="{{url}}" class="primary-tag-header text-2xl">{{name}}</a> </p> <p class="text-2xl">More in <a href="{{url}}" class="primary-tag-header text-2xl">{{name}}</a> </p>
</div> </div>
{{/../primary_tag}} {{/../primary_tag}}
<div class="grid grid-rows-3 grid-cols-1 md:grid-rows-2 md:grid-cols-2 xl:grid-rows-1 xl:grid-cols-3 row-gap-4 col-gap-4 my-4"> <div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
{{#foreach related_posts}} {{#foreach related_posts}}
{{> post-card}} {{> post-card}}
{{/foreach}} {{/foreach}}

1
tag.hbs
View File

@ -1,7 +1,6 @@
{{!< default}} {{!< default}}
{{#tag}} {{#tag}}
{{> "site-header"}}
<div class="relative group index-header"> <div class="relative group index-header">
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="w-full h-full opacity-50 bg-black"> <div class="w-full h-full opacity-50 bg-black">