vertical shapes sidebar now auto-resizes as well

css/styles.css

@@ -136,34 +136,25 @@ CENTER PANEL
 
 #verticalShapes {
 	position: absolute;
-	right: -56px;
+	right: 0;
 	bottom: 15px;
+	margin-right: -8.5%;
+	width: 8%;
 }
 
-#verticalShapes .verticalshape {
+#verticalShapes > div {
-	width: 50px;
-	height: 50px;
 	border: 2px solid #333;
 	border-radius: 0px 5px 5px 0px;
-	margin-top: 4px; /*background-color:  #f0f;
+	margin-top: 4px;
-	*/
+	background-color: #fff;
-cursor: pointer;
+	cursor: pointer;
 }
 
-#verticalShapes .verticalshape.straight {
+#verticalShapes > div img.verticalshape {
-	background: url('../img/vertical_shape_icons/straight.png') no-repeat;
+	width: 100%;
-}
+	max-width: 50px;
-
+	height: auto;
-#verticalShapes .verticalshape.diverging {
+	vertical-align: bottom;
-	background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
-}
-
-#verticalShapes .verticalshape.converging {
-	background: url('../img/vertical_shape_icons/converging.png') no-repeat;
-}
-
-#verticalShapes .verticalshape.sinus {
-	background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
 }
 
 .drawareacontainer {

index.html

@@ -75,10 +75,10 @@
       </div>
       <canvas id="preview_tmp"></canvas>
       <div id="verticalShapes">
-        <div class="verticalshape straight"> </div>
+        <div><img class="verticalshape straight" src="img/vertical_shape_icons/straight.png" /></div>
-        <div class="verticalshape diverging"> </div>
+        <div><img class="verticalshape diverging" src="img/vertical_shape_icons/diverging.png" /></div>
-        <div class="verticalshape converging"> </div>
+        <div><img class="verticalshape converging" src="img/vertical_shape_icons/converging.png" /></div>
-        <div class="verticalshape sinus"> </div>
+        <div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
       </div>
     </div>
     <div class="bottompanel">

less/verticalshapes.less

@@ -1,20 +1,22 @@
 #verticalShapes {
   position:absolute;
-  right: -56px;
+  right: 0;
   bottom: 15px;
+  margin-right: -8.5%;
+  width: 8%;
 
-  .verticalshape {
+  >div {
-    width: 50px;
-    height: 50px;
     border: 2px solid #333;
     border-radius: 0px 5px 5px 0px;
     margin-top: 4px;
-  /*background-color: #f0f;*/
+    background-color: #fff;
     cursor: pointer;
 
-    &.straight { background: url('../img/vertical_shape_icons/straight.png') no-repeat; }
+    img.verticalshape {
-    &.diverging { background: url('../img/vertical_shape_icons/diverging.png') no-repeat; }
+      width: 100%;
-    &.converging { background: url('../img/vertical_shape_icons/converging.png') no-repeat; }
+      max-width: 50px;
-    &.sinus { background: url('../img/vertical_shape_icons/sinus.png') no-repeat; }
+      height: auto;
+      vertical-align: bottom;
+    }
   }
 }

lesstocss.sh

@@ -1,55 +1,72 @@
 #!/bin/bash
 
-echo 'converting LESS to CSS...'
+choices=0
-# generate CSS from LESS
+
-lessc less/styles.less css/styles.css
+if [ ! -n "$1" ]; then
+  echo 'no arguments passed.. this will simply convert LESS to CSS.'
+  echo "in case you're wondering, there's arguments you can pass:"
+  echo ' -m / --minify  =  minify css'
+  echo ' -p / --prefix  =  apply browser-specific prefixes'
+  echo ''
+fi
+
+
+if [ -n "$1" ]; then
+  if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then
+    # echo 'got prefix'
+    choices=`expr $choices + 1`
+  fi
+  if [ $1 = '--minify' ] || [ $1 = '-m' ]; then
+    # echo 'got minify'
+    choices=`expr $choices + 2`
+  fi
+fi
+if [ -n "$2" ]; then
+  if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then
+    # echo 'got prefix'
+    choices=`expr $choices + 1`
+  fi
+  if [ $2 = '--minify' ] || [ $2 = '-m' ]; then
+    # echo 'got minify'
+    choices=`expr $choices + 2`
+  fi
+fi
+
 
 if [ -a css/styles.min.css ]; then
   rm css/styles.min.css
 fi
 
-if [ -n "$1" ]; then
+# generate CSS from LESS
-  if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then
+echo 'converting LESS to CSS...'
-    echo 'applying prefixr...'
+lessc less/styles.less css/styles.css
 
+case "$choices" in
+"0")
+    echo 'just less-to-css'
+    ;;
+"1")
+    echo 'applying prefixr...'
     # prefixed (-s overwrites existing file)
     prefixr --input ./css/styles.css -s
-  fi
+    ;;
-  if [ $1 = '--minify' ] || [ $1 = '-m' ]; then
+"2")
-
+    echo 'creating minified....'
-    if [ ! -n "$2" ]; then
+    lessc --yui-compress less/styles.less css/styles.min.css
-      echo 'creating minified....'
+    ;;
-      lessc --yui-compress less/styles.less css/styles.min.css
+"3")
-    else
-      echo 'creating minified and prefixed...'
-
-      # copy to .min.css to create a minified version as well
-      cp css/styles.css css/styles.min.css
-
-      # prefixed and minified (-s overwrites existing file)
-      prefixr --input ./css/styles.min.css -s -c
-   fi
-
-  fi
-fi
-
-
-
-if [ -n "$2" ]; then
-  if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then
-    echo 'applying prefixr...'
-
-    # prefixed (-s overwrites existing file)
-    prefixr --input ./css/styles.css -s
-  fi
-  if [ $2 = '--minify' ] || [ $2 = '-m' ]; then
     echo 'creating minified and prefixed...'
 
+    # prefixed (-s overwrites existing file)
+    prefixr --input ./css/styles.css -s
+
     # copy to .min.css to create a minified version as well
     cp css/styles.css css/styles.min.css
 
     # prefixed and minified (-s overwrites existing file)
     prefixr --input ./css/styles.min.css -s -c
-  fi
+    ;;
-fi
+*)
-
+    echo 'catch-all'
+    ;;
+esac