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

Layout changes

Browse Source
This commit is contained in:
Damillora 2019-11-09 13:03:26 +07:00
parent cd16051592
commit f24bd1e1aa
11 changed files with 198 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/built/styles.css
View File

@ -617,6 +617,15 @@ header {
padding-right: 1rem; padding-right: 1rem;
} }
.index-navbar header {
background-color: transparent;
}
.index-header {
min-height: 300px;
height: 50vh;
}
#post p { #post p {
margin-top: 0.75rem; margin-top: 0.75rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
@ -740,15 +749,14 @@ footer {
-webkit-box-align: center; -webkit-box-align: center;
align-items: center; align-items: center;
height: 3rem; height: 3rem;
border-color: #fff;
border-top-width: 1px;
border-bottom-width: 1px;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
color: #fff; color: #fff;
font-size: 0.875rem; font-size: 0.875rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -777,6 +785,11 @@ footer {
} }
} }
.nav-fixed {
background-color: #3b90c6;
z-index: 10;
}
.container{ .container{
width: 100%; width: 100%;
} }

16
assets/css/styles.css
View File

@ -4,12 +4,17 @@
html { html {
@apply font-sans; @apply font-sans;
} }
header { header {
background-color: #3b90c6; background-color: #3b90c6;
@apply py-4 px-4; @apply py-4 px-4;
} }
.index-navbar header {
background-color: transparent;
}
.index-header {
min-height: 300px;
height: 50vh;
}
#post p { #post p {
@apply my-3; @apply my-3;
@ -64,7 +69,7 @@ footer {
display: none; display: none;
} }
.nav li { .nav li {
@apply flex flex-row justify-start items-center h-12 border-white border-t border-b my-0 py-2 text-white text-sm; @apply flex flex-row justify-start items-center h-12 my-0 py-2 text-white text-sm px-2;
} }
@screen md { @screen md {
.nav { .nav {
@ -74,6 +79,11 @@ footer {
@apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block px-4; @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block px-4;
} }
} }
.nav-fixed {
background-color: #3b90c6;
z-index: 10;
}
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

4
author.hbs
View File

@ -1,4 +1,8 @@
{{!< default}} {{!< default}}
<div>
{{> "site-header"}}
</div>
{{#author}} {{#author}}
<div class="h-64 relative"> <div class="h-64 relative">
{{> 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--}}

35
default.hbs
View File

@ -13,27 +13,6 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
<header class="flex flex-row py-2 flex-wrap">
{{#if @site.logo}}
<div class="flex flex-col h-12">
<img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
</div>
{{/if}}
<div class="flex flex-col ml-4 flex-grow">
<div class="">
<a href="{{@site.url}}">
<h1 class="text-lg text-white">{{@site.title}}</h1>
</a>
</div>
<div class="">
<p class="text-sm text-white">{{@site.description}}</p>
</div>
</div>
<div id="menushow" class="block md:hidden flex flex-column items-center px-2 py-2 cursor-pointer">
<img src="{{asset "images/menu.svg"}}" class="h-8 text-white" style="filter: invert(1);" />
</div>
{{navigation}}
</header>
{{{body}}} {{{body}}}
<footer class="md:h-16"> <footer class="md:h-16">
@ -67,13 +46,25 @@
</script> </script>
<script src="{{asset "built/yuika.js"}}"></script> <script src="{{asset "built/yuika.js"}}"></script>
<script> <script>
function sliderheight(a){
divHeight = $('.navbar').height();
if(a) {
$('.nav').css({'background-color' : '#3b90c6'} );
} else {
$('.nav').css({'background-color' : ''} );
}
}
$("#menushow").click(function() { $("#menushow").click(function() {
var menu = $(".nav"); var menu = $(".nav");
var menubtn = $("#menushow"); var menubtn = $("#menushow");
if(menu.is(":hidden")) { if(menu.is(":hidden")) {
$('.nav').css({'display': 'block', 'visibility':'hidden'});
sliderheight(true);
$('.nav').css({'display': 'none','visibility':'visible'});
menu.slideDown(250); menu.slideDown(250);
} else { } else {
menu.slideUp(250); menu.slideUp(250, () => sliderheight(false));
} }
}); });
</script> </script>

3
error-404.hbs
View File

@ -9,5 +9,8 @@
<p class="text-white text-xl">{{message}}</p> <p class="text-white text-xl">{{message}}</p>
<a class="text-white text-base" href="{{@site.url}}">Go to the front page →</a> <a class="text-white text-base" href="{{@site.url}}">Go to the front page →</a>
</div> </div>
<div class="w-screen flex flex-row justify-begin items-center absolute top-0 navbar">
{{> "site-header"}}
</div>
</div> </div>

63
index.hbs
View File

@ -1,11 +1,11 @@
{{!< default}} {{!< default}}
<div class="h-20 md:h-64 relative"> <div class="h-64 relative index-header">
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> header-background background=@site.cover_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">
</div> </div>
</div> </div>
<div class="h-full flex flex-row justify-begin items-center absolute bottom-0"> <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
<h1 class="text-white text-2xl font-light md:text-6xl pl-12">Blog</h1> {{> "site-header"}}
</div> </div>
</div> </div>
@ -15,3 +15,60 @@
{{/foreach}} {{/foreach}}
</div> </div>
{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
var nav = document.querySelector('.index-navbar');
var feed = document.querySelector('.post-feed');
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 >= trigger - 20) {
nav.classList.add('fixed');
nav.classList.add('nav-fixed');
nav.classList.remove('absolute');
} else {
nav.classList.remove('fixed');
nav.classList.remove('nav-fixed');
nav.classList.add('absolute');
}
ticking = false;
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize, false);
update();
});
</script>
{{/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.1.1", "version": "0.2.0",
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },

4
page.hbs
View File

@ -1,4 +1,8 @@
{{!< default}} {{!< default}}
<div>
{{> "site-header"}}
</div>
{{#post}} {{#post}}
<article> <article>

21
partials/site-header.hbs Normal file
View File

@ -0,0 +1,21 @@
<header class="flex flex-row py-2 flex-wrap w-full">
{{#if @site.logo}}
<div class="flex flex-col h-12">
<img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
</div>
{{/if}}
<div class="flex flex-col ml-4 flex-grow">
<div class="">
<a href="{{@site.url}}">
<h1 class="text-lg text-white">{{@site.title}}</h1>
</a>
</div>
<div class="">
<p class="text-sm text-white">{{@site.description}}</p>
</div>
</div>
<div id="menushow" class="block md:hidden flex flex-column items-center px-2 py-2 cursor-pointer">
<img src="{{asset "images/menu.svg"}}" class="h-8 text-white" style="filter: invert(1);" />
</div>
{{navigation}}
</header>

61
post.hbs
View File

@ -1,8 +1,8 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
<article> <article>
<div class="relative group index-header">
<div class="h-64 relative group">
{{> 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 group-hover:opacity-75 transition-opacity"> <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
</div> </div>
@ -38,6 +38,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}}
</div>
</div> </div>
<main class="container md:w-4/5 lg:w-4/6 md:mx-auto px-6 my-6" id="post"> <main class="container md:w-4/5 lg:w-4/6 md:mx-auto px-6 my-6" id="post">
@ -82,5 +85,59 @@ $(document).ready(function () {
$postContent.fitVids(); $postContent.fitVids();
// FitVids - end // FitVids - end
}); });
$(document).ready(function () {
var nav = document.querySelector('.index-navbar');
var feed = document.querySelector('#post');
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 >= trigger - 20) {
nav.classList.add('fixed');
nav.classList.add('nav-fixed');
nav.classList.remove('absolute');
} else {
nav.classList.remove('fixed');
nav.classList.remove('nav-fixed');
nav.classList.add('absolute');
}
ticking = false;
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize, false);
update();
});
</script> </script>
{{/contentFor}} {{/contentFor}}

4
tag.hbs
View File

@ -1,4 +1,8 @@
{{!< default}} {{!< default}}
<div>
{{> "site-header"}}
</div>
{{#tag}} {{#tag}}
<div class="h-64 relative"> <div class="h-64 relative">
{{> 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--}}