From a6279e5c21406c8af7c86fbd187e7e6d2f98ddc2 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 4 Feb 2026 17:21:16 +0000
Subject: [PATCH] utena frame?

---
 .../vue/src/components/borders/UtenaFrame.vue | 33 +++++++++++--------
 nginx/vue/src/views/Home.vue                  | 30 +++++++++--------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/nginx/vue/src/components/borders/UtenaFrame.vue b/nginx/vue/src/components/borders/UtenaFrame.vue
index ff06735..7854a40 100644
--- a/nginx/vue/src/components/borders/UtenaFrame.vue
+++ b/nginx/vue/src/components/borders/UtenaFrame.vue
@@ -1,34 +1,41 @@
 <template>
-    <img src="/img/borders/utena.png" class="flower tl antirotate" />
-    <img src="/img/borders/utena.png" class="flower tr rotate" />
-    <img src="/img/borders/utena.png" class="flower bl rotate" />
-    <img src="/img/borders/utena.png" class="flower br antirotate" />
-    <slot />
+    <div class="container">
+        <img src="/img/borders/utena.png" class="flower tl antirotate" />
+        <img src="/img/borders/utena.png" class="flower tr rotate" />
+        <img src="/img/borders/utena.png" class="flower bl rotate" />
+        <img src="/img/borders/utena.png" class="flower br antirotate" />
+        <slot />
+    </div>
 </template>
 
 <style scoped>
+.container {
+    position: relative;
+    margin: 100px;
+}
+
 .flower {
     position: absolute;
     width: 150px;
 }
 .tl {
-    top: 100px;
-    left: 0px;
+    top: -80px;
+    left: -80px;
     --start: 0deg;
 }
 .tr {
-    top: 100px;
-    right: 0;
+    top: -80px;
+    right: -80px;
     --start: 90deg;
 }
 .bl {
-    bottom: -100px;
-    left: 0;
+    bottom: -80px;
+    left: -80px;
     --start: 180deg;
 }
 .br {
-    bottom: -100px;
-    right: 0;
+    bottom: -80px;
+    right: -80px;
     --start: 270deg;
 }
 .rotate {
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index 4b1c199..04370a3 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -13,24 +13,28 @@ import Collage from "@/components/home/Collage.vue";
 import Favorites from "@/components/home/Favorites.vue";
 import Gym from "@/components/home/Gym.vue";
 import Consumption from "@/components/home/Consumption.vue";
+
+import UtenaFrame from "@/components/borders/UtenaFrame.vue";
 </script>
 
 <template>
-    <main class="halftone justify-center flex flex-row w-full h-full p-10">
+    <main class="halftone justify-center flex flex-row w-full h-full">
         <div class="a4height flex flex-row">
-            <div class="a4page-portrait bdr-1 homeGrid relative">
-                <Intro class="intro" />
-                <Listening class="listening" />
-                <Stamps class="stamps" />
-                <Feed class="feed" />
-                <Links class="links" />
-                <Collage class="collage" />
-                <Consumption class="consumption" />
-                <Favorites class="favorites" />
-                <Gym class="gym" />
-            </div>
+            <UtenaFrame class="w-fit h-fit">
+                <div class="a4page-portrait homeGrid relative">
+                    <Intro class="intro" />
+                    <Listening class="listening" />
+                    <Stamps class="stamps" />
+                    <Feed class="feed" />
+                    <Links class="links" />
+                    <Collage class="collage" />
+                    <Consumption class="consumption" />
+                    <Favorites class="favorites" />
+                    <Gym class="gym" />
+                </div>
+            </UtenaFrame>
             <div
-                class="flex flex-col sidebar border-primary place-content-between h-full sticky m-10 w-60"
+                class="flex flex-col sidebar border-primary place-content-between h-full sticky mt-34 w-60"
             >
                 <div class="flex flex-col">
                     <Time />