Initial commit

css/main.css

@@ -0,0 +1,135 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+[onClick] {
+        cursor: pointer;
+}
+
+html, body {
+	margin: 0px;
+}
+
+body {
+	font-size: 14pt;
+
+	font-family: 'Roboto', sans-serif;
+}
+
+header {
+	position: relative;
+	display: grid;
+	grid-template-columns: min-content min-content 1fr min-content;
+	grid-gap: 16px;
+	align-items: center;
+	padding: 16px;
+}
+
+header #pages {
+	display: grid;
+	grid-auto-flow: column;
+	grid-gap: 16px;
+}
+
+header .page {
+	white-space: nowrap;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-weight: 500;
+}
+
+#page-label {
+	font-weight: 500;
+	font-size: 1.25em;
+	white-space: nowrap;
+}
+
+#theme {
+	display: grid;
+	grid-template-columns: repeat(3, min-content);
+	grid-gap: 6px;
+}
+
+#theme select, #theme button {
+	font-size: 0.85em;
+	padding: 4px 8px;
+}
+
+#sections {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 32px;
+	margin-top: 32px;
+	padding: 32px;
+}
+
+.section {
+	border-radius: 4px;
+}
+
+@media only screen and (max-width: 700px) {
+	.section {
+		flex: 1;
+	}
+}
+
+.section .name {
+	padding: 3px 6px 6px 6px;
+	white-space: nowrap
+}
+
+.section .items {
+	display: grid;
+	grid-gap: 8px;
+	padding: 8px;
+}
+
+.section .items .item {
+	display: grid;
+	grid-template-columns: min-content 1fr;
+	grid-template-rows:
+		min-content
+		min-content
+		min-content
+	;
+	grid-gap: 4px 10px;
+	cursor: pointer;
+
+	border-radius: 6px;
+	padding: 12px;
+}
+
+.theme-brighter .item:hover {
+	filter: brightness(1.15);
+}
+
+.theme-darker .item:hover {
+	filter: brightness(0.85);
+}
+
+.section .item .icon {
+	grid-row: 1 / -1;
+	font-size: 1.65em;
+}
+
+.section .item .label {
+	align-self: center;
+	font-weight: 500;
+	white-space: nowrap;
+}
+
+.section .item .description {
+	align-self: center;
+	font-weight: 400;
+	font-size: 0.85em;
+	word-break: normal;
+	overflow-wrap: anywhere;
+	max-width: 250px;
+}
+
+.section .item .url {
+	align-self: center;
+	font-weight: 300;
+	font-size: 0.85em;
+}