feat: mejoras y pwa features

.gitignore

@@ -170,3 +170,4 @@ $RECYCLE.BIN/
 # End of https://www.gitignore.io/api/node,sublimetext,windows,macos,sass
 
 dist/
+sw.js

manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "Code in the Dark Valdivia",
+  "short_name": "Code in the Dark Valdivia",
+  "theme_color": "#080a0d",
+  "background_color": "#080a0d",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/dist/images/icons/apple-icon-152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/dist/images/icons/manifest-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/dist/images/icons/manifest-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

postcss.config.js

@@ -1,6 +1,12 @@
 const purgecss = require('@fullhuman/postcss-purgecss')({
   content: ['index.html'],
-  whitelist: ['is-over', 'is-loaded', 'iframe'],
+  whitelist: [
+    'iframe',
+    'is-over',
+    'is-loaded',
+    'is-scrollHero',
+    'is-moreExpanded'
+  ],
   defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
 })
 

src/css/index.css → src/css/styles.css

@@ -108,6 +108,17 @@ h3 {
 	text-shadow: 1px 1px #090b0e;
 }
 
+.ButtonEmail {
+	margin-left: -44px;
+	vertical-align: -6px;
+	opacity: 0.8;
+}
+
+.ButtonEmail svg {
+	fill: #1eb27b;
+	width: 20px;
+}
+
 .Button {
 	text-transform: uppercase;
 	letter-spacing: 2px;
@@ -118,6 +129,7 @@ h3 {
 	color: #fff;
 	font-weight: bold;
 	font-size: 0.8rem;
+	background-color: transparent;
 }
 
 @media (min-width: 640px) {
@@ -133,6 +145,16 @@ h3 {
 	}
 }
 
+.Button--sm {
+	font-size: 0.8rem;
+	padding: 0.4em 1em;
+}
+
+.Button--md {
+	font-size: 0.9rem;
+	padding: 0.74em 1.2em;
+}
+
 .Button:hover {
 	border-color: #01ce89;
 	background-color: #01ce89;
@@ -152,6 +174,7 @@ h3 {
 	display: inline-block;
 	letter-spacing: 2px;
 	text-shadow: 1px 1px #090b0e;
+	line-height: 1;
 }
 
 .LabelSpecial:before {
@@ -168,6 +191,23 @@ h3 {
 	position: relative;
 }
 
+.What-more {
+	max-height: 0;
+	opacity: 0;
+	overflow: hidden;
+}
+
+.is-moreExpanded .What-more {
+	max-height: 100%;
+	overflow: auto;
+	opacity: 1;
+	transition: all 0.5s ease;
+}
+
+.What-more svg {
+	width: 10em;
+}
+
 .What-bg {
 	background-image: url(/dist/images/bg-retro.png);
 	background-size: cover;
@@ -294,6 +334,15 @@ h3 {
 	display: none;
 }
 
+.Bar {
+	transition: all 0.6s ease;
+	transform: translateY(-100%);
+}
+
+.is-scrollHero .Bar {
+	transform: translateY(0);
+}
+
 .absolute-center {
 	position: absolute;
 	top: 50%;

src/images/icons/manifest.json

@@ -0,0 +1,14 @@
+{
+  "icons": [
+    {
+      "src": "manifest-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "manifest-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

src/js/main.js → src/js/scripts.js

@@ -4,6 +4,7 @@
   const doc = document.documentElement
   const body = document.querySelector('body')
   const button = document.querySelector('.Hero .Button')
+  const buttonMore = document.querySelector('.Button--more')
   const videoPlayerBack = document.querySelector('.Video-backdrop')
   const hero = document.querySelector('.Hero')
 
@@ -38,7 +39,10 @@
       })
       sr.reveal('.Video', { ...slide, delay: 1000 })
       sr.reveal('.What', slide)
+      sr.reveal('.Mail', slide)
+      sr.reveal('.Support', slide)
       sr.reveal('.Footer', { ...slide, origin: 'bottom' })
+      sr.reveal('.Follow', { ...slide, origin: 'bottom' })
       sr.reveal('.Socialbar', { ...slide, delay: 2000 })
 
       const gridNodeList = document.querySelectorAll('.flex .item')
@@ -68,4 +72,22 @@
     const player = new Vimeo.Player('video', options)
     setTimeout(() => player.play(), 100)
   })
+
+  // Handle scroll position
+  window.onscroll = function () {
+    var d = document.documentElement
+    var offset = d.scrollTop
+    var targetHeight = hero.offsetHeight
+
+    if (offset >= targetHeight) {
+      body.classList.add('is-scrollHero')
+    } else {
+      body.classList.remove('is-scrollHero')
+    }
+  }
+
+  // More description
+  buttonMore.addEventListener('click', function () {
+    body.classList.toggle('is-moreExpanded')
+  })
 })()

workbox-config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  globDirectory: './',
+  globPatterns: ['**/*.{css,gif,png,jpg,svg,json,js,html}'],
+  swDest: 'sw.js',
+  clientsClaim: true,
+  skipWaiting: true
+}