task 6: HTML export

res/template/base.css

@@ -0,0 +1,126 @@
+* {
+	margin: 0;
+	box-sizing: border-box;
+}
+
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	background-color: #0d130d;
+	font-family: Ubuntu;
+	font-size: 16pt;
+	color: white;
+}
+
+#navbar {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas: "back title space";
+	place-items: center;
+	text-align: center;
+	border-bottom: solid #3e5b3e 1px;
+	padding: 0.4em 0.8em;
+	gap: 0.8em;
+}
+
+#navbar .back {
+	grid-area: back;
+}
+
+#back-btn {
+	width: 2em;
+	height: 2em;
+	position: relative;
+}
+
+#back-btn::before {
+	content: "";
+	border: solid white 4px;
+	border-style: solid none none solid;
+	position: absolute;
+	inset: 0;
+	transform: rotate(-45deg);
+	width: 0.5em;
+	height: 0.5em;
+	margin: auto;
+}
+
+#navbar .title {
+	grid-area: title;
+}
+
+#body {
+	display: flex;
+	flex-direction: column;
+	padding: 2em;
+	gap: 1em;
+}
+
+#crumbs {
+	display: flex;
+	gap: 1em;
+	align-items: center;
+}
+
+#crumbs .sep {
+	position: relative;
+	width: 0.5em;
+	height: 0.5em;
+}
+
+#crumbs .sep::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 100%;
+	height: 100%;
+	border: white 0.2em;
+	border-style: solid solid none none;
+	transform: translate(-50%, -50%) rotate(45deg);
+}
+
+a {
+	color: #00bf00;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+th, td {
+	border: solid white 1px;
+	padding: 0.5em 1em;
+}
+
+tr:nth-child(even) {
+	background-color: #aeaeae21;
+}
+
+th {
+	cursor: pointer;
+	position: relative;
+}
+
+th.sort-asc::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 0.5em;
+	transform: translate(-50%, -25%);
+	border: solid transparent 0.2em;
+	border-top-color: white;
+}
+
+th.sort-desc::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 0.5em;
+	transform: translate(-50%, -55%);
+	border: solid transparent 0.2em;
+	border-bottom-color: white;
+}