first commit

styles/components/footer.css

@@ -0,0 +1,7 @@
+@import url('/styles/common.css');
+footer {
+  margin-top: 1em;
+  color: var(--dark-text);
+  text-align: center;
+  font-size: .7em;
+}

styles/components/header.css

@@ -0,0 +1,26 @@
+@import url('/styles/common.css');
+
+header {
+  position: fixed;
+
+  top: 0;
+  left: 0;
+  right: 0;
+  height: min-content;
+  border-bottom: 1px solid var(--dark);
+
+  padding: .7em;
+  backdrop-filter: blur(10px);
+}
+
+@media (any-hover: hover) {
+  header:hover {
+    padding: 1em;
+  }
+}
+
+header a:link,
+header a:visited
+{
+  color: var(--primary);
+}

styles/components/pre-icon.css

@@ -0,0 +1,20 @@
+@import url('/styles/common.css');
+
+.pre-icon {
+  display: inline-flex;
+  align-items: center;
+  height: 1em;
+  --scale-x: 1;
+  --scale-y: 1;
+}
+
+.pre-icon::before {
+  content: '';
+  mask: var(--pre-icon);
+  mask-size: cover;
+  background: var(--dark);
+  width: calc(1em * var(--scale-x));
+  height: calc(1em * var(--scale-y));
+  margin-right: .3em;
+  display: inline-block;
+}

styles/components/reference.css

@@ -0,0 +1,41 @@
+@import url('/styles/common.css');
+
+a.reference:link,
+a.reference:visited {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+@media (any-hover: hover) {
+  a.reference:hover:link,
+  a.reference:hover:visited {
+    color: var(--accent);
+  }
+}
+
+a.reference {
+  display: inline-flex;
+  align-items: center;
+}
+
+a.reference::before {
+  content: '';
+  mask: url('/assets/link.svg');
+  mask-size: cover;
+  background: var(--dark);
+  opacity: 0;
+  width: 0;
+  height: 1em;
+  transform: scale(0);
+  display: inline-block;
+}
+
+@media (any-hover: hover) {
+  a.reference:hover::before {
+    opacity: 1;
+    width: 1em;
+    height: 1em;
+    margin-right: -.1em;
+    transform: scale(.7);
+  }
+}