Adding weather data

style/_fa.scss

@@ -92,3 +92,28 @@ $fa-css-prefix: fa;
 /* Admin */
 .#{$fa-css-prefix}-new:before { content: fa-content($fa-var-plus); }
 .#{$fa-css-prefix}-refresh:before { content: fa-content($fa-var-sync); }
+
+/* Weather */
+.#{$fa-css-prefix}-temperature:before { content: fa-content($fa-var-thermometer-three-quarters); }
+.#{$fa-css-prefix}-clear-day:before { content: fa-content($fa-var-sun); }
+.#{$fa-css-prefix}-clear-night:before { content: fa-content($fa-var-moon-stars); }
+.#{$fa-css-prefix}-cloudy:before { content: fa-content($fa-var-clouds); }
+.#{$fa-css-prefix}-fog:before { content: fa-content($fa-var-fog); }
+.#{$fa-css-prefix}-hail:before { content: fa-content($fa-var-cloud-hail); }
+.#{$fa-css-prefix}-partly-cloudy-day:before { content: fa-content($fa-var-cloud-sun); }
+.#{$fa-css-prefix}-partly-cloudy-night:before { content: fa-content($fa-var-cloud-moon); }
+.#{$fa-css-prefix}-rain-snow-showers-day:before { content: fa-content($fa-var-cloud-sun-rain); }
+.#{$fa-css-prefix}-rain-snow-showers-night:before { content: fa-content($fa-var-cloud-moon-rain); }
+.#{$fa-css-prefix}-rain-snow:before { content: fa-content($fa-var-cloud-sleet); }
+.#{$fa-css-prefix}-rain:before { content: fa-content($fa-var-cloud-rain); }
+.#{$fa-css-prefix}-showers-day:before { content: fa-content($fa-var-cloud-sun-rain); }
+.#{$fa-css-prefix}-showers-night:before { content: fa-content($fa-var-cloud-moon-rain); }
+.#{$fa-css-prefix}-sleet:before { content: fa-content($fa-var-cloud-sleet); }
+.#{$fa-css-prefix}-snow-showers-day:before { content: fa-content($fa-var-cloud-snow); }
+.#{$fa-css-prefix}-snow-showers-night:before { content: fa-content($fa-var-cloud-snow); }
+.#{$fa-css-prefix}-snow:before { content: fa-content($fa-var-cloud-snow); }
+.#{$fa-css-prefix}-thunder-rain:before { content: fa-content($fa-var-thunderstorm); }
+.#{$fa-css-prefix}-thunder-showers-day:before { content: fa-content($fa-var-thunderstorm-sun); }
+.#{$fa-css-prefix}-thunder-showers-night:before { content: fa-content($fa-var-thunderstorm-moon); }
+.#{$fa-css-prefix}-thunder:before { content: fa-content($fa-var-thunderstorm); }
+.#{$fa-css-prefix}-wind:before { content: fa-content($fa-var-wind); }

style/_mask_project.scss

@@ -1,6 +1,8 @@
 //Feed width
 $elem-spacing: 0.5rem;
 $block-spacing: 1rem;
+$block-radius: 3px;
+$block-shadow: 3px;
 $panel-width: 30%;
 $panel-width-max: "400px + 3 * #{$block-spacing}";
 
@@ -175,7 +177,7 @@ $legend-color: $post-color;
 						img {
 							max-width: 200px;
 							max-height: 100px;
-							border-radius: 3px;
+							border-radius: $block-radius;
 							image-orientation: from-image;
 							transition: All 0.2s;
 						}
@@ -219,7 +221,7 @@ $legend-color: $post-color;
 	.leaflet-control {
 		background-color: rgba(255, 255, 255, 0.6);
 		font-family: Roboto, Arial, sans-serif;
-		border-radius: 3px;
+		border-radius: $block-radius;
 		border: none;
 		margin: $block-spacing;
 		box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
@@ -410,7 +412,7 @@ $legend-color: $post-color;
 				margin-bottom: $block-spacing;
 				background: $post-bg;
 				color: $post-color;
-				border-radius: 3px;
+				border-radius: $block-radius;
 				width: calc(100% - #{$block-spacing});
 				box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
 
@@ -522,9 +524,21 @@ $legend-color: $post-color;
 						}
 					}
 
