Collapse media query mixins.

Update travis deps.

Moved autoprefixer to global binary.

Compress font-awesome and bootstrap. Fix header.

Remove spreed copywrite in _variables.scss to keep from being appended to font-awesome and bootstrap unminified code. Add sticky comment to main css.

Update makefile.

Insert copywrite header on variables.

Correct readme.

Move bootstrap scss folder.

.travis.yml

@@ -21,6 +21,7 @@ install:
     # see https://github.com/npm/npm/issues/4379#issuecomment-31590254
   - sudo npm config set ca ""
   - sudo npm install -g po2json
+  - sudo npm install -g autoprefixer
 
 script:
   - make get

Makefile

@@ -49,11 +49,9 @@ NODEJS_BIN_EXISTS := $(shell [ -x "$(NODEJS_BIN)" ] && echo 1 || echo 0)
 ifneq ($(NODEJS_BIN_EXISTS), 1)
     $(error "Can't find node.js runtime, please install / check your PATH")
 endif
-NPM_BIN_PATH := $(shell npm bin)
 
 # Tools
-AUTOPREFIXER := autoprefixer
+AUTOPREFIXER_BROWSER_SUPPORT := "> 1%, last 2 versions, Firefox ESR, Opera 12.1"
-AUTOPREFIXER_BROWSER_SUPPORT := "> 1%, last 2 versions, Firefox ESR, Opera 12.1, Opera 12.0"
 
 build: get binary assets
 
@@ -86,18 +84,16 @@ test: get
 
 assets: styles javascript
 
+styles: SASSFLAGS = --style=expanded
 styles:
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/main.scss:$(CURDIR)/static/css/main.min.css
-		$(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) $(CURDIR)/static/css/main.min.css
+		autoprefixer --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) $(CURDIR)/static/css/main.min.css
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/bootstrap.scss:$(CURDIR)/static/css/bootstrap.min.css
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/font-awesome.scss:$(CURDIR)/static/css/font-awesome.min.css
 
-style-vendor-prefix-info:
-		$(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) --info
-
 releaseassets: RJSFLAGS = generateSourceMaps=false preserveLicenseComments=true
 releaseassets: SASSFLAGS = --style=compressed --no-cache
 releaseassets: dist_gopath assets

README.md

@@ -10,11 +10,11 @@ The latest version of Spreed Speak Freely can be found on GitHub:
 
   - [Go](http://golang.org) >= 1.1.0
   - [NodeJS](http://nodejs.org/)
-      + [autoprefixer](https://www.npmjs.org/package/autoprefixer)
-      + [po2json](https://github.com/mikeedwards/po2json)
   - [Sass](http://sass-lang.com/) >= 3.2.0
   - [Compass](http://compass-style.org/)
   - [Babel](http://babel.pocoo.org/)
+  - [po2json](https://github.com/mikeedwards/po2json)
+  - [autoprefixer](https://www.npmjs.org/package/autoprefixer)
   - make
 
 

src/styles/components/_audiovideo.scss

@@ -40,13 +40,13 @@
       display: none;
     }
   }
-  @include breakpt-only-screen($breakpoint-video-small) {
+  @include breakpt($breakpoint-video-small, max-width, only screen) {
     right: 0;
   }
 }
 
 .mainScreenshare #audiovideo { 
-  @include breakpt-only-screen($breakpoint-video-medium) {
+  @include breakpt($breakpoint-video-medium, max-width, only screen) {
     display: none;
   }
 }

src/styles/components/_chat.scss

@@ -160,7 +160,7 @@
   position: absolute;
   right: 0;
   top: 36px;
-  @include breakpt-height($breakpoint-chat-small) {
+  @include breakpt($breakpoint-chat-small, max-height) {
     border-top: 1px solid $bordercolor;
     top: 0px;
   }
@@ -212,7 +212,7 @@
     vertical-align: middle;
     white-space: nowrap;
   }
-  @include breakpt-height($breakpoint-chat-small) {
+  @include breakpt($breakpoint-chat-small, max-height) {
     display: none;
   }
 }
@@ -223,7 +223,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  @include breakpt-height($breakpoint-chat-small) {
+  @include breakpt($breakpoint-chat-small, max-height) {
     bottom: 45px;
   }
 }
@@ -429,7 +429,7 @@
     margin: 0 auto;
     position: absolute;
     right: 0;
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       height: auto;
     }
   }
@@ -440,7 +440,7 @@
     font-size:.8em;
     color: $chat-typing;
     height: 14px;
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       display: none;
     }
   }
@@ -456,7 +456,7 @@
     > div {
       border-top: 1px solid $bordercolor;
     }
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       height: auto;
     }
   }
@@ -474,7 +474,7 @@
     &:focus {
       border-color: $chat-input-border-color;
     }
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       max-height: 2.5em;
     }
   }

src/styles/components/_settings.scss

@@ -33,13 +33,13 @@
 
 #settings.show {
   right: 0;
