utena frame?
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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 />
|
||||||
|
|||||||
Reference in New Issue
Block a user