fix merge conflicts

.gitignore

@@ -4,3 +4,4 @@ wp-includes/
 wp-includes
 Session.vim
 .tags*
+src/includes/svg/

gulpfile.js

@@ -15,19 +15,24 @@ const browserSync = require('browser-sync');
 
 sass.compiler = require('node-sass');
 
+const server = browserSync.create();
+
 const babelConfig = require('./babel.config.js');
 const postcssPlugins = [postcssPresetEnv(), cssnano()];
 
 const srcDir = './src/';
-const buildDir = './assets/';
+const buildDir = './build/';
 const jsSrc = path.join(srcDir, 'js/**/*.js');
 const jsDest = path.join(buildDir, 'js/');
 const scssSrc = path.join(srcDir, 'scss/**/*.scss');
 const cssDest = path.join(buildDir, 'css/');
+const htmlSrc = path.join(srcDir, 'html/**/*.html');
+const mustacheSrc = path.join(srcDir, 'html/templates/**/*.mustache');
 const includeBaseDir = path.join(srcDir, 'includes/');
 const includeSrc = path.join(includeBaseDir, '**/*');
 const svgSrc = path.join(srcDir, 'svg/**/*.svg');
 const svgDest = path.join(includeBaseDir, 'svg/');
+const htmlDest = buildDir;
 const assetSrc = path.join(srcDir, 'assets/**/*');
 const assetDest = path.join(buildDir, 'assets/');
 
@@ -39,6 +44,10 @@ function cssClean() {
 	return del(cssDest, { force: true });
 }
 
+function htmlClean() {
+	return del(path.join(htmlDest, '*.html'), { force: true });
+}
+
 function assetClean() {
 	return del(assetDest, { force: true });
 }
@@ -54,7 +63,8 @@ function scssCompile() {
 	return src(scssSrc, { sourcemaps: true })
 		.pipe(sass().on('error', sass.logError))
 		.pipe(postcss(postcssPlugins))
-		.pipe(dest(cssDest, { sourcemaps: true }));
+		.pipe(dest(cssDest, { sourcemaps: true }))
+		.pipe(server.stream());
 }
 
 function svgOptimise() {
@@ -63,12 +73,40 @@ function svgOptimise() {
 		.pipe(dest(svgDest));
 }
 
+function htmlCompile() {
+	return src(htmlSrc)
+		.pipe(mustache())
+		.pipe(
+			fileInclude({
+				basepath: includeBaseDir,
+			})
+		)
+		.pipe(dest(htmlDest));
+}
+
 function assetCompile() {
 	return src(assetSrc).pipe(dest(assetDest));
 }
 
+function serve(done) {
+	server.init({
+		open: false,
+		server: {
+			baseDir: buildDir,
+		},
+		// or instead of server
+		// proxy: "example.home"
+	});
+	done();
+}
+
+function reload(done) {
+	server.reload();
+	done();
+}
+
 const jsWatch = () =>
-	watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile));
+	watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload));
 
 const cssWatch = () =>
 	watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
@@ -76,7 +114,26 @@ const cssWatch = () =>
 const svgWatch = () =>
 	watch(svgSrc, { ignoreInitial: false }, series(svgOptimise));
 
-const assetWatch = () =>
+const htmlWatch = () =>
-	watch(assetSrc, { ignoreInitial: false }, series(assetClean, assetCompile));
+	watch(
+		[htmlSrc, includeSrc, mustacheSrc],
+		{ ignoreInitial: false },
+		series(htmlClean, htmlCompile, reload)
+	);
+
+const assetWatch = () =>
+	watch(
+		assetSrc,
+		{ ignoreInitial: false },
+		series(assetClean, assetCompile, reload)
+	);
+
+exports.default = parallel(
+	jsWatch,
+	cssWatch,
+	svgWatch,
+	htmlWatch,
+	assetWatch,
+	serve
+);
 
-exports.default = parallel(jsWatch, cssWatch, svgWatch, assetWatch);

src/js/index.js

@@ -28,12 +28,6 @@
 			});
 		}
 
