basis for the state machine and some UI improvements (currently disabled)

1 files changed, 58 insertions, 0 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 7172ef8..cfb9286 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -38,6 +38,16 @@ body {
     border: 0;
 }
 
+/**** animations *****/
+.transition{
+    -moz-transition: all 1s ease;
+    -webkit-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    transition: all 1s ease;
+}
+
+
 /***** responsiveness *****/
 /* lg */
 @media (min-width: 1200px) {
@@ -49,6 +59,30 @@ body {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
+
+    .block-focus {
+        overflow: auto;
+        min-height: 100%; height: 100%;
+        min-width: 34%; width: 34%;
+    }
+
+    .block-less-height{/*these names were made for the 'md' variant but need to be the same here for the javascript code to resize them when the focus changes*/
+        overflow: auto;
+        min-height: 100%; height: 100%;
+        min-width: 22%; width: 22%;
+    }
+
+    .block-less-width{/*these names were made for the 'md' variant but need to be the same here for the javascript code to resize them when the focus changes*/
+        overflow: auto;
+        min-height: 100%; height: 100%;
+        min-width: 22%; width: 22%;
+    }
+
+    .block-less-everything{/*these names were made for the 'md' variant but need to be the same here for the javascript code to resize them when the focus changes*/
+        overflow: auto;
+        min-height: 100%; height: 100%;
+        min-width: 22%; width: 22%;
+    }
 }
 
 /* md */
@@ -61,6 +95,30 @@ body {
         overflow: auto;
         min-height: 50%; height: 50%;
     }
+
+    .block-focus {
+        overflow: auto;
+        min-height: 60%; height: 60%;
+        min-width: 60%; width: 60%;
+    }
+
+    .block-less-height{
+        overflow: auto;
+        min-height: 40%; height: 40%;
+        min-width: 60%; width: 60%;
+    }
+
+    .block-less-width{
+        overflow: auto;
+        min-height: 60%; height: 60%;
+        min-width: 40%; width: 40%;
+    }
+
+    .block-less-everything{
+        overflow: auto;
+        min-height: 40%; height: 40%;
+        min-width: 40%; width: 40%;
+    }
 }
 
 /* sm */