story, refining styles, big commit ::shrug::

laras126 · Sep 30, 2017 · 30e100f · 30e100f
1 parent 8636d16
commit 30e100f
Show file tree

Hide file tree

Showing 16 changed files with 292 additions and 232 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -374,6 +374,10 @@ Modules
   margin: 0 auto;
   max-width: 1400px; }
 
+.inner-story {
+  margin: 0 auto;
+  max-width: 1100px; }
+
 .page .inner,
 .single .inner,
 .inner-pad {
@@ -459,19 +463,32 @@ Modules
 @supports (grid-area: auto) {
   @media (min-width: 730px) {
     .grid-tease {
-      grid-column: 1 / -1;
       display: -ms-grid;
       display: grid;
-      -ms-grid-columns: 1fr 2fr;
-          grid-template-columns: 1fr 2fr;
+      -ms-grid-columns: (1fr)[4];
+          grid-template-columns: repeat(4, 1fr);
       grid-column-gap: 1.43rem; }
     .grid-loop {
       display: -ms-grid;
       display: grid;
       grid-row-gap: 1.43rem;
       grid-column-gap: 1.43rem;
-      -ms-grid-columns: (50%)[2];
-          grid-template-columns: repeat(2, 50%); } } }
+      -ms-grid-columns: (1fr)[4];
+          grid-template-columns: repeat(4, 1fr); }
+    .post {
+      -ms-grid-column-span: 2;
+      -ms-grid-column: 1;
+          grid-column: 1 / span 2; }
+      .post.grid-tease {
+        grid-column: 1 / -1; }
+      .post .tease-thumb {
+        -ms-grid-column-span: 2;
+        -ms-grid-column: 3;
+            grid-column: 3 / span 2; }
+      .post .tease-content {
+        -ms-grid-column-span: 2;
+        -ms-grid-column: 1;
+            grid-column: 1 / span 2; } } }
 
 @supports not (grid-area: auto) {
   @media (min-width: 520px) {
@@ -978,6 +995,7 @@ svg {
           backface-visibility: hidden;
   -webkit-perspective: 1000px;
           perspective: 1000px;
+  transform-box: fill-box;
   -webkit-animation: wave 0.3s infinite;
           animation: wave 0.3s infinite;
   -webkit-animation-direction: alternate;
@@ -2198,6 +2216,7 @@ code {
 .prevnext-nav {
   padding-left: 1.43rem;
   padding-right: 1.43rem;
+  margin-bottom: 1.43rem;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -2270,20 +2289,46 @@ code {
         -ms-flex-pack: center;
             justify-content: center; } }
 
+.panel-content {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center; }
+  @media (min-width: 1100px) {
+    .panel-content {
+      max-width: 600px; } }
+
 .panel-decor {
-  position: absolute;
   right: 0;
   bottom: 0;
-  z-index: 0; }
+  z-index: 0;
+  position: absolute;
+  width: 80vw; }
   @media (min-width: 520px) {
     .panel-decor {
-      max-width: 60vw; } }
+      width: 60vw; } }
   @media (min-width: 730px) {
     .panel-decor.-image {
       max-width: 40vw; } }
-  .panel-decor .character-1 {
-    width: 100%;
-    display: block; }
+  .panel-decor svg {
+    width: 400px;
+    max-width: 100%;
+    display: block;
+    margin-left: auto; }
+  .panel-decor.-llama {
+    padding-top: 2.64rem;
+    background-image: linear-gradient(to top, #80cded, #ffffff); }
+    @supports (grid-area: auto) {
+      .panel-decor.-llama {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-rows: auto minmax(50px, 100px);
+            grid-template-rows: auto minmax(50px, 100px); } }
 
 .decor-img {
   display: block; }
@@ -2299,52 +2344,6 @@ code {
             grid-template-columns: minmax(50%, 600px) minmax(200px, 50%);
         grid-column-gap: 1.43rem; } } }
 
-.panel-content {
-  max-width: 600px; }
-  @supports (grid-area: auto) {
-    .panel-content {
-      -ms-grid-column: 1;
-          grid-column: 1;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-flex-direction: column;
-          -ms-flex-direction: column;
-              flex-direction: column;
-      -webkit-justify-content: center;
-          -ms-flex-pack: center;
-              justify-content: center; } }
-
-.panel-img {
-  overflow: hidden; }
-  @supports (grid-area: auto) {
-    .panel-img {
-      -ms-grid-column: 2;
-          grid-column: 2;
-      min-height: 50vh; } }
-  @supports not (grid-area: auto) {
-    .panel-img {
-      margin-top: 1.43rem;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-flex-direction: column;
-          -ms-flex-direction: column;
-              flex-direction: column;
-      -webkit-align-items: center;
-          -ms-flex-align: center;
-              align-items: center;
-      width: 100%; } }
-  .panel-img.-llama {
-    padding-top: 2.64rem;
-    background-image: linear-gradient(to top, #80cded, #ffffff); }
-    @supports (grid-area: auto) {
-      .panel-img.-llama {
-        display: -ms-grid;
-        display: grid;
-        -ms-grid-rows: auto minmax(50px, 100px);
-            grid-template-rows: auto minmax(50px, 100px); } }
-
 #llama {
   display: block;
   margin: 0 auto; }
@@ -2465,6 +2464,15 @@ code {
     border: 3px solid #E0E6F2;
     background-color: #27A9E0; }
 
+.btn-tab {
+  background: #E0E6F2;
+  padding: 0 0.44rem;
+  color: #242F4A;
+  font-weight: 700; }
+  .btn-tab:hover {
+    background: #27A9E0;
+    color: #ffffff; }
+
 .js-reveal {
   will-change: transform;
   -webkit-transform: translateZ(0);

diff --git a/assets/css/main.min.css b/assets/css/main.min.css
diff --git a/assets/js/build/scripts.js b/assets/js/build/scripts.js
@@ -1264,15 +1264,11 @@ function addButtonHrefs(kid, index) {
 function setUpTyping(kid, index) {
 	if (kid.classList.contains('js-typed-src')) {
 
-		var typedEl = document.createElement('span');
+		var typedEl = document.createElement('div');
 		typedEl.classList.add('js-typed', 'panel-content');
 		typedEl.setAttribute('aria-hidden', 'true');
 		insertAfter(kid, typedEl);
 
-		// let indicator = document.createElement('span');
-		// indicator.innerHTML('Important Fact #'+index);
-		// document.querySelector('#panel-' + index + ' .panel-title';
-
 		var options = {
 			strings: [kid.innerHTML],
 			typeSpeed: TYPE_SPEED,
@@ -1282,9 +1278,11 @@ function setUpTyping(kid, index) {
 				addBtnClickEvent(index, nextBtn, typedEl, options);
 				showButtons(nextBtn);
 			}
-		};
 
-		typeFirstPanel(index, typedEl, options);
+			// Type the first panel
+		};if (index == 0) {
+			var typed = new Typed(typedEl, options);
+		}
 	}
 }
 
@@ -1304,6 +1302,8 @@ function typeNextSection(index) {
 			callbackFunc(index);
 			addBtnClickEvent(index, nextBtn, options);
 			showButtons(nextBtn);
+			// typedSrc.remove();
+			removeTypedSrc(typedSrc);
 		}
 	};
 
@@ -1367,9 +1367,9 @@ var SKIP_BTN = document.querySelector('.js-skipBtn');
 
 SKIP_BTN.addEventListener('click', function (e) {
 	e.preventDefault();
-	var TYPED_ELS = document.querySelectorAll('.js-incomplete .js-typed-src');
-	var REVEAL_ELS = document.querySelectorAll('.js-incomplete .js-reveal');
-	var HIDDEN_ELS = document.querySelectorAll('.js-incomplete .js-hidden');
+	var TYPED_ELS = document.querySelectorAll('.panel[data-complete="false"] .js-typed-src');
+	var REVEAL_ELS = document.querySelectorAll('.panel[data-complete="false"] .js-reveal');
+	var HIDDEN_ELS = document.querySelectorAll('.panel[data-complete="false"] .js-hidden');
 
 	TYPED_ELS.forEach(function (el) {
 		el.classList.remove('js-typed-src');
@@ -1388,12 +1388,6 @@ SKIP_BTN.addEventListener('click', function (e) {
 // Panel Helpers
 // ----
 
-function typeFirstPanel(index, typedEl, options) {
-	if (index == 0) {
-		var typed = new Typed(typedEl, options);
-	}
-}
-
 function panelClassesContain(i, c) {
 	var elem = document.querySelector('#panel-' + i);
 	return elem.classList.contains(c);
@@ -1422,6 +1416,12 @@ function showButtons(btn) {
 	}
 }
 
+function removeTypedSrc(elem) {
+	var srcEl = elem;
+	elem.nextSibling.setAttribute("aria-hidden", "false");
+	elem.parentNode.removeChild(srcEl);
+}
+
 // ----
 // Panel Callbacks
 // ----

diff --git a/assets/js/build/scripts.min.js b/assets/js/build/scripts.min.js
diff --git a/assets/js/src/typing.js b/assets/js/src/typing.js
@@ -67,15 +67,11 @@ function addButtonHrefs(kid, index) {
 function setUpTyping(kid, index) {
 	if (kid.classList.contains('js-typed-src')) {
 
-		let typedEl = document.createElement('span');
+		let typedEl = document.createElement('div');
 		typedEl.classList.add('js-typed', 'panel-content');
 		typedEl.setAttribute('aria-hidden', 'true');
 		insertAfter(kid, typedEl);
 
-		// let indicator = document.createElement('span');
-		// indicator.innerHTML('Important Fact #'+index);
-		// document.querySelector('#panel-' + index + ' .panel-title';
-
 		let options = {
 			strings: [kid.innerHTML],
 			typeSpeed: TYPE_SPEED,
@@ -87,7 +83,10 @@ function setUpTyping(kid, index) {
 			}
 		}
 
-		typeFirstPanel(index, typedEl, options);
+		// Type the first panel
+		if (index == 0) {
+			let typed = new Typed(typedEl, options);
+		}
 	}
 }
 
@@ -108,6 +107,8 @@ function typeNextSection(index) {
 			callbackFunc(index);
 			addBtnClickEvent(index, nextBtn, options);
 			showButtons(nextBtn);
+			// typedSrc.remove();
+			removeTypedSrc(typedSrc);
 		}
 	}
 
@@ -177,9 +178,9 @@ const SKIP_BTN = document.querySelector('.js-skipBtn');
 
 SKIP_BTN.addEventListener('click', (e) => {
 	e.preventDefault();
-	let TYPED_ELS = document.querySelectorAll('.js-incomplete .js-typed-src');
-	let REVEAL_ELS = document.querySelectorAll('.js-incomplete .js-reveal');
-	let HIDDEN_ELS = document.querySelectorAll('.js-incomplete .js-hidden');
+	let TYPED_ELS = document.querySelectorAll('.panel[data-complete="false"] .js-typed-src');
+	let REVEAL_ELS = document.querySelectorAll('.panel[data-complete="false"] .js-reveal');
+	let HIDDEN_ELS = document.querySelectorAll('.panel[data-complete="false"] .js-hidden');
 
 	TYPED_ELS.forEach((el) => {
 		el.classList.remove('js-typed-src');
@@ -201,12 +202,6 @@ SKIP_BTN.addEventListener('click', (e) => {
 // Panel Helpers
 // ----
 
-function typeFirstPanel(index, typedEl, options) {
-	if (index == 0) {
-		let typed = new Typed(typedEl, options);
-	}
-}
-
 function panelClassesContain(i, c) {
 	let elem = document.querySelector('#panel-' + i);
 	return elem.classList.contains(c);
@@ -235,6 +230,11 @@ function showButtons(btn) {
 	}
 }
 
+function removeTypedSrc(elem) {
+	let srcEl = elem;
+	elem.nextSibling.setAttribute("aria-hidden", "false");
+	elem.parentNode.removeChild(srcEl);
+}
 
 
 
@@ -294,4 +294,3 @@ function hide(el) {
 	TweenLite.to(el, .2, { delay: 0.5, transformOrigin: "50% 50%", scale: 0, ease: Power2.easeOut, autoAlpha: 0 });
 }
 
-