wip

resources/js/app.js

@@ -701,6 +701,14 @@
 			}
 		};
 
+		$scope.toggleLayoutVisible = function() {
+			return $window.location.hostname !== 'nginxconfig.io';
+		};
+
+		$scope.toggleLayout = function() {
+			$scope.layout = ($scope.layout === 'default' ? 'do' : 'default');
+		};
+
 
 
 		///////////////////////////

resources/scss/_header.scss

@@ -7,6 +7,7 @@
 }
 
 header {
+	position: relative;
 	background-color: #000;
 	padding: 0.5rem 0;
 	text-align: center;
@@ -14,6 +15,13 @@ header {
 	color: #fff;
 	font-size: 2.2rem;
 
+	.layout-toggle {
+		position: absolute;
+		right: 10px;
+		top: 0;
+		z-index: 100;
+	}
+
 	.container {
 		position: relative;
 	}

resources/scss/app.scss

@@ -16,3 +16,4 @@
 
 @import 'utilities';
 
+@import 'layout/do';

resources/scss/layout/_do.scss

@@ -0,0 +1,56 @@
+body.layout-do {
+	header {
+		padding: 0;
+		background-color: #031b4e;
+
+		nav {
+			background-color: #fff;
+			color: #5b6987;
+			text-align: left;
+
+			.announcement {
+				font-size: 0.875rem;
+				padding: 10px 0;
+				border-bottom: 1px solid #e5e8ed;
+
+				.badge {
+					background-color: #00d7d2;
+					border-radius: 3px;
+					color: #fff;
+					padding: 3px 6px;
+					margin-right: 10px;
+				}
+
+				a {
+					color: inherit;
+				}
+			}
+
+			.menu {
+				padding: 10px 0;
+
+				.logo {
+					background-color: #e5e5e5;
+					border-radius: 3px;
+					width: 47px;
+					height: 47px;
+					position: relative;
+					margin-right: 20px;
+
+					svg {
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-45%, -50%);
+					}
+				}
+			}
+		}
+	}
+
+	section.tabs {
+		.tab-content {
+			background-color: #fafafa;
+		}
+	}
+}