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}}
-
-
-
- {{/if}}
-
-
-
-
{{@site.description}}
-
-
-
-
-
- {{navigation}}
-
{{{body}}}
+
+ {{> "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}}
-
+
-
-
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}}
+
+
+
+ {{/if}}
+
+
+
+
{{@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}}
-
-
+
+
+ {{> "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--}}