feat: Restructure styles for cli and new pages

- Remove header from cli
- Add body_cli class
- Remove unnecessary frame element

source/screens/demo/examples/ui/cli.njk

@@ -4,7 +4,7 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set bodyClass = "body_frame" %}
+{% set bodyClass = "body_cli" %}
 
 {% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_io.njk" as io %}
@@ -23,7 +23,6 @@ tags:
 {% endblock %}
 
 {% block body %}
-	{{ io.frameHeader('title-bar') }}
 	<div id="cli">
 		<div id="history">
 			<pre>Previous prompt</pre>

source/screens/demo/examples/ui/new.njk

@@ -23,25 +23,23 @@ tags:
 
 {% block body %}
   {{ header.status(hippie, new) }}
-  <div id="frame">
+  <header class="area menu io">
-    <header class="area menu io">
+    <nav>
-      <nav>
+      <ul>
-        <ul>
+        <li>
-          <li>
+          <a href="" class="a_button">Func 1</a>
-            <a href="" class="a_button">Func 1</a>
+        </li>
-          </li>
+        <li>
-          <li>
+          <a href="" class="a_button">Func 2</a>
-            <a href="" class="a_button">Func 2</a>
+        </li>
-          </li>
+      </ul>
-        </ul>
+    </nav>
-      </nav>
+  </header>
-    </header>
+  <div class="area grid">
-    <div class="area grid">
+    <div class="item">1</div>
-      <div class="item">1</div>
+    <div class="item">2</div>
-      <div class="item">2</div>
+    <div class="item">3</div>
-      <div class="item">3</div>
+    <div class="item">4</div>
-      <div class="item">4</div>
-    </div>
   </div>
 {% endblock %}
 

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;

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 {