reality-blue-jekyll-theme 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eff3dee6a4fff36458c9375a257570ccc0ceb35b401d35b3e38ec852cd5c256a
-  data.tar.gz: d394740deec99dc7aed40bd626fba76b4cd34223f49f80fe87cc90605b29042c
+  metadata.gz: 5fd73961416a4db462d3d2936730b46b743d578134115f275563d7683cf13647
+  data.tar.gz: 667c0de8492c8ee046a9fb9f0a43429fab923023dd69e240b4fc948ebf2a4ff4
 SHA512:
-  metadata.gz: 2040d4ad6caf23d4e7185050d753ea1d806a42af43268d2830c6b3883a33765134c5e516a0d217365461f93fe9ec200bc8390ba7dbd07610dc5d73c3ff68c4a7
-  data.tar.gz: 8792f59184198f2bce4a39c685fba9ebe95fbee64dcdea56880b0a12ee6e729c6a4cca6e1bbdb0a0b02c0b98cf63ed9f6b6be850881ef2a23505821389987f65
+  metadata.gz: a52ab946a74374126e347a4cdfb176f6cf0754936506a6239ab75740661b9eb0b7b7604db41780a4579fe69ff82ae304d82f0ea40d13143f8f9ccd2078e57064
+  data.tar.gz: 2c234fa4d514768ab3482dd1db28b0667a9de33da901cdd49934ea3c1e87581ce16a9db7594935f4b321bfb3527a865c17e5e46cf220c2d7591211fd3d4627af

data/README.md

@@ -34,8 +34,8 @@ Or install it yourself as:
 
 The primary layout of Reality-Blue is a basic dynamic-page layout.
 
-1. Define your "sections" in the _config.yml and add your content files as includes.
-2. Define further desired CSS/Sass in css/style.scss
+1. Define your "sections" in the _config.yml and add your content files as includes. Currently there is support for exactly 3 sections.
+2. Define further desired CSS/Sass in css/style.scss, being sure that 'reality-blue' styling is imported as well
 
 Available Includes:
 - post-list: generic blogpost front-page list. links to archive once page is full

data/_includes/layout-controller.html

@@ -0,0 +1,97 @@
+<script type="text/javascript">
+    // Base doc elements
+    let main = document.getElementById(`main`);
+    let home = document.getElementById(`home`);
+    let content = document.getElementById(`content`);
+    let nav = document.getElementById(`nav`);
+
+    // Section tags
+    let buttons = [];
+    let active = null;
+
+    // CSS vh simulator
+    let vh = function (v) {
+        var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        return (v * h) / 100;
+    }
+
+    let clearNav = function () {
+        for (let i = 0; i < buttons.length; i++) {
+            if (nav.children[i].children[0].classList.contains(`active`)) {
+                nav.children[i].children[0].classList.remove(`active`);
+                content.children[i].style.opacity = `0`;
+                setTimeout(() => {
+                    content.children[i].classList.add(`hidden`);
+                }, 300);
+            }
+        }
+        active = null;
+    }
+
+    let recenter = function () {
+        if (!!active) {
+            content.style.height = `600px`;
+            content.style.padding = `20px 10px`;
+        } else {
+            content.style.height = `0`;
+            content.style.padding = `0px 10px`;
+        }
+        let mainHeight = !!active ? 900 : 217; //TODO: make default value adjustable
+        let top = Math.max(0, vh(50) - mainHeight / 2);
+        main.style.top = `${top}px`;
+    }
+
+    let reset = function (delay) {
+        clearNav();
+        setTimeout(recenter, delay);
+    }
+
+    let makeActive = function (section) {
+        let wasActive = !!active;
+        active = section;
+        document.getElementById(section).classList.remove(`hidden`);
+        document.getElementById(section + `-link`).classList.add(`active`);
+        if (!wasActive) {
+            // recenter content if content was not already active
+            setTimeout(recenter, 10);
+        }
+        setTimeout(() => {
+            document.getElementById(section).style.opacity = `1.0`;
+        }, 200);
+    }
+
+    window.addEventListener(`resize`, recenter);
+
+    document.addEventListener(`DOMContentLoaded`, function (event) {
+        main = document.getElementById(`main`);
+        home = document.getElementById(`home`);
+        content = document.getElementById(`content`);
+        nav = document.getElementById(`nav`);
+
+        {% for section in site.sections %}
+        buttons.push(`{{ section.name }}`);
+        {% endfor %}
+
+        home.addEventListener(`click`, function (event) {
+            reset(300);
+        });
+
+        buttons.forEach(section => {
+            document.getElementById(`${section}-link`).addEventListener(`click`, function (event) {
+                let fadeTimeout = 0;
+                if (active) {
+                    if (active === section) {
+                        return
+                    }
+                    clearNav();
+                    fadeTimeout = 300;
+                }
+                setTimeout(() => {
+                    makeActive(section);
+                }, fadeTimeout);
+            });
+        });
+
+        reset(0);
+    });
+</script>

data/_layouts/default.html

@@ -5,7 +5,6 @@
 	{% assign title = page.title | default: site.title | escape %}
 	<title>{{ title }}</title>
 	<link rel="icon" type="image/png" href="/assets/img/favicon.ico">
-	<link rel="stylesheet" href="/css/main.css">
 	<link rel="stylesheet" href="/css/style.css">
 	<meta charset="utf-8">
 	<meta name="author" content="{{ site.author | escape }}">

data/_layouts/home.html

@@ -19,39 +19,5 @@ layout: default
 			{% endfor %}
         </div>
 	</div>
-	<script src="js/base.js"></script>
-	<script type="text/javascript">
-		document.addEventListener(`DOMContentLoaded`, function (event) {
-			main = document.getElementById(`main`);
-			home = document.getElementById(`home`);
-			content = document.getElementById(`content`);
-			nav = document.getElementById(`nav`);
-			
-			{% for section in site.sections %}
-			buttons.push(`{{ section.name }}`);
-			{% endfor %}
-
-			home.addEventListener(`click`, function (event) {
-				reset(300);
-			});
-
-			buttons.forEach(section => {
-				document.getElementById(`${section}-link`).addEventListener(`click`, function (event) {
-				let fadeTimeout = 0;
-				if (active) {
-					if (active === section) {
-					return
-					}
-					clearNav();
-					fadeTimeout = 300;
-				}
-				setTimeout(() => {
-					makeActive(section);
-				}, fadeTimeout);
-				});
-			});
-
-			reset(0);
-		});
-	</script>
+	{% include layout-controller.html %}
 </body>

data/_sass/reality-blue.scss

@@ -35,6 +35,9 @@
     }
 }
 
+// TODO: Make this dynamic with # of sections
+@include nav(3);
+
 // Element Defaults
 html {
     background-color: white;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: reality-blue-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Terry Wen
@@ -50,6 +50,7 @@ files:
 - _includes/_about.html
 - _includes/_blog.html
 - _includes/_links.html
+- _includes/layout-controller.html
 - _includes/post-list.html
 - _layouts/archive.html
 - _layouts/default.html