mirror of
https://github.com/Damillora/Yuika
synced 2024-11-22 01:07:32 +00:00
Layout changes
This commit is contained in:
parent
cd16051592
commit
f24bd1e1aa
@ -617,6 +617,15 @@ header {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.index-navbar header {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.index-header {
|
||||
min-height: 300px;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#post p {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
@ -740,15 +749,14 @@ footer {
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
height: 3rem;
|
||||
border-color: #fff;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@ -777,6 +785,11 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.nav-fixed {
|
||||
background-color: #3b90c6;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -4,12 +4,17 @@
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #3b90c6;
|
||||
@apply py-4 px-4;
|
||||
}
|
||||
|
||||
.index-navbar header {
|
||||
background-color: transparent;
|
||||
}
|
||||
.index-header {
|
||||
min-height: 300px;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#post p {
|
||||
@apply my-3;
|
||||
@ -64,7 +69,7 @@ footer {
|
||||
display: none;
|
||||
}
|
||||
.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 {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-fixed {
|
||||
background-color: #3b90c6;
|
||||
z-index: 10;
|
||||
}
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
{{!< default}}
|
||||
<div>
|
||||
{{> "site-header"}}
|
||||
</div>
|
||||
|
||||
{{#author}}
|
||||
<div class="h-64 relative">
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
|
||||
35
default.hbs
35
default.hbs
@ -13,27 +13,6 @@
|
||||
{{ghost_head}}
|
||||
</head>
|
||||
<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}}}
|
||||
<footer class="md:h-16">
|
||||
@ -67,13 +46,25 @@
|
||||
</script>
|
||||
<script src="{{asset "built/yuika.js"}}"></script>
|
||||
<script>
|
||||
function sliderheight(a){
|
||||
divHeight = $('.navbar').height();
|
||||
if(a) {
|
||||
$('.nav').css({'background-color' : '#3b90c6'} );
|
||||
} else {
|
||||
$('.nav').css({'background-color' : ''} );
|
||||
}
|
||||
}
|
||||
|
||||
$("#menushow").click(function() {
|
||||
var menu = $(".nav");
|
||||
var menubtn = $("#menushow");
|
||||
if(menu.is(":hidden")) {
|
||||
$('.nav').css({'display': 'block', 'visibility':'hidden'});
|
||||
sliderheight(true);
|
||||
$('.nav').css({'display': 'none','visibility':'visible'});
|
||||
menu.slideDown(250);
|
||||
} else {
|
||||
menu.slideUp(250);
|
||||
menu.slideUp(250, () => sliderheight(false));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -9,5 +9,8 @@
|
||||
<p class="text-white text-xl">{{message}}</p>
|
||||
<a class="text-white text-base" href="{{@site.url}}">Go to the front page →</a>
|
||||
</div>
|
||||
<div class="w-screen flex flex-row justify-begin items-center absolute top-0 navbar">
|
||||
{{> "site-header"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
63
index.hbs
63
index.hbs
@ -1,11 +1,11 @@
|
||||
{{!< 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--}}
|
||||
<div class="h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full flex flex-row justify-begin items-center absolute bottom-0">
|
||||
<h1 class="text-white text-2xl font-light md:text-6xl pl-12">Blog</h1>
|
||||
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
|
||||
{{> "site-header"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,3 +15,60 @@
|
||||
{{/foreach}}
|
||||
</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}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "yuika",
|
||||
"description": "nanao.moe's blog theme",
|
||||
"version": "0.1.1",
|
||||
"version": "0.2.0",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
|
||||
4
page.hbs
4
page.hbs
@ -1,4 +1,8 @@
|
||||
{{!< default}}
|
||||
<div>
|
||||
{{> "site-header"}}
|
||||
</div>
|
||||
|
||||
{{#post}}
|
||||
<article>
|
||||
|
||||
|
||||
21
partials/site-header.hbs
Normal file
21
partials/site-header.hbs
Normal 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
61
post.hbs
@ -1,8 +1,8 @@
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<article>
|
||||
|
||||
<div class="h-64 relative group">
|
||||
<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 group-hover:opacity-75 transition-opacity">
|
||||
</div>
|
||||
@ -38,6 +38,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
|
||||
{{> "site-header"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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();
|
||||
// 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>
|
||||
{{/contentFor}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user