-		if (enquiryForm) {
-			enquiryForm.action = '__URL__';
-		}
-
-		document.body.classList.add('rwavw-custom');
-
 		observedNodes.forEach(el => {
 			if (intersectionSupport) {
 				const options = {

src/scss/_variables.scss

@@ -4,7 +4,10 @@ $accent-500: #fc8d00;
 $neutral-900: #231f20;
 
 
-$box-shadow-sk: 4px 4px 6px rgba(0, 10, 56, 0.15), -4px -4px 9px rgba(#fff, 0.75);
+$btn-border-radius: 12px;
-$border-radius: 3px;
+$btn-border-width: 0;
+$btn-border-color: currentColor;
 
+$color-body: $color__neutral-700;
+$background-color: $color__white;
 

src/scss/style.scss

@@ -1,260 +1,44 @@
 @import "variables";
-@import "hero";
+@import "mixins";
-@import "featured";
-@import "feature-sunset";
-@import "feature-narrow";
-@import "contact";
-@import "faq";
-@import "social-proof";
-@import "footer";
 
-#top-nav .ext-nav-toggle,
+@import "reset";
-.state2 body.rwavw-custom .page-border.top {
+
-	@media (max-width: 767px) {
+@import "typography";
-		height: 40px !important;
+@import "base";
-	}
+@import "layout";
+
+.h1 {
+	@extend h1;
 }
 
-body.rwavw-custom {
+.h2 {
-	&.hide-cookie-hdr-showagain {
+	@extend h2;
-		#cookie-law-info-again {
-			display: none !important;
-		}
 }
 
-	.responsive-nav span,
+.h3 {
-	.responsive-nav span::before,
+	@extend h3;
-	.responsive-nav span::after {
-		background-color: $neutral-900;
 }
 
-	.wrapper[class*=" off-canvas"] li > a {
+.h4 {
-		font-size: 18px;
+	@extend h4;
-		padding: 9px 0;
 }
 
-	#top-nav {
+.h5 {
-		.nav,
+	@extend h5;
-		.logo {
-			float: none;
 }
 
-		.logo {
+.h6 {
-			margin-top: 0;
+	@extend h6;
-
-			.sitename {
-				font-size: 16px;
-				font-weight: 600;
-				opacity: 0.9;
-			}
-		}
 }
 
-	.top-nav-inner {
+.button {
-		display: flex;
+	@extend button;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-
-		&::before,
-		&::after {
-			content: none;
 }
 
-		> .logo {
+.a {
-			order: 5;
+	@extend a;
 }
 
-		> .nav {
+.button {
-			order: 10;
+	@extend button;
-		}
-	}
-
-	&.home .wrapper-site > .wrapper-content > .widget {
-		margin-bottom: 44px;
-
-		&.rwavw-feature-details {
-			@media (max-width: 64em) {
-				margin-top: -44px;
-			}
-		}
-
-		@media (min-width: 64em) {
-			margin-bottom: 88px;
-		}
-	}
-
-	.widget.rwavw-boxed {
-		width: calc(100% - 80px);
-		max-width: 1160px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.page-border {
-		background-color: #fff;
-
-		&::after {
-			content: '';
-			display: block;
-			position: absolute;
-			background-color: rgba(#000, 0.03);
-		}
-
-		&.top::after,
-		&.bottom::after {
-			width: 100%;
-			height: 1px;
-			left: 0;
-		}
-
-		&.bottom::after {
-			bottom: 100%;
-			background-color: rgba(#000, 0.05);
-		}
-
-		&.top::after {
-			top: 100%;
-		}
-
-		&.left::after,
-		&.right::after {
-			width: 1px;
-			top: 0;
-			bottom: 0;
-		}
-
-		&.left::after {
-			left: 100%;
-		}
-
-		&.right::after {
-			right: 100%;
-		}
-
-		@at-root html.state2 .page-border.left::after {
-			top: 60px;
-		}
-
-		@at-root html.state2 .page-border.right::after {
-			top: 60px;
-		}
-	}
-
-	.page-border.bottom::after {
-		bottom: 100%;
-	}
-
-	.page-border.bottom::before {
-		content: '';
-		display: block;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 100%;
-		left: 0;
-
-		background: linear-gradient(
-			to left,
-			rgba(#000, 0),
-			rgba(#000, 0.9) 32px,
-			rgba(#000, 1) 50%,
-			rgba(#000, 0) 50%
-		), linear-gradient(
-			to right,
-			rgba(#000, 0),
-			rgba(#000, 0.9) 32px,
-			rgba(#000, 1) 50%,
-			rgba(#000, 0) 50%
-		);
-	}
-
-	.heading-page-title {
-		font-weight: 400;
-	}
-
-	.heading-section-title {
-		font-weight: 400;
-		font-size: 32px;
-		line-height: 1.2;
-		margin-bottom: 44px;
-
-		@media (max-width: 767px) {
-		}
-
-		@media (min-width: 766.98px) {
-		}
-
-		@media (max-width: 63.98em) {
-			text-align: center !important;
-		}
-
-		@media (min-width: 64em) {
-			font-size: 60px;
-		}
-	}
-
-	.widget.rwavw-cta-box {
-		box-shadow: $box-shadow-sk;
-		border-radius: $border-radius;
-
-		.section-cols > .pure-g {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			align-content: center;
-
-			> div {
-				margin: 22px 0;
-			}
-		}
-
-		a {
-			&:link,
-			&:visited {
-				color: $accent-500;
-				font-weight: bold;
-				font-size: 18px;
-				transition: opacity 0.3s;
-				opacity: 1;
-			}
-
-			&.link-social:link,
-			&.link-social:visited {
-				font-weight: 600;
-				font-size: 15px;
-			}
-
-			&:hover,
-			&:active {
-				opacity: 0.7;
-			}
-
-			&.link-social:hover,
-			&.link-social:active {
-				// opacity: 0.4;
-			}
-
-			svg {
-				position: relative;
-				width: auto;
-				height: 29px;
-				top: 9px;
-				margin-left: 5px;
-			}
-		}
-
-		@media (min-width: 680px) {
-			.section-cols > .pure-g {
-				flex-direction: row;
-				justify-content: space-around;
-				align-items: flex-start;
-
-				> div {
-					flex: 0 0 auto;
-				}
-			}
-		}
-	}
 }