update responsive design

2023-06-25 17:00:16 +02:00
parent db41b03456
commit fdf96948a5
31 changed files with 879 additions and 603 deletions
@@ -0,0 +1,53 @@
+<template>
+	<div class="rewards-wrapper">
+		<div class="rewards-header">
+			<div class="rewards-header-title">
+				{{ props.title }}
+			</div>
+			<div class="rewards-header-info">{{ props.info }}</div>
+		</div>
+		<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
+			<div class="rewards-body">
+				<div class="rewards-coin">$BLOOD</div>
+				<div class="rewards-amount">0</div>
+			</div>
+			<img class="bloodline-token" :src="props.image" alt="vampir" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	title: String,
+	info: String,
+	image: String,
+});
+</script>
+
+<style lang="sass">
+.rewards-header
+    font-size: 16px
+    padding: 8px
+    display: flex
+    @media (min-width: 992px)
+        font-size: 24px
+    .rewards-header-info
+        margin-left: auto
+.rewards-sacrifice-wrapper, .rewards-clan-wrapper
+    display: flex
+    .rewards-body
+        align-self: center
+        .rewards-coin
+            font-size: 16px
+            @media (min-width: 992px)
+                font-size: 24px
+        .rewards-amount
+            font-size: 24px
+            margin-top: 8px
+            @media (min-width: 992px)
+                font-size: 40px
+                margin-top: 0
+    img
+        margin-left: auto
+        align-self: center
+</style>