FEATURE: somehow glued Elixir and SASS. Still not even nearly finished, still really experimental

resources/assets/sass/admin/app/app.scss

@@ -0,0 +1,74 @@
+@import "../imports";
+
+.app {
+	position: relative;
+	width: 100%;
+	padding-left: $sidebar-width;
+	min-height: 100vh;
+	margin: 0 auto;
+	left: 0;
+	background-color: $color-bg;
+	box-shadow: 0 0 3px #ccc;
+	transition: left 0.3s ease, padding-left 0.3s ease; 
+	overflow: hidden;
+
+	.content {
+
+		$padding-x: $content-padding-x-md;
+		$padding-y: $content-padding-y-md;
+
+		padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
+		min-height: 100vh;	
+
+		@include media(xl) {
+			$padding-x: $content-padding-x-xl;
+			$padding-y: $content-padding-y-xl;
+
+			padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
+		}
+
+		@include media(lg) {
+			$padding-x: $content-padding-x-lg;
+			$padding-y: $content-padding-y-lg;
+
+			padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
+		}
+
+		@include media(md) {
+			$padding-x: $content-padding-x-md;
+			$padding-y: $content-padding-y-md;
+
+			padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
+		}
+
+		@include media-down(sm) {
+			$padding-x: $content-padding-x-sm;
+			$padding-y: $content-padding-y-sm;
+
+			padding: $header-height-xs + $padding-y $padding-x $footer-height + $padding-y $padding-x;
+		}
+	}
+
+
+	@include media-down(md) {
+		padding-left: 0;
+		// background-color: #ccc;
+		// left: -$sidebar-width;
+		// width: calc(100% + #{$sidebar-width});
+	}
+	
+	&.sidebar-open {
+		// Disable content scrolling when sidebar is open
+		@include media-down(md) {
+			left: 0;
+			// position: absolute;
+			// height: 100%;
+			// overflow: hidden;
+		}
+	}
+
+	&.blank {
+		background-color: #667380;
+	}
+
+}