css: move lighter theme to layout.scss and make header css mobile first

assets/sass/_vars.scss

@@ -6,9 +6,10 @@ $secondaryForeground: $primaryForeground;
 $backgroundColor: darken($primary, 4%);
 $defaultTextColor: #ffffff;
 
-$headerBackground: darken($primary, 7.5%);
+$headerBackground: transparent;
-$footerBackground: lighten($headerBackground, 1%);
+$headerContainer: true;
-$panelBackground: lighten($headerBackground, 1%);
+$footerBackground: transparent;
+$panelBackground: darken($backgroundColor, 3.2%);
 $inputBackground: darken($panelBackground, 4%);
 
 $info: #4499ff;

assets/sass/layout.scss

@@ -1,5 +1,6 @@
 @import "vars";
 @import 'fonts';
+@import "responsivity_tools";
 
 * {
 	box-sizing: border-box;
@@ -69,21 +70,31 @@ body {
 body > header {
 	z-index: 50;
 	display: flex;
-	flex-direction: row;
+	flex-direction: row-reverse;
 	justify-content: space-between;
+	align-items: center;
 
 	$headerHeight: 64px;
 	height: $headerHeight;
 	line-height: $headerHeight;
 
-	background-color: $headerBackground;
+	background: $headerBackground;
+
+	@if $headerContainer {
+		@include container;
+	}
+
+	@media (max-width: $mobileThreshold) {
+		padding: 0;
+	}
 
 	.logo {
 		display: flex;
 		flex-direction: row;
+		align-items: center;
 
-		padding: 0 24px 0 16px;
+		padding: 0 16px 0 8px;
-		font-size: 32px;
+		font-size: 24px;
 		color: $defaultTextColor;
 
 		&:hover {
@@ -91,34 +102,48 @@ body > header {
 		}
 
 		img {
-			width: $headerHeight;
+			width: initial;
-			height: $headerHeight;
+			height: calc(#{$headerHeight} - 16px);
-			margin-right: 16px;
+			margin-right: 8px;
+			flex-shrink: 0;
 		}
 	}
 
 	nav {
-		ul {
+		> ul {
+			position: fixed;
+			z-index: -1;
+			top: 0;
+			left: 0;
+			height: 100%;
+			transform: translateX(-100%);
+			transition: transform ease-out 150ms;
+
 			display: flex;
-			flex-direction: row;
+			flex-direction: column;
 			margin: 0;
-			padding: 0;
+			padding: $headerHeight 8px 8px;
 
 			font-size: 20px;
 
+			background: $panelBackground;
+
 			li {
 				position: relative;
 				list-style: none;
+				margin-top: 8px;
 
 				a, button {
 					position: relative;
-					height: 64px;
 					margin: 0;
-					padding: 0 24px;
 
 					display: flex;
 					flex-direction: row;
 					align-items: center;
+					height: auto;
+					padding: 8px;
+
+					border-radius: 3px;
 
 					&:hover, &:active {
 						&:not(button) {
@@ -127,13 +152,19 @@ body > header {
 					}
 
 					.feather {
-						--icon-size: 24px;
+						--icon-size: 16px;
+					}
+
+					.tip {
+						display: block;
+						margin-left: 8px;
+						text-transform: inherit;
+						font-weight: inherit;
 					}
 				}
 
 				button {
-					margin: 8px;
+					margin: 0;
-					padding: 24px;
 					height: 32px;
 
 					.feather {
@@ -158,45 +189,27 @@ body > header {
 				}
 
 				.dropdown {
-					position: absolute;
+					position: initial;
-					z-index: -1;
-					top: 100%;
-					right: 0;
-
-					white-space: nowrap;
-					background: $headerBackground;
-					border-radius: 0 0 3px 3px;
-
-					a {
-						padding: 0 8px;
-					}
-				}
-
-				&:hover .dropdown {
 					display: block;
+					padding-left: 0;
 				}
 			}
+
+			> li:not(:first-child) {
+				border-top: 1px solid transparentize($defaultTextColor, 0.8);
+				padding-top: 8px;
+			}
+
+			&.open {
+				transform: translateX(0%);
+				box-shadow: 0 0 5px darken($panelBackground, 20%);
+			}
 		}
 
 		#menu-button {
-			display: none;
+			position: fixed;
-		}
+			top: 0;
-	}
+			left: 0;
-
-	@media (max-width: $mobileThreshold) {
-		flex-direction: row-reverse;
-
-		.logo {
-			padding: 0 16px 0 8px;
-			font-size: 24px;
-
-			img {
-				margin-right: 8px;
-			}
-		}
-
-		nav {
-			#menu-button {
 			display: block;
 			margin: 0;
 			padding: 0 16px;
@@ -212,42 +225,32 @@ body > header {
 			}
 		}
 
-			> ul {
+		hr {
-				flex-direction: column;
+			border: 0;
-				position: absolute;
+			border-bottom: 1px solid $defaultTextColor;
-				z-index: 10;
+			opacity: 0.2;
-				left: 0;
-				transform: translateX(-100%);
-				transition: transform ease-out 150ms;
-
-				background-color: $headerBackground;
-
-				&.open {
-					transform: translateX(0%);
-				}
-
-				li {
-					a, button {
-						.tip {
-							display: block;
-							margin-left: 8px;
-							text-transform: inherit;
-							font-weight: inherit;
-						}
-					}
-
-					.dropdown {
-						position: initial;
-						display: block;
-						padding-left: 32px;
-					}
-				}
-			}
 		}
 	}
 
 	@media (min-width: $mobileThreshold) {
-		nav ul li {
+		flex-direction: row;
+
+		nav {
+			#menu-button {
+				display: none;
+			}
+
+			ul {
+				position: static;
+				flex-direction: row;
+				transform: none;
+				padding: 0;
+				background: transparent;
+
+				li {
+					margin-top: 0;
+					margin-left: 8px;
+
 					a, button, .button {
 						@include tip;
 					}
@@ -261,11 +264,46 @@ body > header {
 							}
 						}
 					}
+
+					.dropdown {
+						position: absolute;
+						z-index: -1;
+						top: 100%;
+						right: 0;
+						display: none;
+						padding: 8px;
+
+						white-space: nowrap;
+						background: $panelBackground;
+						border-radius: 0 0 3px 3px;
+
+						box-shadow: 0 2px 2px transparentize(darken($panelBackground, 20%), 0.75);
+						border-top: 4px solid lighten($panelBackground, 5%);
+
+						li {
+							margin-left: 0;
+
+							&:not(:first-child) {
+								margin-top: 8px;
 							}
 						}
 					}
 
-footer {
+					&:hover .dropdown {
+						display: block;
+					}
+				}
+
+				> li:not(:first-child) {
+					border-top: 0;
+					padding-top: 0;
+				}
+			}
+		}
+	}
+}
+
+body > footer {
 	padding: 8px;
 	margin-top: 8px;
 	text-align: center;
@@ -687,24 +725,6 @@ td.actions {
 	text-align: center;
 }
 
-@mixin container {
-	width: 100%;
-	padding: 0 8px;
-
-	@media (min-width: $mobileThreshold) {
-		margin: 0 auto;
-		padding: 0 16px;
-	}
-
-	@media (min-width: $desktopThreshold) {
-		width: $desktopThreshold;
-	}
-}
-
-.container {
-	@include container;
-}
-
 .panel {
 	position: relative;
 	margin: 16px 0 48px;

assets/sass/responsivity_tools.scss

@@ -0,0 +1,19 @@
+@import "vars";
+
+@mixin container {
+	width: 100%;
+	padding: 0 8px;
+
+	@media (min-width: $mobileThreshold) {
+		margin: 0 auto;
+		padding: 0 16px;
+	}
+
+	@media (min-width: $desktopThreshold) {
+		width: $desktopThreshold;
+	}
+}
+
+.container {
+	@include container;
+}