Merge branch 'base-edits'

dist/js/added.js

@@ -0,0 +1,76 @@
+$(document).ready(function() {
+  // popup when they try to log in or signup
+  $('#login, #signup, .social-media-icons').click(function() {
+    $('#popup')
+      .text('Coming Soon!')
+      .slideDown()
+      .delay(4000)
+      .slideUp();
+  });
+
+  // email submission
+  $('#email-form').submit(function(e) {
+    e.preventDefault();
+
+    $('#popup')
+          .text('Added to list! Thank you for joining!')
+          .slideDown()
+          .delay(4000)
+          .slideUp();
+
+    $.ajax({
+      url: 'https://ucharify-api.herokuapp.com/api/users/landing',
+      type: 'post',
+      data: $('#email-form').serialize(),
+      success: function(data) {
+        // whatever you wanna do after the form is successfully submitted
+        // $('#popup')
+        //   .text('Added to list! Thank you for joining!')
+        //   .slideDown()
+        //   .delay(4000)
+        //   .slideUp();
+        console.log('successfully added email');
+      },
+      error: function(error) {
+        // $('#popup')
+        //   .text('Email invalid or exists')
+        //   .slideDown()
+        //   .delay(4000)
+        //   .slideUp();
+        console.log('invalid or exists email');
+      }
+    });
+  });
+
+  // Countdown
+  $('#countdown').countdown('2019/03/15', function(event) {
+    $(this).text(event.strftime('%D days %H:%M:%S'));
+    var $this = $(this).html(
+      event.strftime(`
+    <div class="time-factor"><span class="number-text">%w</span><span>weeks</span></div>
+    <div class="time-factor"><span class="number-text">%d</span><span>days</span></div>
+    <div class="time-factor"><span class="number-text">%H</span><span>hr</span></div>
+    <div class="time-factor"><span class="number-text">%M</span><span>min</span></div>
+    <div class="time-factor right-most"><span class="number-text">%S</span><span>sec</span></div>
+    `)
+    );
+  });
+
+  // Slideshow main
+  var myIndex = 0;
+  carousel();
+
+  function carousel() {
+    var i;
+    var x = document.getElementsByClassName('mySlides');
+    for (i = 0; i < x.length; i++) {
+      x[i].style.display = 'none';
+    }
+    myIndex++;
+    if (myIndex > x.length) {
+      myIndex = 1;
+    }
+    x[myIndex - 1].style.display = 'block';
+    setTimeout(carousel, 4000); // Change image every 2 seconds
+  }
+});

dist/js/main.min.js

@@ -0,0 +1 @@
+!function(){const e=document.documentElement;if(e.classList.remove("no-js"),e.classList.add("js"),document.body.classList.contains("has-animations")){const e=window.sr=ScrollReveal();e.reveal(".hero-title, .hero-paragraph, .hero-cta",{duration:1e3,distance:"40px",easing:"cubic-bezier(0.5, -0.01, 0, 1.005)",origin:"bottom",interval:150}),e.reveal(".feature, .pricing-table",{duration:600,distance:"40px",easing:"cubic-bezier(0.5, -0.01, 0, 1.005)",interval:100,origin:"bottom",viewFactor:.5}),e.reveal(".feature-extended-image, .testimonial",{duration:600,scale:.9,easing:"cubic-bezier(0.5, -0.01, 0, 1.005)",viewFactor:.5})}}();

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "evelyn",
+  "version": "1.0.0",
+  "description": "Evelyn Template",
+  "author": "Pasquale Vitiello <[email protected]>",
+  "license": "GPLv3",
+  "repository": {
+    "type": "git",
+    "url": "https://bitbucket.org/pasqualevitiello/evelyn.git"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/pasqualevitiello/evelyn/issues"
+  },
+  "scripts": {
+    "clean": "rimraf dist/{css/*,js/*,images/*}",
+    "autoprefixer": "postcss -u autoprefixer -r dist/css/*",
+    "scss": "node-sass --output-style compressed -o dist/css src/scss",
+    "lint": "eslint src/js || true",
+    "lint-scss": "stylelint src/scss/*.scss --syntax scss || true",
+    "uglify": "mkdirp dist/js -p && uglifyjs src/js/*.js -m -c -o dist/js/main.min.js",
+    "imagemin": "imagemin src/images/* -o dist/images",
+    "serve": "browser-sync start --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\"",
+    "build:css": "run-s lint-scss scss autoprefixer",
+    "build:js": "run-s lint uglify",
+    "build:images": "run-s imagemin",
+    "build": "run-s build:*",
+    "watch:css": "onchange \"src/scss\" -- run-s build:css",
+    "watch:js": "onchange \"src/js\" -- run-s build:js",
+    "watch:images": "onchange \"src/images\" -- run-s build:images",
+    "watch": "run-p serve watch:*",
+    "postinstall": "run-s build watch"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.0.1",
+    "browser-sync": "^2.12.8",
+    "eslint": "^5.2.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "imagemin-cli": "^3.0.0",
+    "mkdirp": "^0.5.1",
+    "node-sass": "^4.9.2",
+    "npm-run-all": "^4.1.3",
+    "onchange": "^4.1.0",
+    "postcss-cli": "^6.0.0",
+    "rimraf": "^2.5.4",
+    "stylelint": "^9.4.0",
+    "uglify-es": "^3.3.10"
+  },
+  "homepage": "https://bitbucket.org/pasqualevitiello/evelyn#readme",
+  "main": ".eslintrc.js"
+}

