Previous prompt
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index 55921b3..54ddd0b 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -23,25 +23,23 @@ tags:
{% block body %}
{{ header.status(hippie, new) }}
-
-
-
+
+
{% endblock %}
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index ff3aab8..dc99b1c 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -4,41 +4,8 @@
}
}
-#cli {
- @extend %flex-column;
-
- background-color: black;
-
- #line {
- @extend %flex-row;
- }
-
- #prompt {
- flex: 1;
- }
-
- pre {
- margin: .5em 0;
- color: white;
- }
-
- textarea {
- resize: none;
- max-height: 128px;
- margin: $margin_io;
- border: 0;
- padding: $space_half;
- // color: $color_text_io;
- color: white;
- // background-color: $color_back_io;
- background-color: transparent;
- line-height: 1.2;
- }
-}
-
.body_frame {
@extend %flex-column;
- @extend .body_ui;
background-color: $color_back_basic;
@@ -88,6 +55,46 @@
}
}
+.body_cli {
+ @extend .body_frame;
+
+ background-color: black;
+}
+
+#cli {
+ @extend %flex-column;
+
+ background-color: black;
+
+ #line {
+ @extend %flex-row;
+ }
+
+ #prompt {
+ flex: 1;
+ }
+
+ pre {
+ margin: .5em 0;
+ color: white;
+ }
+
+ textarea {
+ resize: none;
+ max-height: 128px;
+ margin: $margin_io;
+ border: 0;
+ padding: $space_half;
+ // color: $color_text_io;
+ color: white;
+ // background-color: $color_back_io;
+ background-color: transparent;
+ line-height: 1.2;
+ }
+}
+
+
+
#content {
background-color: $color_back_io;
@@ -112,6 +119,8 @@
}
}
+
+
.io {
.spacer {
margin: 0;
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index db795cd..42946e2 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -2,23 +2,11 @@ $module_top_height: 32px;
$body_top_space: $module_top_height + $space_basic;
.body_new {
- @extend .body_ui;
-
+ @extend %flex-column;
padding: $body_top_space $space_basic $space_basic;
}
-#frame {
- display: grid;
- height: 100%;
- // margin: $space_basic;
- // grid-template-columns: repeat(3, 1fr);
- grid-template-rows: auto 1fr;
- gap: $space_basic;
-}
-
.area {
- width: 100%;
- height: 100%;
transition: $transition_best;
&:hover {
@@ -26,15 +14,9 @@ $body_top_space: $module_top_height + $space_basic;
}
}
-.menu,
-#top {
- nav ul {
- margin: 0;
- }
-}
-
.grid {
display: grid;
+ flex: 1;
// grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a";
@@ -92,7 +74,7 @@ $body_top_space: $module_top_height + $space_basic;
nav ul {
display: flex;
- margin-left: 16px;
+ margin: 0 0 0 16px;
}
.brand {