diff options
| -rw-r--r-- | css/codeq.css | 146 |
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%; } |