Move assets to folders

Signed-off-by: Max Steenbergen <max.steenbergen@imtechmarine.com>
maxsteenbergen · Jun 13, 2014 · f1ede28 · f1ede28
1 parent 89e1a54
commit f1ede28
Show file tree

Hide file tree

Showing 20 changed files with 159 additions and 25 deletions.
diff --git a/fibonacci.css → css/fibonacci.css b/fibonacci.css → css/fibonacci.css
diff --git a/reset.css → css/reset.css b/reset.css → css/reset.css
diff --git a/css/screen.css b/css/screen.css
@@ -0,0 +1,142 @@
+body{
+  background-image: -o-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: -moz-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: -webkit-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: -ms-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: linear-gradient(135deg, #1A658D 0%, #6CBFDA 100%);
+  background-attachment: fixed;
+  text-align: center;
+}
+
+h1, h2, span{
+  font-family: Avenir;
+  color: hsla(200,100%,90%,1);
+  text-align: center;
+  font-size: 2.5em;
+  margin-top: 50px;
+}
+h2{
+  font-size: 1.6em;
+  font-weight: normal;
+  margin-top: 0px;
+}
+span{
+  font-size: 1em;
+  margin: 13px;
+}
+
+#codeExportTextarea, #container{
+  width: 800px;
+  height: 600px;
+  position: absolute;
+  left: 50%;
+  margin-left: -400px;
+  top: 150px;
+}
+
+#codeExportTextarea{
+  box-sizing: border-box;
+  resize: none;
+  border: none;
+  background-color: hsla(200,100%,1%,0.4);
+  padding: 50px;
+  font-family: Courier;
+  font-size: 16px;
+  color: hsla(200,100%,90%,1);
+  display: none;
+  outline: none;
+}
+
+#triggerHTMLCode, #triggerCSSCode, #triggerInfo{
+  margin: 0 auto;
+  margin-top: 675px;
+  padding: 0 25px 0 25px;
+  margin-bottom: 10px;
+  opacity: 0.6
+}
+
+#splitControls img{
+  margin: 15px 5px;
+  opacity: 0.7
+}
+
+#optionsModal{
+  box-sizing: border-box;
+  width: 150px;
+  position: absolute;
+  z-index: 99999;
+  border: 1px solid hsla(100, 100%, 100%, 0.6);
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
+  padding: 10px;
+  border-radius: 10px;
+  background-color: hsla(100, 100%, 100%, 0.5);
+  margin: 15px
+}
+
+::-webkit-input-placeholder { color:hsla(200,100%,90%,1); }
+::-moz-placeholder { color:hsla(200,100%,90%,1); } /* firefox 19+ */
+:-ms-input-placeholder { color:hsla(200,100%,90%,1); } /* ie */
+input:-moz-placeholder { color:hsla(200,100%,90%,1); }
+
+#optionsModal input{
+  width: 110px;
+  height: 30px;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  border-bottom: 2px solid hsla(200,100%,90%,1);
+  border-right: 2px solid hsla(200,100%,90%,1);
+  padding-right: 5px;
+  background: none;
+  margin-top: 10px;
+  font-family: Avenir;
+  color: hsla(200,100%,10%,1);
+  font-size: 1em;
+  text-align: right;
+  outline: none;
+}
+
+#optionsModal button{
+  float: right;
+  margin: 5px;
+  font-family: Avenir;
+  font-size: 1.05em;
+  font-weight: bold;
+  color: hsla(200,100%,100%,0.8);
+  text-shadow: 0 -1px hsla(200,100%,0%,0.3);
+  padding: 5px 15px;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  box-shadow: 0 0 0 1px hsla(100,100%,100%,0.2) inset, 0 0 0 1px hsla(200,100%,0%,0.1);
+  border-radius: 5px;
+  background-image: -o-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: -moz-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: -webkit-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: -ms-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
+  background-image: linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
+}
+
+section{
+  outline: 1px solid hsla(200,100%,90%,0.2);
+  background-color: hsla(200,100%,1%,0.1);
+}
+
+footer{
+  box-sizing: border-box;
+  text-align: center;
+  margin-top: 50px;
+  width: 100%;
+  height: 40px;
+  padding: 15px;
+  background-color: hsla(200,100%,90%,0.3);
+  outline: 1px solid hsla(200,100%,90%,0.6);
+  font-family: Avenir;
+  color: hsla(200,100%,100%,0.8);
+}
+
+footer a{
+  font-weight: bold;
+  color: hsla(200,100%,100%,1);
+  text-decoration: none;
+}
diff --git a/CSSFile.png → img/CSSFile.png b/CSSFile.png → img/CSSFile.png
diff --git a/HTMLFile.png → img/HTMLFile.png b/HTMLFile.png → img/HTMLFile.png
diff --git a/addhorizontal.png → img/addhorizontal.png b/addhorizontal.png → img/addhorizontal.png
diff --git a/addvertical.png → img/addvertical.png b/addvertical.png → img/addvertical.png
diff --git a/expand.png → img/expand.png b/expand.png → img/expand.png
diff --git a/info.png → img/info.png b/info.png → img/info.png
diff --git a/options.png → img/options.png b/options.png → img/options.png
diff --git a/remove.png → img/remove.png b/remove.png → img/remove.png
diff --git a/shrink.png → img/shrink.png b/shrink.png → img/shrink.png
diff --git a/splithorizontal.png → img/splithorizontal.png b/splithorizontal.png → img/splithorizontal.png
diff --git a/splitvertical.png → img/splitvertical.png b/splitvertical.png → img/splitvertical.png
diff --git a/trash.png → img/trash.png b/trash.png → img/trash.png
diff --git a/index.html b/index.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" type="text/css" href="reset.css">
-  <link rel="stylesheet" type="text/css" href="screen.css">
-  <link rel="stylesheet" type="text/css" href="fibonacci.css">
+  <link rel="stylesheet" type="text/css" href="css/reset.css">
+  <link rel="stylesheet" type="text/css" href="css/screen.css">
+  <link rel="stylesheet" type="text/css" href="css/fibonacci.css">
 </head>
 <body>
   <h1>Fibonacci</h1>
   <h2>Flexbox Composer</h2>
   <section id='container'></section>
   <textarea name="fb_export" id='codeExportTextarea' readonly></textarea>
