feat(thumbnails to gallery): Adds the thumbnails to the content of gallery

Author: Fabian Morón Zirfas

_source/assets/js/main.bundle.js

@@ -1,21 +1,49 @@
-/* global $*/
+
 export function specialChars() {
+
   let elements = document.querySelectorAll('a.textgrow');
-  [...elements].forEach( element => {
+  [...elements].forEach(element => {
     const chars = element.innerText.split('');
     element.innerHTML = null;
     chars.forEach((char, i) => {
       const fontSize = 30 - (2 * i);
-      const style = `border-bottom-width: ${ (i+1) }px; font-size: ${fontSize }px; top: -${(i+(2*i))}px;`;
+      const style = `border-bottom-width: ${(i + 1)}px; font-size: ${fontSize}px; top: -${(i + (2 * i))}px;`;
       const node = document.createElement('span');
       node.style.cssText = style;
       const content = document.createTextNode(char);
       node.appendChild(content);
       element.appendChild(node);
     });
   });
+
+  /**
+   * not in the reference
+   */
+  if ([...document.body.classList].includes('reference') === false) {
+
+    let elementsShrink = document.querySelectorAll('.textshrink, h1, h2, h3, h4, h5, h6');
+
+    [...elementsShrink].forEach(element => {
+      const chars = element.innerText.split('');
+      const style = window.getComputedStyle(element, null).getPropertyValue('font-size');
+      const fs = parseFloat(style);
+      element.innerHTML = null;
+      chars.forEach((char, i) => {
+        const fontSize = fs - i / 2;
+        const style = `border-bottom-width: ${(2 / i)}px; font-size: ${fontSize}px; top: -${i}px;`;
+        const node = document.createElement('span');
+        node.className = 'textshrink-item';
+        node.style.cssText = style;
+        const content = document.createTextNode(char);
+        node.appendChild(content);
+        element.appendChild(node);
+      });
+    });
+  }
 }
 
+
+
 export function createGuideLines() {
   const element = document.querySelector('.guidelines');
   const bottomlines = document.createElement('div');
@@ -27,17 +55,17 @@ export function createGuideLines() {
 
   for (let i = 0; i < 5; i++) {
     const line = document.createElement('div');
-    line.classList.add('bottomLine', `line_${i+1}`);
+    line.classList.add('bottomLine', `line_${i + 1}`);
     bottomlines.appendChild(line);
   }
   for (let i = 0; i < 3; i++) {
     const line = document.createElement('div');
-    line.classList.add('right_line', `line_${i+1}`);
+    line.classList.add('right_line', `line_${i + 1}`);
     rightlines.appendChild(line);
   }
   for (let i = 0; i < 4; i++) {
     const line = document.createElement('div');
-    line.classList.add('line', `line_${i+1}`);
+    line.classList.add('line', `line_${i + 1}`);
     pagelines.appendChild(line);
   }
   element.appendChild(bottomlines);

_source/assets/js/main.bundle.js.map

@@ -1,9 +1,7 @@
-// import $ from 'jquery';
 import p5 from 'p5/lib/p5.min';
 import sketch from './p5sketch.js';
 import mobileNav from './mobile-nav-nojq.js';
 import tweets from './tweets.js';
-// import { createGuideLines} from './decoration.js';
 import {specialChars, createGuideLines} from './decoration-nojq.js';
 let p5sketch;
 document.addEventListener('DOMContentLoaded',() =>{