Merge branch 'sass'

Gemfile

@@ -5,4 +5,5 @@ group :development do
   gem "sass-globbing"
   gem "compass"
   gem "bootstrap-sass"
+  gem "breakpoint"
 end

Gemfile.lock

@@ -7,6 +7,9 @@ GEM
     bootstrap-sass (3.3.4.1)
       autoprefixer-rails (>= 5.0.0.1)
       sass (>= 3.2.19)
+    breakpoint (2.5.0)
+      sass (~> 3.3)
+      sassy-maps (< 1.0.0)
     chunky_png (1.3.4)
     compass (1.0.3)
       chunky_png (~> 1.2)
@@ -30,12 +33,15 @@ GEM
     sass (3.4.18)
     sass-globbing (1.1.1)
       sass (>= 3.1)
+    sassy-maps (0.4.0)
+      sass (~> 3.3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   bootstrap-sass
+  breakpoint
   compass
   sass
   sass-globbing

config.rb

@@ -16,6 +16,7 @@ javascripts_dir = "source/js"
 # Require any additional compass plugins installed on your system.
 require 'sass-globbing'
 require 'bootstrap-sass'
+require 'breakpoint'
 
 ##
 ## You probably don't need to edit anything below this.

sass/base/_base.scss

@@ -2,7 +2,14 @@ body {
   padding-top: 60px;
 }
 
-main img {
+main {
-  height: auto;
+  a:link,
-  max-width: 100%;
+  a:hover {
+    border-bottom: 1px solid;
+    text-decoration: none;
+  }
+
+  img {
+    @extend .img-responsive;
+  }
 }

sass/base/_lists.scss

@@ -1,11 +0,0 @@
-dt {
-  margin-top: .5em;
-
-  &:after {
-    content: ':';
-  }
-}
-
-dd {
-  padding-left: 2em;
-}

sass/base/_tables.scss

@@ -1,3 +0,0 @@
-table {
-  width: 100%;
-}

sass/components/_latest-posts.scss

@@ -1,6 +0,0 @@
-.latest-posts {
-  li.active a {
-    color: $dark-gray;
-    font-weight: $semibold;
-  }
-}

sass/components/_navbar.scss

@@ -1,7 +0,0 @@
-/*
-@each $page in experience, services, testimonials, talks, blog, contact {
-    .page--#{$page} .nav__#{$page} {
-        @extend .active;
-    }
-}
-*/

sass/components/blocks/_drupalcon-la.scss

@@ -1,5 +0,0 @@
-.block--drupalcon_la {
-  img {
-    margin-bottom: .5em;
-  }
-}

sass/components/pages/_testimonials.scss

@@ -4,9 +4,14 @@
 
   .testimonial__image {
     @extend .img-circle;
-    float: right;
+    @extend .pull-right;
-    height: 90px;
+    height: 75px;
     margin: 0 0 10px 10px;
+    width: 75px;
+
+    @include breakpoint($screen-sm) {
+      height: 90px;
       width: 90px;
     }
+  }
 }

sass/oliverdavies.scss

@@ -1,5 +1,6 @@
 @import 'bootstrap';
 @import 'compass';
+@import 'breakpoint';
 
 @import "variables/**/*";
 @import "base/**/*";

source/_layouts/default.html.twig

@@ -18,19 +18,11 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" href="{{ site.url }}/css/styles.css">
+        <link rel="stylesheet" href="{{ site.url }}/css/oliverdavies.css">
         <link rel="stylesheet" href="{{ site.url }}/components/highlightjs/styles/{{ site.hightlightjs_style }}.css">
         <link rel="stylesheet" href="{{ site.url }}/components/font-awesome/css/font-awesome.min.css">
         {% block styles %}{% endblock %}
 
-        <style type="text/css">
-            main a:link,
-            main a:hover {
-                border-bottom: 1px solid;
-                text-decoration: none;
-            }
-        </style>
-
         {% for size in site.apple_touch_icon_sizes %}
             <link rel="apple-touch-icon" href="{{ site.gravatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
         {% endfor %}

source/testimonials.html.twig

@@ -96,7 +96,7 @@ testimonials:
     <p>Here are some examples of the nice things that clients and former colleagues have said.</p>
     <p>You can view more recommendations on my <a href="{{ site.linkedin.url }}">LinkedIn profile</a>.</p>
 
-    {% for testimonial in page.testimonials|reverse %}
+    {% for testimonial in page.testimonials|reverse if not testimonial.draft %}
         {% set company = testimonial.company %}
 
         <article class="testimonial">

watch-sass.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+bundle exec compass watch