mirror of
https://github.com/Damillora/Yuika
synced 2024-11-22 09:17:33 +00:00
Yuika v2.0
This commit is contained in:
parent
9c42ad1b30
commit
e7ea38a451
@ -15,15 +15,29 @@ header {
|
||||
|
||||
/* 2. Site Header */
|
||||
.index-navbar {
|
||||
top: 0;
|
||||
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 {
|
||||
@apply transition duration-500 ease-in-out;
|
||||
background-color: transparent;
|
||||
}
|
||||
.index-navbar:hover header {
|
||||
@apply bg-yuika-blue-700 transition duration-500 ease-in-out;
|
||||
z-index: 12;
|
||||
@apply transition duration-300 ease-in-out h-full;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.index-header {
|
||||
min-height: 300px;
|
||||
@ -33,12 +47,43 @@ header {
|
||||
@apply bg-yuika-blue-500
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@apply flex flex-row transition duration-300 ease-in-out;
|
||||
}
|
||||
.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 {
|
||||
@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 */
|
||||
#post p {
|
||||
@apply my-4;
|
||||
@ -146,10 +191,10 @@ header {
|
||||
}
|
||||
|
||||
#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 {
|
||||
@apply bg-gray-400 transition duration-500 ease-in-out;
|
||||
@apply bg-gray-400 transition duration-300 ease-in-out;
|
||||
}
|
||||
#post .kg-bookmark-content {
|
||||
@apply w-2/3 py-4 px-4;
|
||||
@ -189,49 +234,30 @@ footer {
|
||||
.nav-group {
|
||||
|
||||
}
|
||||
.nav-group #menushow {
|
||||
@apply cursor-pointer relative px-2 py-2 transition duration-500 ease-in-out;
|
||||
#menushow {
|
||||
@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
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.nav-group:hover .nav {
|
||||
@apply block;
|
||||
}
|
||||
.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 {
|
||||
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
|
||||
}
|
||||
.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 {
|
||||
.nav-group #menushow {
|
||||
@apply py-0;
|
||||
}
|
||||
.nav-group:hover .nav {
|
||||
@apply flex;
|
||||
}
|
||||
.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 {
|
||||
@ -266,17 +292,19 @@ footer {
|
||||
}
|
||||
|
||||
/* 5. Post Card */
|
||||
.post-background {
|
||||
height: 18rem;
|
||||
}
|
||||
.post-card {
|
||||
@apply h-full;
|
||||
|
||||
}
|
||||
@screen md {
|
||||
.post-image {
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
@apply bg-blue-900 transition duration-500 ease-in-out;
|
||||
@apply bg-blue-900 transition duration-300 ease-in-out;
|
||||
}
|
||||
.tag-header {
|
||||
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
|
||||
@ -297,17 +325,7 @@ footer {
|
||||
|
||||
/* 6. Post feed */
|
||||
.post-feed {
|
||||
@apply grid grid-cols-1 row-gap-4 col-gap-4 my-8;
|
||||
}
|
||||
@screen md {
|
||||
.post-feed {
|
||||
@apply grid grid-cols-2;
|
||||
}
|
||||
}
|
||||
@screen xl {
|
||||
.post-feed {
|
||||
@apply grid grid-cols-3;
|
||||
}
|
||||
@apply grid grid-cols-1 row-gap-4 my-8;
|
||||
}
|
||||
|
||||
/* 7. Default transitions */
|
||||
|
||||
@ -1,49 +1,6 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
var nav = document.querySelector('.index-navbar');
|
||||
var feed = document.querySelector('.content');
|
||||
|
||||
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();
|
||||
|
||||
});
|
||||
|
||||
$("#menushow").click(function(){
|
||||
$(".index-navbar").toggleClass('enabled');
|
||||
})
|
||||
$(".nav li").click(function(){
|
||||
$(".index-navbar").toggleClass('enabled');
|
||||
})
|
||||
@ -1,6 +1,5 @@
|
||||
{{!< default}}
|
||||
{{#author}}
|
||||
{{> "site-header"}}
|
||||
<div class="relative group index-header">
|
||||
{{> 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">
|
||||
|
||||
28
default.hbs
28
default.hbs
@ -20,33 +20,11 @@
|
||||
{{ghost_head}}
|
||||
</head>
|
||||
<body class="{{body_class}}">
|
||||
<div class="w-full min-h-screen">
|
||||
{{> "site-header"}}
|
||||
<div class="main-container">
|
||||
{{{body}}}
|
||||
{{> footer}}
|
||||
</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> © {{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
|
||||
src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
{{!< default}}
|
||||
{{> "site-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>
|
||||
</div>
|
||||
</div>
|
||||
--}}
|
||||
|
||||
<div class="post-feed content w-full px-2">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "yuika",
|
||||
"description": "nanao.moe's blog theme",
|
||||
"version": "1.1.0",
|
||||
"version": "2.0.0",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
|
||||
1
page.hbs
1
page.hbs
@ -1,7 +1,6 @@
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
{{> "site-header"}}
|
||||
<div class="relative group index-header">
|
||||
{{> 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">
|
||||
|
||||
25
partials/footer.hbs
Normal file
25
partials/footer.hbs
Normal 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> © {{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>
|
||||
@ -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
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
|
||||
<div>
|
||||
{{#if feature_image}}
|
||||
|
||||
<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">
|
||||
|
||||
<img class="post-image" src="{{img_url feature_image size='m'}}">
|
||||
{{else}}
|
||||
|
||||
<div class="post-background no-image">
|
||||
|
||||
<img class="post-image" src="{{img_url @site.cover_image size='m'}}">
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -1,10 +1,8 @@
|
||||
<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--}}
|
||||
<div class="h-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 py-1">
|
||||
<div class="md:pl-4">
|
||||
<div class="pt-4 md:pt-0 py-1">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}">
|
||||
@ -14,13 +12,13 @@
|
||||
{{/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>
|
||||
<a href="{{url}}"><h1 class="text-3xl font-light">{{title}}</h1></a>
|
||||
</div>
|
||||
<div class="mt-0 text-xs">
|
||||
<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">•</span> {{reading_time}}</span></p>
|
||||
</div>
|
||||
{{#if authors}}
|
||||
<div class="author-list text-xs ">
|
||||
<div class="author-list text-sm ">
|
||||
<div class="author-images">
|
||||
{{#foreach authors}}
|
||||
{{#if profile_image}}
|
||||
@ -39,9 +37,9 @@
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="block mt-2 mb-4 text-sm excerpt overflow-hidden">
|
||||
<div class="block mt-2 mb-4 text-base excerpt overflow-hidden">
|
||||
<p>{{excerpt words="30"}}</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
47
partials/site-background.hbs
Normal file
47
partials/site-background.hbs
Normal 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}}
|
||||
@ -1,5 +1,13 @@
|
||||
<div class="w-full flex flex-row justify-begin items-center fixed index-navbar">
|
||||
<header class="flex flex-row w-full relative py-0">
|
||||
<div class="index-navbar">
|
||||
<div class="site-background">
|
||||
{{> site-background }}
|
||||
</div>
|
||||
</div>
|
||||
<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 class="site-head">
|
||||
{{#if @site.logo}}
|
||||
<div class="w-12 h-12">
|
||||
@ -15,10 +23,8 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<div class="nav-group">
|
||||
{{navigation}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
3
post.hbs
3
post.hbs
@ -1,7 +1,6 @@
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
{{> "site-header"}}
|
||||
<div class="relative group index-header">
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<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>
|
||||
</div>
|
||||
{{/../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}}
|
||||
{{> post-card}}
|
||||
{{/foreach}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user