src/js/main.js

@@ -0,0 +1,36 @@
+(function() {
+  const doc = document.documentElement;
+
+  doc.classList.remove('no-js');
+  doc.classList.add('js');
+
+  // Reveal animations
+  if (document.body.classList.contains('has-animations')) {
+    /* global ScrollReveal */
+    const sr = (window.sr = ScrollReveal());
+
+    sr.reveal('.hero-title, .hero-paragraph, .hero-cta', {
+      duration: 1000,
+      distance: '40px',
+      easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',
+      origin: 'bottom',
+      interval: 150
+    });
+
+    sr.reveal('.feature, .pricing-table', {
+      duration: 600,
+      distance: '40px',
+      easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',
+      interval: 100,
+      origin: 'bottom',
+      viewFactor: 0.5
+    });
+
+    sr.reveal('.feature-extended-image, .testimonial', {
+      duration: 600,
+      scale: 0.9,
+      easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',
+      viewFactor: 0.5
+    });
+  }
+})();

src/scss/added.css

@@ -0,0 +1,121 @@
+
+/* All that I added for styles */
+.logo {
+    height: 80px;
+    width: 80px;
+  }
+  
+  #countdown {
+    margin: 120px 0 100px 0;
+    
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    color: #BDBDBD;
+  }
+  .time-factor {
+    margin: 0;
+    padding: 1em;
+  
+    flex: 0 0 120px;
+    border-right: 1px solid #B2EBF2;
+    
+    display: flex;
+    flex-direction: column;
+    min-width: 120px;
+  
+  }
+  .right-most {
+    border: none;
+  }
+  .number-text {
+    font-size: 2em;
+    color: #1E4D92;
+  }
+  
+  
+  
+  .join-paragraph {
+    font-size: 0.8em;
+  }
+  .hero-cta {
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+  }
+  .email-input {
+    margin-right: 5px;
+    padding: 5px 10px;
+    border: none;
+    min-width: 250px;
+    box-shadow: 0 8px 24px rgba(32,43,54,0.12);
+  }
+  #popup {
+    position: fixed;
+    top: 30px;
+    margin-top: 1em;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    background-color: rgb(49, 49, 49);
+    color: white;
+    font-size: 0.8em;
+    padding: 0.2em 0.7em;
+    border-radius: 3px;
+    display: none;
+  }
+  
+  
+  .hero-media video {
+    max-width: 100%;
+  }
+  
+  .slideshow-container {
+    box-shadow: 0 8px 24px rgba(32,43,54,0.12);
+  }
+  .mySlides {
+    display:none;
+    width: 100%;
+    height: 100%;
+  }
+  
+  
+  .sponsor {
+    min-height: 40px;
+    max-width: 200px;
+    max-height: 100px;
+    /* max-width: 200px;
+    height: 80px; */
+  }
+  
+  
+  .testimonial-position {
+    margin-left: 10px;
+    font-size: 13px;
+  }
+
+  
+  .site-footer {
+    background: #0f8a9d;
+    background: linear-gradient(57deg, #00C6A7 0%, #1E4D92 100%);
+    /* -webkit-transform-origin: 0; */
+    transform-origin: 0;
+    /* -webkit-transform: skewY(-12deg); */
+    /* transform: skewY(-12deg); */
+  }
+  .email-me {
+    font-size: 1.5em;
+    color: white;
+  }
+
+  .footer-links {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .small-white-font {
+    font-size: 1em;
+    color: #f3e5f5;
+  }

src/scss/layout/_testimonials.scss

@@ -0,0 +1,71 @@
+.testimonials {
+	.section-title {
+		margin-bottom: 48px;
+	}
+}
+
+.testimonials-wrap {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin-right: -12px;
+	margin-left: -12px;
+	margin-top: -12px;
+
+	&:last-of-type {
+		margin-bottom: -12px;
+	}
+
+	&:not(:last-of-type) {
+		margin-bottom: 12px;
+	}
+}
+
+.testimonial {
+	padding: 12px;
+	width: 368px;
+	max-width: 368px;
+	flex-grow: 1;
+}
+
+.testimonial-inner {
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	background: color(bg, 1);
+	padding: 32px 24px;
+	height: 100%;
+	@include shadow;
+
+	> * {
+		width: 100%;
+	}
+}
+
+.testimonial-footer {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.testimonial-image {
+	width: 40px;
+	height: 40px;
+	margin-right: 12px;
+
+	img {
+		border-radius: 20px;
+	}
+}
+
+.testimonial-name {
+	color: color(typography, 1);
+}
+
+@include media('>medium') {
+	.testimonials {
+		.section-title {
+			margin-bottom: 80px;
+		}
+	}
+}

src/scss/style.scss

@@ -0,0 +1,77 @@
+/*--------------------------------------------------------------
+# Variables, functions and mixins
+--------------------------------------------------------------*/
+@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins',
+	'abstracts/include-media';
+
+/*--------------------------------------------------------------
+1.0 Normalize
+	* normalize.css v7.0.0 | MIT License
+	* github.com/necolas/normalize.css
+--------------------------------------------------------------*/
+@import 'normalize';
+
+/*--------------------------------------------------------------
+# Base
+--------------------------------------------------------------*/
+@import 'base/base';
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+@import 'base/typography';
+
+/*--------------------------------------------------------------
+# Helpers
+--------------------------------------------------------------*/
+@import 'base/helpers';
+
+/*--------------------------------------------------------------
+# Buttons
+--------------------------------------------------------------*/
+@import 'components/buttons';
+
+/*--------------------------------------------------------------
+# Header
+--------------------------------------------------------------*/
+@import 'layout/header';
+
+/*--------------------------------------------------------------
+# Hero
+--------------------------------------------------------------*/
+@import 'layout/hero';
+
+/*--------------------------------------------------------------
+# Clients
+--------------------------------------------------------------*/
+@import 'layout/clients';
+
+/*--------------------------------------------------------------
+# Features
+--------------------------------------------------------------*/
+@import 'layout/features';
+
+/*--------------------------------------------------------------
+# Features extended
+--------------------------------------------------------------*/
+@import 'layout/features-extended';
+
+/*--------------------------------------------------------------
+# Pricing
+--------------------------------------------------------------*/
+@import 'layout/pricing';
+
+/*--------------------------------------------------------------
+# Site content
+--------------------------------------------------------------*/
+@import 'layout/main';
+
+/*--------------------------------------------------------------
+# Testimonials
+--------------------------------------------------------------*/
+@import 'layout/testimonials';
+
+/*--------------------------------------------------------------
+# Footer
+--------------------------------------------------------------*/
+@import 'layout/footer';