A lot of AI slop

frontend/app/components/Container.vue

@@ -1,64 +1,140 @@
+<script setup lang="ts">
+</script>
+
 <template>
-  <div class="card">
-
-  <span class="corner tl"></span>
-  <span class="corner tr"></span>
-  <span class="corner bl"></span>
-  <span class="corner br"></span>
-
-    <slot />
+  <div class="tui-frame">
+    <span class="frame-corner tui-corner-tl"></span>
+    <span class="frame-line frame-line-top" aria-hidden="true">═══════════════════</span>
+    <span class="frame-corner frame-corner-tr"></span>
+    
+    <div class="tui-inner">
+      <slot />
+    </div>
+    
+    <span class="frame-line frame-line-bottom" aria-hidden="true">═══════════════════</span>
+    <span class="frame-corner frame-corner-bl"></span>
+    <span class="frame-corner frame-corner-br"></span>
   </div>
 </template>
 
 <style lang="scss" scoped>
-$separation: 2px;
-
-.card{
+.tui-frame {
   position: relative;
   margin: 15px;
   background: var(--color-background-fore);
+}
+
+.tui-inner {
   padding: 8px 24px;
   color: white;
-  border: 1px solid var(--color-border-color);
-  box-shadow: 8px -8px 0px 0px var(--color-container-shadow);
+  position: relative;
+  z-index: 1;
 }
 
-.corner{
+.frame-corner {
   position: absolute;
-  width: 22px;
-  height: 22px;
-  border-color: #cfcfcf;
+  width: 24px;
+  height: 24px;
+  font-family: 'Hurmit', monospace;
+  color: var(--color-border-color);
+  font-size: 0;
+  line-height: 0;
 }
 
-/* Top Left */
-.tl{
-  top: -$separation;
-  left: -$separation;
-  border-top:2px solid;
-  border-left:2px solid;
+.tui-corner-tl,
+.frame-corner-tr {
+  top: -2px;
 }
 
-/* Top Right */
-.tr{
-  top: -$separation;
-  right: -$separation;
-  border-top:2px solid;
-  border-right:2px solid;
+.frame-corner-bl,
+.frame-corner-br {
+  bottom: -2px;
 }
 
-/* Bottom Left */
-.bl{
-  bottom: -$separation;
-  left: -$separation;
-  border-bottom:2px solid;
-  border-left:2px solid;
+.frame-corner-tl {
+  left: -2px;
+  &::before {
+    content: "╔";
+  }
 }
 
-/* Bottom Right */
-.br{
-  bottom: -$separation;
-  right: -$separation;
-  border-bottom:2px solid;
-  border-right:2px solid;
+.frame-corner-tr {
+  right: -2px;
+  &::before {
+    content: "╗";
+  }
+}
+
+.frame-corner-bl {
+  left: -2px;
+  &::before {
+    content: "╚";
+  }
+}
+
+.frame-corner-br {
+  right: -2px;
+  &::before {
+    content: "╝";
+  }
+}
+
+.frame-line {
+  position: absolute;
+  left: 24px;
+  right: 24px;
+  color: var(--color-border-color);
+  font-family: 'Hurmit', monospace;
+  font-size: 0;
+  line-height: 0;
+  white-space: nowrap;
+}
+
+.frame-line-top {
+  top: -2px;
+  &::before {
+    content: "═══════════════════";
+  }
+}
+
+.frame-line-bottom {
+  bottom: -2px;
+  &::before {
+    content: "═══════════════════";
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .frame-corner,
+  .frame-line {
+    display: none;
+  }
+  
+  .tui-frame {
+    &::before,
+    &::after {
+      content: "═══════════════════";
+      position: absolute;
+      left: 0;
+      right: 0;
+      color: var(--color-border-color);
+      font-family: 'Hurmit', monospace;
+      font-size: 8px;
+      line-height: 1;
+      white-space: nowrap;
+    }
+    
+    &::before {
+      top: -2px;
+    }
+    
+    &::after {
+      bottom: -2px;
+    }
+  }
+  
+  .tui-inner {
+    padding: 8px 16px;
+  }
 }
 </style>