Move files to follow webpack structure

src/styles/_mobile.scss

@@ -0,0 +1,91 @@
+@media only screen and (max-width: 800px) {
+
+	$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
+
+	.desktop {
+		display: none !important;
+	}
+
+	#projects {
+		#feed, #settings {
+			width: calc(#{$panel-width});
+			max-width: calc(#{$panel-width});
+		}
+
+		#feed {
+			right: calc((#{$panel-width}) * -1);
+		}
+
+		#settings {
+			left: calc((#{$panel-width}) * -1);
+		}
+
+		#title {
+			width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
+			max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
+			text-align: center;
+		}
+
+		.leaflet-right, .leaflet-left {
+			width: 100%;
+		}
+
+		&.with-feed, &.with-settings {
+			#submap {
+				width: 100%;
+			}
+
+			.leaflet-control-container .leaflet-top.leaflet-right {
+				display: none;
+			}
+
+			#title {
+				width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
+				max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
+			}
+		}
+
+		&.with-feed {
+			.leaflet-right {
+				right: calc(#{$panel-width});
+			}
+			.leaflet-left {
+				left: calc((#{$panel-width}) * -1);
+			}
+		}
+
+		&.with-settings {
+			.leaflet-right {
+				right: calc((#{$panel-width}) * -1);
+			}
+			.leaflet-left {
+				left: calc(#{$panel-width});
+			}
+		}
+	
+		.leaflet-control-container .leaflet-top.leaflet-left {
+			display: none;
+		}
+	}
+
+	.lightbox .lb-outerContainer .lb-container .lb-nav {
+		a.lb-prev, a.lb-next  {
+			height: 100%;
+			width: 100%;
+		}
+
+		a.lb-prev::before {
+			left: 1em;
+		}
+
+		a.lb-next::before {
+			right: 1em;
+		}
+	} 
+}
+
+@media only screen and (min-width: 801px) {
+	.mobile {
+		display: none !important;
+	}
+}