-  <img id="triggerHTMLCode" src="HTMLFile.png" alt="Export HTML">
-  <img id="triggerCSSCode" src="CSSFile.png" alt="Export CSS">
-  <img id="triggerInfo" src="info.png" alt="Export CSS">
+  <img id="triggerHTMLCode" src="img/HTMLFile.png" alt="Export HTML">
+  <img id="triggerCSSCode" src="img/CSSFile.png" alt="Export CSS">
+  <img id="triggerInfo" src="img/info.png" alt="Export CSS">
   <br>
   <span>Export HTML</span>
   <span>Export CSS</span>
@@ -22,7 +22,7 @@ <h2>Flexbox Composer</h2>
     A project by <a href='http://maxsteenbergen.com'>Max Steenbergen</a>
   </footer>
 
-  <script type="text/javascript" src="jquery.js"></script>
-  <script src="fibonacci.js" type="text/javascript"></script>
+  <script src="js/jquery.js" type="text/javascript" ></script>
+  <script src="js/fibonacci.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/fibonacci.js → js/fibonacci.js b/fibonacci.js → js/fibonacci.js
@@ -23,7 +23,7 @@ $(document).ready( function(){
     else {
       $( 'img' ).css( 'opacity', 0.6)
       $(this).css( 'opacity', 1)
-      $.get( 'fibonacci.css' ).then(function(cssCode, status, xhr){
+      $.get( 'css/fibonacci.css' ).then(function(cssCode, status, xhr){
         var overrides = ''
         for (var i = Object.keys(CSSOverrides).length - 1; i >= 0; i--) {
           overrides += '#' + Object.keys(CSSOverrides)[i] + '{ ' + CSSOverrides[Object.keys(CSSOverrides)[i]] + '}\n'
@@ -58,17 +58,17 @@ $(document).ready( function(){
     var parent = $(srcSection).parent()
     if( $( '#splitControls' ).length == 0 && $( '#optionsModal' ).length == 0){
       $( srcSection ).append( '<div id="splitControls">' )
-      $( '#splitControls' ).append( '<img id="splitVerticalIcon" data-layout-action="splitvertical" src="splitvertical.png" alt="Split vertically">' )
-      $( '#splitControls' ).append( '<img id="splitHorizontalIcon" data-layout-action="splithorizontal" src="splithorizontal.png" alt="Split horizontally" title="Split horizontally">' )
+      $( '#splitControls' ).append( '<img id="splitVerticalIcon" data-layout-action="splitvertical" src="img/splitvertical.png" alt="Split vertically">' )
+      $( '#splitControls' ).append( '<img id="splitHorizontalIcon" data-layout-action="splithorizontal" src="img/splithorizontal.png" alt="Split horizontally" title="Split horizontally">' )
 
       if( parent.hasClass( 'columnParent' ))
-        $( '#splitControls' ).append( '<img id="addHorizontalIcon" data-layout-action="addhorizontal" src="addhorizontal.png" alt="Add horizontal sibling" title="Add horizontal sibling">' )
+        $( '#splitControls' ).append( '<img id="addHorizontalIcon" data-layout-action="addhorizontal" src="img/addhorizontal.png" alt="Add horizontal sibling" title="Add horizontal sibling">' )
 
       if( parent.hasClass( 'rowParent' ))
-        $( '#splitControls' ).append( '<img id="addVerticalIcon" data-layout-action="addvertical" src="addvertical.png" alt="Add vertical sibling" title="Add vertical sibling">' )
+        $( '#splitControls' ).append( '<img id="addVerticalIcon" data-layout-action="addvertical" src="img/addvertical.png" alt="Add vertical sibling" title="Add vertical sibling">' )
 
       if ( srcSection.id != 'container' )
-        $( '#splitControls' ).append( '<img id="addHorizontalIcon" data-layout-action="options" src="options.png" alt="More options" title="More options">' )
+        $( '#splitControls' ).append( '<img id="addHorizontalIcon" data-layout-action="options" src="img/options.png" alt="More options" title="More options">' )
 
     }
   }
@@ -145,9 +145,9 @@ $(document).ready( function(){
       var parentDimension = grandParent.parent().hasClass( 'columnParent' ) ? 'height' : 'width'
 
 
-      $( '#optionsModal' ).append( '<img src="expand.png" id="growSectionButton" alt="Expand section" title="Expand section"></img>')
-                          .append( '<img src="shrink.png" id="shrinkSectionButton" alt="Shrink section" title="Shrink section"></img>')
-                          .append( '<img id="removeSectionButton" src="trash.png" alt="Delete section" title="Delete section"></img><br>' )
+      $( '#optionsModal' ).append( '<img src="img/expand.png" id="growSectionButton" alt="Expand section" title="Expand section"></img>')
+                          .append( '<img src="img/shrink.png" id="shrinkSectionButton" alt="Shrink section" title="Shrink section"></img>')
+                          .append( '<img id="removeSectionButton" src="img/trash.png" alt="Delete section" title="Delete section"></img><br>' )
                           .append( '<input id="dimensionSizeInput" type="text" placeholder="Fixed ' + dimension + '"><br>' )
                           .append( '<button id="enterDimensionButton">Enter</button><br>')
 

diff --git a/jquery.js → js/jquery.js b/jquery.js → js/jquery.js
diff --git a/screen.css b/screen.css
@@ -63,7 +63,6 @@ span{
 #optionsModal{
   box-sizing: border-box;
   width: 150px;
-  //height: 240px;
   position: absolute;
   z-index: 99999;
   border: 1px solid hsla(100, 100%, 100%, 0.6);

diff --git a/velocity.js b/velocity.js