Improved bio styling and fixed penis sizes.

components/actors/bio.vue

@@ -197,20 +197,20 @@
 
 				<span>
 					<Icon
-						v-if="actor.circumcised"
+						v-if="actor.isCircumcised"
 						:title="'Circumcised'"
-						icon="page-break"
+						icon="pagebreak"
 						class="circumcised"
 					/>
 
-					<template v-if="actor.penisLengthMetric && actor.penisGirthMetric">
-						<span>{{ actor.penisLengthMetric }} * {{ actor.penisGirthMetric }} cm</span>
-						<span class="bio-segment">{{ actor.penisLengthImperial }}" * {{ actor.penisGirthImperial }}"</span>
+					<template v-if="actor.penisLength && actor.penisGirth">
+						<span>{{ actor.penisLength.imperial }}" × {{ actor.penisLength.imperial }}"</span>
+						<span class="bio-segment">{{ actor.penisLength.metric }} × {{ actor.penisGirth.metric }} cm</span>
 					</template>
 
-					<template v-else-if="actor.penisLengthMetric">
-						<span>{{ actor.penisLengthMetric }} cm</span>
-						<span class="bio-segment">{{ actor.penisLengthImperial }}"</span>
+					<template v-else-if="actor.penisLength">
+						<span>{{ actor.penisLength.imperial }}"</span>
+						<span class="bio-segment">{{ actor.penisLength.metric }} cm</span>
 					</template>
 				</span>
 			</li>
@@ -439,7 +439,7 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 
 	.icon {
 		width: 1.25rem;
-		height: 1.25rem;
+		height: auto;
 	}
 }
 </style>
@@ -527,6 +527,10 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
     &:not(:last-of-type) {
         border-bottom: solid 1px var(--highlight-weak-40);
     }
+
+	.icon {
+		height: auto; /* prevents jumping */
+	}
 }
 
 .bio-label,
@@ -562,6 +566,7 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 .flag {
     height: 1rem;
     margin: .25rem .5rem 0 0;
+	border-radius: 3px;
 }
 
 .bio-name {
@@ -604,7 +609,7 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 .penis-length-imperial,
 .bio-segment {
     padding: 0 0 0 .5rem;
-    border-left: solid 1px var(--highlight-weak);
+    border-left: solid 1px var(--highlight-weak-20);
     margin: 0 0 0 .5rem;
 }
 
@@ -612,6 +617,8 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 .circumcised.icon {
     fill: var(--primary);
     padding: 0 .5rem;
+	margin-right: .25rem;
+	transform: translateY(2px);
 }
 
 .enhanced.icon {

components/stashes/heart.vue

@@ -209,7 +209,7 @@ async function reloadStashes(newStash) {
 
 	.icon {
 		width: 1.5rem;
-		height: 1.5rem;
+		height: auto; /* prevents jumping */
 		padding: .5rem .5rem;
 		fill: var(--glass);
 	}