Move message atrributes to image overlay

src/components/projectPost.vue

@@ -161,6 +161,13 @@
 		</div>
 		<div class="body">
 			<div v-if="options.type == 'message'" class="body-box">
+				<div class="drill" @click.prevent="executeMainAction" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
+					<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get(options.weather_cond)">
+						<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
+					</span>
+					<img class="staticmap clickable" :title="lang.get('click_zoom')" :src="options.static_img_url" />
+					<spotIconStack :mainClasses="'message drill-icon'" :iconMain="drillMainIcon" :iconSub="'footprint'" :icon-sub-transform="'rotate-270'" />
+					<div class="comment">
 						<p>
 							<spotIcon :icon="'coords'" margin="right" size="lg" />
 							<projectMapLink :options="options" />
@@ -168,13 +175,8 @@
 						<p v-if="timeDiff">
 							<projectRelTime :icon="'time'" margin="right" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
 						</p>
-				<a class="drill" @click.prevent="executeMainAction" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
+					</div>
-					<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get(options.weather_cond)">
+				</div>
-						<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
-					</span>
-					<img class="staticmap clickable" :title="lang.get('click_zoom')" :src="options.static_img_url" />
-					<spotIconStack :mainClasses="'message drill-icon'" :iconMain="drillMainIcon" :iconSub="'footprint'" :icon-sub-transform="'rotate-270'" />
-				</a>
 			</div>
 			<div v-else-if="options.type == 'media'" class="body-box">
 				<projectMediaLink :options="options" :type="'post'" ref="medialink" />

src/styles/_color.scss

@@ -22,12 +22,13 @@ $message:			hsl(109, 45%, 27%);
 $message-flashy:	hsl(148, 100%, 50%);
 $message-hover:		color.adjust($message, $lightness: -10%, $space: hsl);
 $message-bg:		color.adjust($message, $lightness: 60%, $space: hsl);
+$message-bg-light:	color.adjust($message, $lightness: 70%, $alpha: -0.3, $space: hsl);
 
 $media:				hsl(214, 45%, 27%);
 $media-flashy:		hsl(193, 100%, 50%);
 $media-hover:		color.adjust($media, $lightness: -10%, $space: hsl);
 $media-bg:			color.adjust($media, $lightness: 60%, $space: hsl);
-$media-bg-light:	color.adjust($media, $lightness: 60%, $alpha: -0.4, $space: hsl);
+$media-bg-light:	color.adjust($media, $lightness: 70%, $alpha: -0.3, $space: hsl);
 
 //Over image colors
 $over-img: 			#DDD;

src/styles/_page.project.feed.scss

@@ -106,18 +106,25 @@
 				}
 			}
 
+			.comment {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				margin: 0;
+				padding: var.$elem-spacing;
+				line-height: normal;
+				box-sizing: border-box;
+				border-radius: 0 0 var.$block-radius var.$block-radius;
+				transition: opacity 0.3s;
+				cursor: auto;
+				font-size: 0.9em;
+			}
+
 			&.message {
 				background: color.$message-bg;
 				color: color.$message;
 
-				p {
-					font-size: 0.9em;
-					height: 1em;
-					margin: 0 0 var.$elem-spacing 0;
-					display: inline-block;
-					width: 100%;
-				}
-
 				a {
 					color: color.$message;
 					&:hover {
@@ -125,8 +132,7 @@
 					}
 				}
 
-				a.drill {
+				.drill {
-					line-height: 0;
 
 					.drill-icon {
 
@@ -143,6 +149,24 @@
 						.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;
+						}
 					}
 				}
 
@@ -256,21 +280,6 @@
 							outline: none;
 							border-radius: var.$block-radius;
 						}
-
-						.comment {
-							position: absolute;
-							left: 0;
-							bottom: 0;
-							width: 100%;
-							line-height: normal;
-							box-sizing: border-box;
-							margin: 0;
-							padding: 0.5em;
-							text-align: justify;
-							border-radius: 0 0 var.$block-radius var.$block-radius;
-							transition: opacity 0.3s;
-							opacity: 1;
-						}
 					}
 				}
 			}

src/styles/_page.project.scss

@@ -16,11 +16,12 @@
 
 	/* Drill icon */
 
-	a.drill {
+	.drill {
 		position: relative;
 		overflow: hidden;
 		text-decoration: none;
 		display: inline-block;
+		line-height: 0;
 
 		.drill-icon {
 			position: absolute;