+					.weather {
+						position: absolute;
+						top: $block-spacing;
+						right: $block-spacing;
+						border-radius: $block-radius;
+						background: $message-bg;
+						color: $message-color;
+						font-size: 1.2em;
+						cursor: pointer;
+						padding: $elem-spacing;
+					}
+
 					.staticmap {
 						width: 100%;
-						border-radius: 3px;
+						border-radius: $block-radius;
 						cursor: pointer;
 					}
 				}
@@ -574,7 +588,7 @@ $legend-color: $post-color;
 								width: 100%;
 								image-orientation: from-image;
 								outline: none;
-								border-radius: 3px;
+								border-radius: $block-radius;
 							}
 
 							.comment {
@@ -588,7 +602,7 @@ $legend-color: $post-color;
 								padding: 0.5em;
 								text-align: justify;
 								background: rgba(255, 255, 255, 0.6);
-								border-radius: 0 0 3px 3px;
+								border-radius: 0 0 $block-radius $block-radius;
 								transition: opacity 0.3s;
 								opacity: 1;
 							}
@@ -611,16 +625,16 @@ $legend-color: $post-color;
 		}
 	}
 	#settings {
-		left: calc(min(#{$panel-width} + 3px, #{$panel-width-max} + 3px) * -1);
+		left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1);
 		transition: left 0.5s;
-		width: calc(#{$panel-width} + 3px); //Add box-shadow
-		max-width: calc(#{$panel-width-max} + 3px); //Add box-shadow
+		width: calc(#{$panel-width} + #{$block-shadow}); //Add box-shadow
+		max-width: calc(#{$panel-width-max} + #{$block-shadow}); //Add box-shadow
 
 		#settings-panel {
-			width: calc(100% - #{$block-spacing} - 3px); //Remove box-shadow
+			width: calc(100% - #{$block-spacing} - #{$block-shadow}); //Remove box-shadow
 			margin: $block-spacing;
-			border-radius: 3px;
-			box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, .5);
+			border-radius: $block-radius;
+			box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
 			color: $post-color;
 			background: rgba(255, 255, 255, 0.8);
 			display: flex;
@@ -634,7 +648,7 @@ $legend-color: $post-color;
 				.logo {
 					background: rgba(255, 255, 255, .4);
 					padding: 2rem 1rem;
-					border-radius: 3px 3px 0 0;
+					border-radius: $block-radius $block-radius 0 0;
 
 					img {
 						width: 100%;

style/_mobile.scss

@@ -1,4 +1,7 @@
 @media only screen and (max-width: 800px) {
+
+	$panel-width: "100% - 44px - 2 * #{$block-spacing}";
+
 	.desktop {
 		display: none;
 	}
@@ -11,7 +14,7 @@
 			}
 		
 			.leaflet-right, .leaflet-left {
-				width: calc(100% - 44px - 2 * #{$block-spacing});
+				width: calc(#{$panel-width});
 			}
 		
 			.leaflet-control-container .leaflet-bottom.leaflet-right {
@@ -27,15 +30,15 @@
 		}
 	
 		#feed, #settings {
-			width: calc(100% - 44px - 2 * #{$block-spacing});
+			width: calc(#{$panel-width});
 		}
 
 		#feed {
-			right: calc((100% - 44px - 2 * #{$block-spacing}) * -1);
+			right: calc((#{$panel-width}) * -1);
 		}
 
 		#settings {
-			left: calc((100% - 44px - 2 * #{$block-spacing}) * -1);
+			left: calc((#{$panel-width}) * -1);
 		}
 	}
 }