Finally got carousel working great

_layouts/default.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link href="/dist/styles/master.css" rel="stylesheet">
+  <link href="/dist/styles/vendor.css" rel="stylesheet">
   <link rel="shortcut icon" href="/favicon.ico">
 
   <script src="//use.typekit.net/uxc7gdu.js"></script>
@@ -17,7 +18,7 @@
 
   <header id="header" class="header-{{ page.id }}">
     <div class="container">
-      <!-- <img src="/dist/images/logo.svg" class="logo" width="200"> -->
+      <img src="/dist/images/logo.svg" class="logo" width="200">
       <h1>John Martin</h1>
       <p class="availability">Availability: {{ site.availability }}</p>
       <p>Freelance full stack web designer / developer</p>

assets/less/master.less

@@ -31,30 +31,27 @@ a {
   width: @breakpoint-1 - (@unit*2);
   &.no-pad {
     padding: @unit 0;
-    // width: @breakpoint-1 - (@unit*2);
   }
 }
 
 .button {
   padding: (@unit/4) (@unit/1.5);
-  color: @bg;
-  border: 2px solid @text;
+  color: @text;
+  border: 2px solid @button;
   text-decoration: none;
   border-radius: 100px;
   &:hover {
-    border-color: lighten(@text, 10%);
+    color: @bg;
+    background-color: @button;
   }
 }
 
 .item {
+  .clearfix;
   position: relative;
-  overflow: hidden;
   margin-bottom: @unit;
-  padding-left: @unit*8;
   background-color: lighten(@bg, 5%);
-  min-height: 400px;
-  border-radius: 5px;
-  box-sizing: border-box;
+  height: 400px;
   .context {
     position: absolute;
     top: 0;
@@ -70,7 +67,7 @@ a {
     .info {
       font-family: "ff-tisa-web-pro", serif;
       line-height: 1.5;
-      font-size: 0.8em;
+      font-size: (@font-size/1.5);
       font-style: italic;
     }
     hr {
@@ -79,19 +76,12 @@ a {
     }
     .actions {
       margin-bottom: 0;
-      .button {
-        color: lighten(@text, 20%);
-        border-color: @header-contact-bg;
-        &:hover {
-          color: lighten(@bg, 5%);
-          background-color: @header-contact-bg;
-        }
-      }
     }
   }
   .images {
-    color: @text-invert;
+    margin-left: @unit*8;
     background-color: @bg-invert;
+    width: @breakpoint-1 - (@unit*10);
   }
 }
 
@@ -115,7 +105,7 @@ a {
     float: right;
   }
   h1 {
-    font-size: (@unit*1.25);
+    font-size: (@font-size*2);
     margin: 0 0 (@unit/8) 0;
     color: fadein(@header-text, 100%);
   }
@@ -150,12 +140,21 @@ a {
   .container {
     width: @breakpoint-2 - (@unit*2);
   }
+  .item .images {
+    width: @breakpoint-2 - (@unit*10);
+  }
 }
 
 @media screen and (max-width: @breakpoint-2) {
   .container {
     width: @breakpoint-tablet - (@unit*2);
   }
+  .item .images {
+    width: @breakpoint-tablet - (@unit*10);
+  }
+  #header .logo {
+    width: 150px;
+  }
 }
 
 @media screen and (max-width: @breakpoint-tablet) {
@@ -165,14 +164,29 @@ a {
       width: 100%;
     }
   }
-}
-
-@media screen and (max-width: @breakpoint-mobile) {
-  body {
-    font-size: 18px;
+  .item {
+    padding: 0;
+    border-radius: 0;
+    .context {
+      position: relative;
+      width: 100%;
+      padding: (@unit/1.5) (@unit/1.5) @unit (@unit/1.5);
+      .info {
+        font-size: (@font-size/1.3);
+      }
+    }
+    .images {
+      width: 100%;
+      margin-left: 0;
+    }
   }
   #header {
     text-align: center;
+    .logo {
+      float: none;
+      width: 100px;
+      margin-bottom: (@unit/2);
+    }
     .container {
       padding: (@unit/2) (@unit/2) 0 (@unit/2);
     }
@@ -181,12 +195,18 @@ a {
       display: inline-block;
     }
   }
-  .item {
-    padding: 0;
-    border-radius: 0;
-    .context {
-      position: relative;
-      width: 100%;
-    }
+}
+
+@media screen and (max-width: @breakpoint-mobile) {
+  body {
+    font-size: 1em;
   }
 }
+
+// Vendor resets
+.fotorama__arr,
+.fotorama__fullscreen-icon,
+.fotorama__video-close,
+.fotorama__video-play {
+  background: none !important;
+}

assets/less/master/variables.less

@@ -4,13 +4,14 @@
 @breakpoint-mobile: 600px;
 
 @unit: 40px;
-@font-size: 21px;
+@font-size: 1.3em;
 
-@bg: #2C2C2C;
-@text: #DDD;
-@bg-invert: #F9F9F9;
+@bg: #2c2c2c;
+@text: #ddd;
+@bg-invert: #f9f9f9;
 @text-invert: #111;
 @header-work-bg: #db2442;
 @header-about-bg: #424ee2;
-@header-contact-bg: #1bb475;
+@header-contact-bg: #3bac40;
 @header-text: rgba(255, 255, 255, 0.8);
+@button: #1bb475;

bower.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "jquery": "2.1.*",
     "normalize.css": "3.0.*",
-    "voronoi": "https://github.com/gorhill/Javascript-Voronoi/archive/master.zip"
+    "voronoi": "https://github.com/gorhill/Javascript-Voronoi/archive/master.zip",
+    "fotorama": "https://github.com/artpolikarpov/fotorama/releases/download/4.6.2/fotorama-4.6.2.zip"
   }
 }

