Updates style organization (WIP)

Author: Keith Daulton

assets/styles/site.css

@@ -1,19 +1,22 @@
 const { src, dest, parallel, watch } = require('gulp');
 const sass = require('gulp-sass');
-const concat = require('gulp-concat');
+//const concat = require('gulp-concat');
+const sourcemaps = require('gulp-sourcemaps');
 //const autoprefixer = require('gulp-autoprefixer');
 const rollupEach = require('gulp-rollup-each');
 
 function styles() {
-    return src('src/styles/*.scss', { sourcemaps: true })
+    return src('src/styles/*.scss')
+        .pipe(sourcemaps.init())
         .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
         // css custom property support makes this practically pointless
         //      (see: https://caniuse.com/#feat=css-variables vs npx browserslist '> .5%')
         // .pipe(autoprefixer({
         //     browsers: ['> .5%'],
         //     cascade: false
         // }))
-        .pipe(dest('assets/styles'), { sourcemaps: true });
+        .pipe(sourcemaps.write())
+        .pipe(dest('assets/styles'));
 }
 
 // TODO: add typescript compilation
@@ -30,8 +33,8 @@ function scripts() {
         .pipe(dest('assets/scripts', { sourcemaps: true }));
 }
 
-// watch('src/styles/**/*.scss', styles);
-// watch('src/scripts/*.js', scripts);
+watch('src/styles/**/*.scss', styles);
+watch('src/scripts/*.js', scripts);
 
 exports.scripts = scripts;
 exports.styles = styles;

assets/styles/styles.css

@@ -24,6 +24,7 @@
     "gulp-autoprefixer": "^6.1.0",
     "gulp-concat": "^2.6.1",
     "gulp-rollup-each": "^3.0.0",
-    "gulp-sass": "^4.0.2"
+    "gulp-sass": "^4.0.2",
+    "gulp-sourcemaps": "^2.6.5"
   }
 }

gulpfile.js

@@ -0,0 +1,38 @@
+@keyframes phone-home {
+    from {
+        background-position: left calc(50vw + 20px) bottom -100vh;
+    }
+
+    to {
+        background-position: left calc(50vw + 20px) bottom -30vh;
+    }
+}
+
+@keyframes fade-in-down {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100% ,0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+// FIXME: needs to be on animation classes only
+.h-vp-in,
+.h-vp-in-once {
+  &.is-in-view {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    animation-delay: .25s;
+  }
+}
+
+.a-fade-in-down {
+  &:not(.h-vp-in):not(.h-vp-in-once),
+  &.is-in-view {
+    animation-name: fade-in-down;
+  }
+}

package-lock.json

@@ -0,0 +1,13 @@
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+}
+
+figure {
+    margin: 0;
+}