-  @include breakpt-only-screen($breakpoint-settings-medium) {
+  @include breakpt($breakpoint-settings-medium, max-width, only screen) {
     background: white;
     left: 0;
     width: auto;
   }
   .form-actions{
-    @include breakpt-only-screen($breakpoint-settings-medium) {
+    @include breakpt($breakpoint-settings-medium, max-width, only screen) {
       bottom: 0;
       height: 60px;
       left: 0;
@@ -73,18 +73,18 @@
   }
   .form-horizontal {
     .controls {
-      @include breakpt-only-screen($breakpoint-settings-medium) {
+      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
         margin-left: 110px;
       }
     }
     .control-label {
-      @include breakpt-only-screen($breakpoint-settings-medium) {
+      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
         width: 100px;
         word-wrap: break-word;
       }
     }
   }
-  @include breakpt-only-screen($breakpoint-settings-medium) {
+  @include breakpt($breakpoint-settings-medium, max-width, only screen) {
     padding-bottom: 10px;
   }
 }

src/styles/components/_usability.scss

@@ -52,10 +52,10 @@
     color: #888;
     padding: 20px 0;
   }
-  @include breakpt-only-screen($breakpoint-useability-small){
+  @include breakpt($breakpoint-useability-small, max-width, only screen){
     display: none;
   }
-  @include breakpt-only-screen-with-min($breakpoint-useability-small, $breakpoint-useability-large){
+  @include breakpt($breakpoint-useability-small, min-width, only screen, $breakpoint-useability-large){
     font-size: 1em;
     width: 250px;
   }

src/styles/global/_mixins.scss

@@ -1,29 +1,44 @@
 
-@mixin breakpt($pt) {
+// not handled by autoprefixer
-  @media (max-width: $pt) {
+@mixin tap-highlight-color($color) {
-    @content;
+  -webkit-tap-highlight-color: $color;
-  }
 }
 
-@mixin breakpt-height($pt) {
+/*  Supports media type and up to two expressions 
-  @media (max-height: $pt) {
+    
-    @content;
+    ex output:
-  }
+    @media only screen and (min-width: 700px) and (max-width: 1280px) {
-}
+      .bar .middle img {
+        display: none; 
+      }
+    }
 
-@mixin breakpt-only-screen($pt) {
+    @param $media-value1:   required - number/units
-  @media only screen and (max-width: $pt) {
+    @param $media-feature1: optional - width,height,ect...
-    @content;
+    @param $media-type:     optional - screen,print,ect...
+    @param $media-value2:   optional - number/units
+    @param $media-feature2: optional - width,height,ect...
+*/
+@mixin breakpt($media-value1, $media-feature1: max-width, $media-type: null,
+               $media-value2: null, $media-feature2: max-width) {
+  @if($media-type and $media-value2) {
+    @media #{$media-type} and ($media-feature1: $media-value1) and ($media-feature2: $media-value2) {
+      @content;
+    }
   }
-}
+  @if(not $media-type and $media-value2) {
-
+    @media ($media-feature1: $media-value1) and ($media-feature2: $media-value2) {
-@mixin breakpt-only-screen-with-min($pt1, $pt2) {
+      @content;
-  @media only screen and (min-width: $pt1) and (max-width: $pt2) {
+    }
-    @content;
+  }
+  @if($media-type and not $media-value2) {
+    @media #{$media-type} and ($media-feature1: $media-value1) {
+      @content;
+    }
+  }
+  @if(not $media-type and not $media-value2) {
+    @media ($media-feature1: $media-value1) {
+      @content;
+    }
   }
-}
-
-// not handled by autoprefixer
-@mixin tap-highlight-color($color) {
-  -webkit-tap-highlight-color: $color;
 }

src/styles/libs/bootstrap/responsive.scss

@@ -1,48 +0,0 @@
-/*!
- * Bootstrap Responsive v2.3.2
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */
-
-
-// Responsive
-// For phone and tablet devices
-// -------------------------------------------------------------
-
-
-// REPEAT VARIABLES & MIXINS
-// -------------------------
-// Required since we compile the responsive stuff separately
-
-@import "variables"; // Modify this for custom colors, font-sizes, etc
-@import "mixins";
-
-
-// RESPONSIVE CLASSES
-// ------------------
-
-@import "responsive-utilities";
-
-
-// MEDIA QUERIES
-// ------------------
-
-// Large desktops
-@import "responsive-1200px-min";
-
-// Tablets to regular desktops
-@import "responsive-768px-979px";
-
-// Phones to portrait tablets and narrow desktops
-@import "responsive-767px-max";
-
-
-// RESPONSIVE NAVBAR
-// ------------------
-
-// From 979px and below, show a button to toggle navbar contents
-@import "responsive-navbar";

src/styles/main.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * Spreed Speak Freely.
  * Copyright (C) 2013-2014 struktur AG
  *