aranroig.com/frontend/app/components/Container.vue

<script setup lang="ts">
</script>

<template>
  <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>
.tui-frame {
  position: relative;
  margin: 15px;
  background: var(--color-background-fore);
}

.tui-inner {
  padding: 8px 24px;
  color: white;
  position: relative;
  z-index: 1;
}

.frame-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  font-family: 'Hurmit', monospace;
  color: var(--color-border-color);
  font-size: 0;
  line-height: 0;
}

.tui-corner-tl,
.frame-corner-tr {
  top: -2px;
}

.frame-corner-bl,
.frame-corner-br {
  bottom: -2px;
}

.frame-corner-tl {
  left: -2px;
  &::before {
    content: "╔";
  }
}

.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>