initial commit

subsystem/substyle.css

@@ -0,0 +1,104 @@
+:root {
+  --l-red: #f73631;
+  --red: #bd2f2a;
+  --d-red: #4f0503;
+  --green: #2b954d;
+  --d-green: #1a7236;
+  --l-yellow: #dfbc73;
+  --orange: #c54928;
+  --black: #101010;
+  --white: #edddd4;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: "inter";
+  src: url("./subres/inter.woff2") format("woff2");
+  font-display: swap;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--l-yellow);
+  font-family: "inter", sans-serif;
+}
+a {
+  color: var(--orange);
+}
+a:hover {
+  color: var(--black);
+  background-color: var(--orange);
+}
+nav {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  text-align: center;
+  background-color: var(--d-red);
+}
+nav a {
+  margin: 0 10px;
+  background-color: var(--red);
+  color: var(--white);
+
+  transition: ease-out 100ms;
+}
+nav a:hover {
+  background-color: var(--l-red);
+  color: var(--black);
+}
+.bnav {
+  position: absolute;
+  top: 10px;
+  left: 40px;
+  width: 80%;
+  height: 60px;
+  transform: rotate(-0.4deg);
+  background-color: var(--orange);
+}
+#here {
+  background-color: var(--d-green);
+  color: var(--black);
+}
+#here:hover {
+  cursor: not-allowed;
+}
+#here::before {
+  content: "You Are ";
+  color: var(--white);
+}
+#headnav {
+  margin: 20px auto;
+  margin-bottom: 30px;
+  transform: rotate(1deg);
+  box-shadow: #00000085 0 1px 2px;
+}
+#headnav a {
+  padding: 10px 20px;
+}
+#headnav a:first-child {
+  margin-left: 20px;
+}
+#headnav .spacer {
+  flex-grow: 1;
+}
+
+#socials {
+  width: min(100%, 800px);
+  margin: 10px auto;
+  margin-top: 30px;
+}
+#socials a {
+  flex-grow: 1;
+  width: calc(100% / 5);
+  padding: 5px;
+  background-color: var(--d-red);
+  margin: 0;
+}
+#socials a:hover {
+  background-color: var(--l-red);
+}