Initial commit

static/less/main.less

@@ -0,0 +1,102 @@
+@import "theme.less";
+
+#layout {
+	display: grid;
+	grid-template-areas: "menu content";
+	grid-template-columns: 64px 1fr;
+	grid-template-rows:
+		100% 100%;
+	height: 100vh;
+}
+
+#menu {
+	display: flex;
+	flex-flow: column wrap;
+	justify-content: flex-start;
+	gap: 24px;
+
+	grid-area: menu;
+	background: @bg2;
+	padding: 16px;
+
+	img {
+		display: block;
+		width: 32px;
+	}
+}
+
+#page {
+	grid-area: content;
+	padding: 32px;
+
+	.page-label {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 12px;
+		align-items: center;
+		margin-bottom: 32px;
+
+		div {
+			font-size: 1.5em;
+			color: @color1;
+		}
+
+		img {
+			display: block;
+		}
+	}
+}
+
+
+#areas {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	margin-top: 16px;
+
+	.area {
+		background: @bg3;
+		border-radius: 4px;
+
+		&>.name {
+			background: @color1;
+			color: #fff;
+			font-weight: bold;
+			padding: 4px 16px;
+			border-top-left-radius: 4px;
+			border-top-right-radius: 4px;
+		}
+
+		.section {
+			margin: 8px 16px;
+
+			&>.name {
+				font-weight: bold;
+			}
+
+			.triggers {
+
+				a {
+					color: inherit;
+					text-decoration: none;
+				}
+
+				.trigger {
+					display: grid;
+					grid-template-columns: min-content 1fr;
+					grid-gap: 8px;
+					align-items: center;
+					margin-top: 8px;
+
+					img {
+						height: 16px;
+					}
+
+					.label {
+						color: @text2;
+					}
+				}
+			}
+		}
+	}
+}