tabbed layout

resources/scss/_ads.scss

@@ -11,7 +11,8 @@
 		}
 
 		aside.sidebar & {
-			height: 600px;
+			height: 300px;
+			max-height: 300px;
 		}
 	}
 

resources/scss/_main.scss

@@ -1,6 +1,6 @@
 section.presets {
-	text-align: center;
-	margin-bottom: 0.5rem;
+	margin-top: 0.5rem;
+	margin-bottom: 1rem;
 
 	.btn {
 		&.btn-outline-dark{
@@ -16,6 +16,80 @@ section.presets {
 	}
 }
 
+section.tabs {
+	margin-bottom: 1rem;
+
+	.nav-tabs {
+		.nav-item {
+			a {
+				cursor: pointer;
+				position: relative;
+				transition: all 0.25s;
+
+				&.changed {
+					font-weight: 700;
+					padding-left: 0.6rem;
+					padding-right: 1.4rem;
+
+					small {
+						display: inline;
+					}
+				}
+
+				small {
+					position: absolute;
+					top: 50%;
+					right: 0.25rem;
+					transform: translateY(-50%);
+					display: none;
+					color: #999;
+				}
+			}
+		}
+	}
+	.tab-content {
+		padding: 0.5rem 0.75rem;
+		border-left: 1px solid #dee2e6;
+		border-right: 1px solid #dee2e6;
+		border-bottom: 1px solid #dee2e6;
+		border-bottom-right-radius: 0.25rem;
+		border-bottom-left-radius: 0.25rem;
+
+		.form-group {
+			margin-bottom: 0.25rem;
+
+			.form-check {
+				padding-top: 0.2rem;
+
+				.form-check-label {
+					cursor: pointer;
+					user-select: none;
+				}
+			}
+
+			.form-control.input-changed,
+			.form-check.input-changed,
+			select.input-changed {
+				background-color: #fdffd9;
+			}
+
+			.form-check.input-changed {
+				border-radius: 0.2rem;
+			}
+
+			.btn {
+				&.btn-download {
+					img {
+						vertical-align: -2px;
+						margin-right: 0.1rem;
+						width: 1rem;
+					}
+				}
+			}
+		}
+	}
+}
+
 main {
 	flex: 1 1 auto;
 
@@ -30,6 +104,7 @@ main {
 			font-size: 0;
 			padding: 0.2rem 0.4rem 0.05rem;
 			vertical-align: text-bottom;
+			float: right;
 		}
 	}
 

resources/scss/_sidebar.scss

@@ -1,102 +1,8 @@
-aside.options {
-	.card {
-		background-color: #f8f8f8;
-
-		& + .card {
-			margin-top: 1rem;
-		}
-
-		.card-body {
-			padding: 0.25rem 0.5rem 0.5rem;
-			font-size: 0.9rem;
-
-			.form-group {
-				margin-bottom: 0.5rem;
-
-				&:last-child {
-					margin-bottom: 0;
-				}
-			}
-
-			.form-subgroup {
-				margin-left: 0.35rem;
-				border-left: 2px solid #ced4da;
-				padding-left: 0.5rem;
-
-				.form-subgroup {
-					margin-left: 0;
-					border-left: 1px solid #d7e0ea;
-					padding-left: 0.4rem;
-				}
-
-				.form-check + .form-subgroup {
-					margin-left: 5.5px;
-				}
-			}
-
-			.form-label {
-				margin-bottom: 0.15rem;
-				margin-left: 0.15rem;
-			}
-
-			.form-control {
-				&.domain {
-					&::placeholder {
-						color: #000;
-					}
-
-					&:placeholder-shown {
-						border-color: #3131ff;
-					}
-				}
-
-				&[type="text"],
-				&[type="email"] {
-					&:placeholder-shown {
-						background-color: #fefefe;
-					}
-				}
-			}
-
-			.form-control.input-changed,
-			.form-check.input-changed,
-			select.input-changed {
-				background-color: #fff3cd;
-			}
-
-			.form-check.input-changed {
-				border-radius: 0.2rem;
-			}
-
-			.form-check-label {
-				cursor: pointer;
-				user-select: none;
-			}
-
-			.row {
-				&.no-gutters {
-					& + .no-gutters {
-						margin-top: 0.5rem;
-					}
-
-					.col-md-6 {
-						&:first-child {
-							padding-right: 3px;
-						}
-
-						&:last-child {
-							padding-left: 3px;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
 aside.sidebar {
+	margin-top: 1rem;
+
 	@include media-breakpoint-up(lg) {
-		margin-top: -2.4rem;
+		margin-top: -2.5rem;
 	}
 
 	.github-link {

resources/scss/_variables.scss

@@ -0,0 +1,6 @@
+$container-max-widths: (
+	sm: 540px,
+	md: 720px,
+	lg: 960px,
+	xl: 1300px
+);

resources/scss/app.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 @import 'vendor/bootstrap';
 @import 'vendor/highlight-js';
 @import 'vendor/angular-tooltips';

resources/scss/vendor/_bootstrap.scss

@@ -15,7 +15,7 @@
 // @import '../../../node_modules/bootstrap/scss/button-group';
 @import '../../../node_modules/bootstrap/scss/input-group';
 @import '../../../node_modules/bootstrap/scss/custom-forms';
-// @import '../../../node_modules/bootstrap/scss/nav';
+@import '../../../node_modules/bootstrap/scss/nav';
 // @import '../../../node_modules/bootstrap/scss/navbar';
 @import '../../../node_modules/bootstrap/scss/card';
 // @import '../../../node_modules/bootstrap/scss/breadcrumb';