initial commit

style.css

@@ -0,0 +1,160 @@
+:root {
+  --background: #d6d6d6;
+  --text: #021415;
+  --subtext: #3e4c4d;
+  --text-invert: #fdebea;
+
+  --desirable: #7eddcd;
+  --detestable: #bd4c58;
+  --accent: #ded5bd;
+  --hover: ;
+
+  --link: #0c4649;
+  --link-hover: #177479;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: "playfair";
+  src: url("./res/asset-font-playfair-display.woff2") format("woff2");
+  font-display: swap;
+}
+
+body {
+  background-color: var(--background);
+  font-family: "playfair", serif;
+}
+h1,
+h2 {
+  text-align: center;
+}
+h1 {
+  font-size: xx-large;
+}
+h2 {
+  font-size: x-large;
+}
+main h1 {
+  font-size: x-large;
+}
+main h2 {
+  font-size: larger;
+}
+#main {
+  width: min(95%, 1000px);
+  margin: 20px auto;
+  padding: 10px 20px;
+  border: var(--text) double 8px;
+}
+a {
+  color: var(--link);
+}
+a:hover {
+  color: var(--text-invert);
+  background-color: var(--link-hover);
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  margin: auto;
+  width: min(100%, 1000px);
+}
+nav a {
+  width: min(30%, 200px);
+  margin: 5px;
+  min-width: 105px;
+  text-align: center;
+  padding: 10px;
+  background-color: var(--text-invert);
+}
+nav a:hover {
+  background-color: var(--link-hover);
+  color: var(--text-invert);
+}
+#here {
+  color: var(--text-invert);
+  background-color: var(--text);
+  cursor: not-allowed;
+}
+
+#subsystem {
+  animation: glitch 1s infinite;
+}
+
+hgroup {
+  margin: 20px auto;
+}
+hgroup h1,
+hgroup h2,
+hgroup h3 {
+  margin: 5px auto;
+}
+article > h1,
+article > hgroup {
+  margin-top: 0;
+}
+
+.rdct,
+.dsre,
+.acnt {
+  padding: 0 2px;
+}
+.rdct {
+  background-color: var(--text);
+  color: var(--text);
+}
+.rdct:hover {
+  color: var(--text-invert);
+}
+.dsre {
+  background-color: var(--desirable);
+}
+.acnt {
+  background-color: var(--accent);
+}
+
+q,
+blockquote {
+  font-style: italic;
+  color: var(--subtext);
+}
+q b,
+blockquote b {
+  color: var(--text);
+}
+
+@keyframes glitch {
+  0% {
+    text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px;
+  }
+  13% {
+    text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px;
+  }
+  15% {
+    text-shadow: #00a589c5 -1px 1px 1px, #52525295 1px -1px;
+  }
+  38% {
+    text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px;
+  }
+  50% {
+    text-shadow: #00a589c5 -1px -1px 1px, #52525295 -1px 1px;
+  }
+  63% {
+    text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px;
+  }
+  75% {
+    text-shadow: #00a589c5 -1px -1px 1px, #52525295 1px 0px;
+  }
+  88% {
+    text-shadow: #00a589c5 1px 1px 1px, #52525295 -1px 1px;
+  }
+  100% {
+    text-shadow: #00a589c5 -1px 1px 1px, #52525295 0px 1px;
+  }
+}