utena frame?

This commit is contained in:
2026-02-04 17:21:16 +00:00
parent dd11f198a2
commit a6279e5c21
2 changed files with 37 additions and 26 deletions

View File

@@ -1,34 +1,41 @@
<template> <template>
<div class="container">
<img src="/img/borders/utena.png" class="flower tl antirotate" /> <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 tr rotate" />
<img src="/img/borders/utena.png" class="flower bl rotate" /> <img src="/img/borders/utena.png" class="flower bl rotate" />
<img src="/img/borders/utena.png" class="flower br antirotate" /> <img src="/img/borders/utena.png" class="flower br antirotate" />
<slot /> <slot />
</div>
</template> </template>
<style scoped> <style scoped>
.container {
position: relative;
margin: 100px;
}
.flower { .flower {
position: absolute; position: absolute;
width: 150px; width: 150px;
} }
.tl { .tl {
top: 100px; top: -80px;
left: 0px; left: -80px;
--start: 0deg; --start: 0deg;
} }
.tr { .tr {
top: 100px; top: -80px;
right: 0; right: -80px;
--start: 90deg; --start: 90deg;
} }
.bl { .bl {
bottom: -100px; bottom: -80px;
left: 0; left: -80px;
--start: 180deg; --start: 180deg;
} }
.br { .br {
bottom: -100px; bottom: -80px;
right: 0; right: -80px;
--start: 270deg; --start: 270deg;
} }
.rotate { .rotate {

View File

@@ -13,12 +13,15 @@ import Collage from "@/components/home/Collage.vue";
import Favorites from "@/components/home/Favorites.vue"; import Favorites from "@/components/home/Favorites.vue";
import Gym from "@/components/home/Gym.vue"; import Gym from "@/components/home/Gym.vue";
import Consumption from "@/components/home/Consumption.vue"; import Consumption from "@/components/home/Consumption.vue";
import UtenaFrame from "@/components/borders/UtenaFrame.vue";
</script> </script>
<template> <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="a4height flex flex-row">
<div class="a4page-portrait bdr-1 homeGrid relative"> <UtenaFrame class="w-fit h-fit">
<div class="a4page-portrait homeGrid relative">
<Intro class="intro" /> <Intro class="intro" />
<Listening class="listening" /> <Listening class="listening" />
<Stamps class="stamps" /> <Stamps class="stamps" />
@@ -29,8 +32,9 @@ import Consumption from "@/components/home/Consumption.vue";
<Favorites class="favorites" /> <Favorites class="favorites" />
<Gym class="gym" /> <Gym class="gym" />
</div> </div>
</UtenaFrame>
<div <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"> <div class="flex flex-col">
<Time /> <Time />