summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/codeq.css146
1 files changed, 120 insertions, 26 deletions
diff --git a/css/codeq.css b/css/codeq.css
index 85a3d8d..67af384 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -139,11 +139,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 {
@@ -154,82 +154,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%;
}