Harmonize comment CSS

src/components/projectMediaLink.vue

@@ -53,7 +53,9 @@ export default {
 			class="clickable"
 		/>
 		<span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span>
-		<span v-if="options.comment && type == 'post'" class="comment">{{ options.comment }}</span>
+		<div v-if="options.comment && type == 'post'" class="comment">
+			<p>{{ options.comment }}</p>
+		</div>
 	</a>
 	<div style="display:none">
 		<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">

src/styles/_page.project.feed.scss

@@ -109,6 +109,11 @@
 				}
 			}
 
+			.drill {
+				&:hover .comment {
+					opacity: 0.3;
+				}
+
 				.comment {
 					position: absolute;
 					left: 0;
@@ -122,8 +127,22 @@
 					transition: opacity 0.3s;
 					cursor: auto;
 					font-size: 0.9em;
+
+					&:hover {
+						opacity: 1;
 					}
 
+					p {
+						margin: 0;
+					}
+
+					p + p {
+						margin-top: var.$elem-spacing;
+					}
+				}
+			}
+			
+
 			&.message {
 				background: color.$message-bg;
 				color: color.$message;
@@ -152,24 +171,10 @@
 						.drill-hover-icon {
 							color: color.$message-flashy;
 						}
-						.comment {
-							opacity: 0.3;
-						}
 					}
 
 					.comment {
 						background: color.$message-bg-light;
-
-						&:hover {
-							opacity: 1;
-						}
-						p {
-							margin: 0;
-						}
-
-						p + p {
-							margin-top: var.$elem-spacing;
-						}
 					}
 				}
 
@@ -272,10 +277,6 @@
 										filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
 									}
 								}
-
-								.comment {
-									opacity: 0;
-								}
 							}
 						}