Merge branch 'master' of https://github.com/williamngan/kubist into g…

…h-pages
williamngan · Apr 19, 2015 · d4a4bd3 · d4a4bd3
2 parents 1422994 + 3cbd957
commit d4a4bd3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/css/style.css b/css/style.css
@@ -75,17 +75,15 @@ h1 {
 #menu {
   position: absolute;
   top: 0;
-  right: -350px;
+  right: -340px;
   width: 320px;
   bottom: 0;
   background-color: #fff;
   border-left: 1px solid #eceff6;
   padding: 10px;
-  transition: right .5s, opacity .3s;
-  opacity: 0; }
+  transition: right .5s; }
   #menu.open {
-    right: 0;
-    opacity: 1; }
+    right: 0; }
   #menu p {
     padding: 0px 10px 5px 20px; }
     #menu p label {
@@ -102,10 +100,13 @@ h1 {
         #menu p label.checkbox > * {
           display: inline-block;
           vertical-align: middle; }
+        #menu p label.checkbox:last-child {
+          line-height: 1; }
       #menu p label.sub {
         margin-bottom: 15px; }
       #menu p label.fileinput {
-        margin-top: 15px; }
+        margin-top: 15px;
+        margin-left: 120px; }
       #menu p label.hint {
         color: #bbb; }
       #menu p label.action {
@@ -138,20 +139,23 @@ h1 {
 #imageOnlyControl {
   display: none; }
 
-#info {
+#info, #download {
   position: absolute;
   bottom: 20px;
   left: 20px;
   font-size: 11px;
   color: #667788; }
-  #info > a {
+  #info > a, #download > a {
     color: #667788;
     text-decoration: none;
     opacity: .65; }
-    #info > a:hover {
+    #info > a:hover, #download > a:hover {
       color: #00a3f1;
       opacity: 1; }
 
+#download {
+  left: -110px; }
+
 #close {
   position: fixed;
   right: 5px;

diff --git a/css/style.scss b/css/style.scss
@@ -92,16 +92,15 @@ h1 {
 
 #menu {
   position: absolute;
-  top: 0; right: -350px; width: 320px; bottom: 0;
+  top: 0; right: -340px; width: 320px; bottom: 0;
   background-color: #fff;
   border-left: 1px solid darken($bg, 2);
   padding: 10px;
-  transition: right .5s, opacity .3s;
-  opacity: 0;
+  transition: right .5s;
+
 
   &.open {
     right: 0;
-    opacity: 1;
   }
 
   p {
@@ -119,10 +118,12 @@ h1 {
         &:hover { color: $link;}
         line-height: 30px;
         > * { display: inline-block; vertical-align: middle;}
+
+        &:last-child { line-height: 1; }
       }
 
       &.sub { margin-bottom: 15px;}
-      &.fileinput { margin-top: 15px;}
+      &.fileinput { margin-top: 15px; margin-left: 120px;}
       &.hint { color: #bbb;}
 
       &.action {
@@ -169,7 +170,7 @@ h1 {
   display: none;
 }
 
-#info {
+#info, #download {
   position: absolute;
   bottom: 20px;
   left: 20px;
@@ -187,6 +188,10 @@ h1 {
   }
 }
 
+#download {
+  left: -110px;
+}
+
 #close {
   position: fixed;
   right: 5px; top: 0px;

diff --git a/index.html b/index.html
@@ -26,19 +26,19 @@
 		<a href="https://twitter.com/williamngan" target="_blank">How it works</a>
 	</div>
 
+
+
 	<div id="menu" class="open">
 		<h1 id="header">Kubist</h1>
 
 
 		<hr />
 
 		<p>
-			<label class="sub">Select an image</label><label>&nbsp;</label>
-
-			<label class="action" onclick="loadImage(this)" data-id="mao.jpg">A guy</label>
-			<label class="action" onclick="loadImage(this)" data-id="bauhaus.jpg">A dance</label>
-			<label class="action" onclick="loadImage(this)" data-id="bay.jpg">A view</label>
-			<label class="hint">Your own image...</label>
+			<label>Select an image</label><label class="action" onclick="loadImage(this)" data-id="mao.jpg">A guy</label>
+			<label>&nbsp;</label><label class="action" onclick="loadImage(this)" data-id="bauhaus.jpg">A dance</label>
+			<label>&nbsp;</label><label class="action" onclick="loadImage(this)" data-id="bay.jpg">A view</label>
+			<label>&nbsp;</label><label class="hint">Your own image...</label>
 
 			<label class="fileinput">
 				<input type="file" id="fileInput" />
@@ -77,12 +77,13 @@ <h1 id="header">Kubist</h1>
 
 
 		<hr />
-		<p><label class="action" onclick="downloadSVG()">Download SVG file</label></p>
 		<p>
 			<img id="preview" alt="" />
 			<div id="canvas"></div>
 		</p>
 
+		<div id="download"><a href="#" onclick="downloadSVG()">Download SVG file</a></div>
+
 	</div>
 
 	<div id="close" onclick="menuToggle()">&times;</div>