added css for different layouts

1 files changed, 120 insertions, 26 deletions

diff --git a/css/codeq.css b/css/codeq.css
index d457089..27815d7 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -159,11 +159,11 @@ body {
 
 /**** animations *****/
 .transition, .quadrants > * > .block {
-    -moz-transition: all 1s ease;
+    /*-moz-transition: all 1s ease;
     -webkit-transition: all 1s ease;
     -o-transition: all 1s ease;
     -ms-transition: all 1s ease;
-    transition: all 1s ease;
+    transition: all 1s ease;*/
 }
 
 .block > .scrollable-content-container {
@@ -174,82 +174,176 @@ body {
 /***** responsiveness *****/
 /* lg */
 @media (min-width: 1200px) {
-    html, body, #gui, #block-row {
+    /*html, body, #gui, #block-row {
         height: 100%;
-    }
+    }*/
 
     /* default for all quadrants (no focus anywhere) */
-    .quadrants > * > .block {
+    /*.quadrants > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
-    }
+    }*/
 
     /* code_editor */
-    #screen_prolog .block.block2 {
+    /*#screen_prolog .block.block2 {
         min-height: 100%; height: 100%;
-    }
+    }*/
 
     /* console */
-    #screen_prolog .block.block3 {
+    /*#screen_prolog .block.block3 {
         min-height: 100%; height: 100%;
-    }
+    }*/
 
     /* code_editor */
-    #screen_python .block.block2 {
+    /*#screen_python .block.block2 {
         min-height: 100%; height: 100%;
-    }
+    }*/
 
     /* console */
-    #screen_python .block.block3 {
+    /*#screen_python .block.block3 {
         min-height: 100%; height: 100%;
-    }
+    }*/
 }
 
 /* md */
 @media (min-width: 992px) and (max-width: 1199px) {
-    html, body, #gui, #block-row {
+    /*html, body, #gui, #block-row {
         height: 100%;
-    }
+    }*/
 
     /* default for all quadrants (no focus anywhere) */
-    .quadrants > * > .block {
+    /*.quadrants > * > .block {
+        overflow: auto;
+        min-height: 50%; height: 50%;
+    }*/
+
+    /*.quadrants#screen_prolog > * > .block {
+        overflow: auto;
+        min-height: 100%; height: 100%;
+    }*/
+
+    /* code_editor */
+    /*#screen_prolog .block.block2 {
+        min-height: 50%; height: 50%;
+    }*/
+
+    /* console */
+    /*#screen_prolog .block.block3 {
+        min-height: 50%; height: 50%;
+    }*/
+
+    /*.quadrants#screen_python > * > .block {
+        overflow: auto;
+        min-height: 100%; height: 100%;
+    }*/
+
+    /* code_editor */
+    /*#screen_python .block.block2 {
+        min-height: 50%; height: 50%;
+    }*/
+
+    /* console */
+    /*#screen_python .block.block3 {
+        min-height: 50%; height: 50%;
+    }*/
+}
+
+/* md & ld */
+@media (min-width: 992px) {
+
+    /* BEGIN layouts */
+    /*~~ line-layout ~~*/
+    .quadrants.line-layout > * > .block {
+        overflow: auto;
+        min-height: 100%; height: 100%;
+    }
+
+    /* code_editor */
+    .line-layout#screen_prolog .block.block2 {
+        min-height: 100%; height: 100%;
+        min-width: 50%; width: 50%;
+    }
+
+    /* console */
+    .line-layout#screen_prolog .block.block3 {
+        min-height: 100%; height: 100%;
+        min-width: 50%; width: 50%;
+    }
+
+    /* code_editor */
+    .line-layout#screen_python .block.block2 {
+        min-height: 100%; height: 100%;
+        min-width: 50%; width: 50%;
+    }
+
+    /* console */
+    .line-layout#screen_python .block.block3 {
+        min-height: 100%; height: 100%;
+        min-width: 50%; width: 50%;
+    }
+
+
+    /*~~ square-layout ~~*/
+    .quadrants.square-layout > * > .block:not(.block-left):not(.block-right) {/*the not-s are important here, because else the height of the surrounding divs will be set to 50% and the entire page will only be for half the screen*/
         overflow: auto;
         min-height: 50%; height: 50%;
     }
 
-    .quadrants#screen_prolog > * > .block {
+    .quadrants.square-layout#screen_prolog > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
 
+    /* instructions+hints */
+    .square-layout#screen_prolog .block-left {
+        min-width: 33%; width: 33%;
+    }
+    /* code_editor + console */
+    .square-layout#screen_prolog .block-right {
+        min-width: 67%; width: 67%;
+    }
+
     /* code_editor */
-    #screen_prolog .block.block2 {
+    .square-layout#screen_prolog .block.block2 {
         min-height: 50%; height: 50%;
+        min-width: 100%; width: 100%;
     }
 
     /* console */
-    #screen_prolog .block.block3 {
+    .square-layout#screen_prolog .block.block3 {
         min-height: 50%; height: 50%;
+        min-width: 100%; width: 100%;
     }
 
-    .quadrants#screen_python > * > .block {
+    .quadrants.square-layout#screen_python.prof2 > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
 
+    /* instructions+hints */
+    .square-layout#screen_python .block-left {
+        min-width: 33%; width: 33%;
+    }
+    /* code_editor + console */
+    .square-layout#screen_python .block-right {
+        min-width: 67%; width: 67%;
+    }
+
     /* code_editor */
-    #screen_python .block.block2 {
+    .square-layout#screen_python .block.block2 {
         min-height: 50%; height: 50%;
+        min-width: 100%; width: 100%;
     }
 
     /* console */
-    #screen_python .block.block3 {
+    .square-layout#screen_python .block.block3 {
         min-height: 50%; height: 50%;
+        min-width: 100%; width: 100%;
     }
-}
+    /* END layouts */
+
+
 
-/* md & ld */
-@media (min-width: 992px) {
     .block-left, .block-right {
         min-height: 100%; height: 100%;
     }