add styles and automation

Author: LauraBrandt

css/base/baseline.css

@@ -0,0 +1,7 @@
+body {
+  font-family: sans-serif;
+}
+
+.main-container {
+  padding: 10px 40px 30px 40px;
+}

css/base/variables.css

@@ -0,0 +1,2 @@
+$mainBlue: #3999C9;
+$darkBlue: #21536C;

css/modules/footer.css

@@ -0,0 +1,12 @@
+.site-footer {
+  background-color: $darkBlue;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding: 10px;
+  color: white;
+
+  .logo {
+    width: 150px;
+  }
+}

css/modules/header.css

@@ -0,0 +1,34 @@
+.site-header {
+  background-color: $mainBlue;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  color: white;
+
+  .logo {
+    width: 150px;
+  }
+
+  .main-navigation {
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+
+      li {
+        display: inline-block;
+        margin: 0 5px;
+
+        a {
+          color: white;
+          text-decoration: none;
+        }
+      }
+
+      li.current-menu-item a {
+        color: #ddd;
+      }
+    }
+  }
+}

css/modules/project.css

@@ -0,0 +1,12 @@
+.project {
+  .section.project-status {
+    h2, .project-status-text {
+      display: inline;
+    }
+  }
+
+  .project-image-container img {
+    height: 300px;
+    max-width: 100%;
+  }
+}

css/style.css

@@ -0,0 +1,15 @@
+/*
+Theme Name: Code for Durham Theme
+Author: Code for Durham
+Version: 1.0
+*/
+
+@import "normalize.css";
+
+@import "base/variables";
+
+@import "base/baseline";
+
+@import "modules/header";
+@import "modules/footer";
+@import "modules/project";

gulpfile.js

@@ -0,0 +1,34 @@
+var gulp = require('gulp'),
+settings = require('./settings'),
+browserSync = require('browser-sync').create(),
+postcss = require('gulp-postcss'),
+autoprefixer = require('autoprefixer'),
+cssvars = require('postcss-simple-vars'),
+nested = require('postcss-nested'),
+cssImport = require('postcss-import'),
+mixins = require('postcss-mixins')
+
+gulp.task('styles', function() {
+  return gulp.src(settings.themeLocation + 'css/style.css')
+    .pipe(postcss([cssImport, mixins, cssvars, nested, autoprefixer]))
+    .on('error', (error) => console.log(error.toString()))
+    .pipe(gulp.dest(settings.themeLocation));
+});
+
+gulp.task('watch', function() {
+  browserSync.init({
+    notify: false,
+    proxy: settings.urlToPreview,
+    ghostMode: false
+  });
+
+  gulp.watch('./**/*.php', function() {
+    browserSync.reload();
+  });
+  gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('waitForStyles'));
+});
+
+gulp.task('waitForStyles', gulp.series('styles', function() {
+  return gulp.src(settings.themeLocation + 'style.css')
+    .pipe(browserSync.stream());
+}));