From f24bd1e1aa72165f99781d559e6aa745408e4d2d Mon Sep 17 00:00:00 2001 From: Damillora Date: Sat, 9 Nov 2019 13:03:26 +0700 Subject: [PATCH] Layout changes --- assets/built/styles.css | 19 ++++++++++-- assets/css/styles.css | 16 ++++++++-- author.hbs | 4 +++ default.hbs | 35 +++++++++------------- error-404.hbs | 3 ++ index.hbs | 63 ++++++++++++++++++++++++++++++++++++++-- package.json | 2 +- page.hbs | 4 +++ partials/site-header.hbs | 21 ++++++++++++++ post.hbs | 61 ++++++++++++++++++++++++++++++++++++-- tag.hbs | 4 +++ 11 files changed, 198 insertions(+), 34 deletions(-) create mode 100644 partials/site-header.hbs diff --git a/assets/built/styles.css b/assets/built/styles.css index d0c3183..ddb0f12 100644 --- a/assets/built/styles.css +++ b/assets/built/styles.css @@ -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%; } diff --git a/assets/css/styles.css b/assets/css/styles.css index 6837201..2513037 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -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; diff --git a/author.hbs b/author.hbs index 2eda35b..9786a80 100644 --- a/author.hbs +++ b/author.hbs @@ -1,4 +1,8 @@ {{!< default}} +
+{{> "site-header"}} +
+ {{#author}}
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} diff --git a/default.hbs b/default.hbs index 4e497fe..67b6a87 100644 --- a/default.hbs +++ b/default.hbs @@ -13,27 +13,6 @@ {{ghost_head}} -
- {{#if @site.logo}} -
- {{@site.title}} -
- {{/if}} -
-
- -

{{@site.title}}

- -
-
-

{{@site.description}}

-
-
- - {{navigation}} -
{{{body}}}
@@ -67,13 +46,25 @@ diff --git a/error-404.hbs b/error-404.hbs index d73ea74..f9aadb1 100644 --- a/error-404.hbs +++ b/error-404.hbs @@ -9,5 +9,8 @@

{{message}}

Go to the front page →
+
+ {{> "site-header"}} +
diff --git a/index.hbs b/index.hbs index cd8b28b..2fa220a 100644 --- a/index.hbs +++ b/index.hbs @@ -1,11 +1,11 @@ {{!< default}} -
+
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-
-

Blog

+
+ {{> "site-header"}}
@@ -15,3 +15,60 @@ {{/foreach}}
+{{#contentFor "scripts"}} + +{{/contentFor}} diff --git a/package.json b/package.json index 54c4517..97f7e1b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "yuika", "description": "nanao.moe's blog theme", - "version": "0.1.1", + "version": "0.2.0", "engines": { "ghost-api": "v3" }, diff --git a/page.hbs b/page.hbs index 97bf528..ee9cac7 100644 --- a/page.hbs +++ b/page.hbs @@ -1,4 +1,8 @@ {{!< default}} +
+{{> "site-header"}} +
+ {{#post}}
diff --git a/partials/site-header.hbs b/partials/site-header.hbs new file mode 100644 index 0000000..c6e0d9a --- /dev/null +++ b/partials/site-header.hbs @@ -0,0 +1,21 @@ +
+ {{#if @site.logo}} +
+ {{@site.title}} +
+ {{/if}} +
+
+ +

{{@site.title}}

+ +
+
+

{{@site.description}}

+
+
+ + {{navigation}} +
diff --git a/post.hbs b/post.hbs index 4b000d5..050473d 100644 --- a/post.hbs +++ b/post.hbs @@ -1,8 +1,8 @@ {{!< default}} + {{#post}}
- -
+
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
@@ -38,6 +38,9 @@
+
+ {{> "site-header"}} +
@@ -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(); + + }); + {{/contentFor}} diff --git a/tag.hbs b/tag.hbs index c9ec127..aceb0d3 100644 --- a/tag.hbs +++ b/tag.hbs @@ -1,4 +1,8 @@ {{!< default}} +
+{{> "site-header"}} +
+ {{#tag}}
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}