gulpfile.js

@@ -11,16 +11,21 @@ var paths = {
     less: './assets/less/*.less',
     scripts: './assets/scripts/*.js',
     images: './assets/images/**/*',
-    vendor: [
+    vendor_scripts: [
       './bower_components/jquery/dist/jquery.js',
+      './bower_components/fotorama/fotorama.js',
       './bower_components/voronoi/rhill-voronoi-core.js'
+    ],
+    vendor_styles: [
+      './bower_components/fotorama/fotorama.css'
     ]
   },
   dest: {
     less: './dist/styles/',
     scripts: './dist/scripts/',
     images: './dist/images/',
-    vendor: './dist/scripts/'
+    vendor_scripts: './dist/scripts/',
+    vendor_styles: './dist/styles/'
   }
 };
 
@@ -43,14 +48,20 @@ gulp.task('images', function() {
     .pipe(gulp.dest(paths.dest.images));
 });
 
-gulp.task('vendor', function() {
-  return gulp.src(paths.src.vendor)
+gulp.task('vendor_scripts', function() {
+  return gulp.src(paths.src.vendor_scripts)
     .pipe(uglify())
     .pipe(concat('vendor.js'))
-    .pipe(gulp.dest(paths.dest.vendor));
+    .pipe(gulp.dest(paths.dest.vendor_scripts));
 });
 
-gulp.task('default', ['scripts', 'less', 'images', 'vendor']);
+gulp.task('vendor_styles', function() {
+  return gulp.src(paths.src.vendor_styles)
+    .pipe(concat('vendor.css'))
+    .pipe(gulp.dest(paths.dest.vendor_styles));
+});
+
+gulp.task('default', ['scripts', 'less', 'images', 'vendor_scripts', 'vendor_styles']);
 
 gulp.task('watch', function () {
   gulp.watch(paths.src.scripts, ['scripts']);

index.html

@@ -16,7 +16,10 @@ <h2>Synkio</h2>
       </p>
     </aside>
     <div class="images">
-      ...
+      <div class="fotorama" data-fit="cover" data-width="100%" data-height="400" data-nav="false" data-arrows="false" data-autoplay="4000">
+        <img src="/dist/images/projects/synkio-1.jpg" height="480">
+        <img src="/dist/images/projects/synkio-2.jpg" height="480">
+      </div>
     </div>
   </article>