first commit

styles/bundles/complete.css

@@ -0,0 +1,27 @@
+@import url('/styles/common.css');
+@import url('/styles/classes/breaks.css');
+@import url('/styles/classes/flex.css');
+@import url('/styles/classes/ul-directions.css');
+
+@import url('/styles/components/footer.css');
+@import url('/styles/components/header.css');
+@import url('/styles/components/pre-icon.css');
+@import url('/styles/components/reference.css');
+
+body {
+  max-width: 1300px;
+  min-width: 300px;
+  padding: 2em;
+  margin: 4.5em auto auto;
+
+  background: var(--background);
+  font-family: var(--mono-font);
+  font-weight: 400;
+  font-size: 15px;
+  color: var(--text);
+  caret-color: var(--primary);
+}
+
+*, *::before, *::after {
+  transition: all .3s ease-out;
+}

styles/classes/breaks.css

@@ -0,0 +1,3 @@
+.break-word-all {
+    word-break: break-all;
+}

styles/classes/flex.css

@@ -0,0 +1,19 @@
+.flex {
+  display: flex;
+  justify-content: space-around;
+}
+
+.flex.row {
+  flex-direction: row;
+}
+.flex.column {
+  flex-direction: column;
+}
+
+.flex.wrappable {
+  flex-wrap: wrap;
+}
+
+.flex.same-width {
+  flex: 1;
+}

styles/classes/ul-directions.css

@@ -0,0 +1,11 @@
+.row-ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row-ul > li {
+  margin: 0 .5em;
+  display: inline;
+  margin: 0;
+}

styles/common.css

@@ -0,0 +1,68 @@
+@import url('/styles/variables.css');
+@import url('/styles/scrollbar.css');
+
+h1, h2, h3, h4, h5 {
+  font-family: var(--font);
+  font-weight: 700;
+}
+
+html {font-size: 100%;} /* 16px */
+
+h1 {font-size: 4.210rem; /* 67.36px */}
+
+h2 {font-size: 3.158rem; /* 50.56px */}
+
+h3 {font-size: 2.369rem; /* 37.92px */}
+
+h4 {font-size: 1.777rem; /* 28.48px */}
+
+h5 {font-size: 1.333rem; /* 21.28px */}
+
+small {font-size: 0.750rem; /* 12px */}
+
+a:link {
+  color: var(--primary);
+}
+
+a:visited {
+  color: var(--secondary);
+}
+
+@media (any-hover: hover) {
+  a:visited:hover,
+  a:link:hover {
+    color: var(--accent);
+  }
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--primary-complementary);
+}
+
+kbd > kbd, code {
+  background: var(--background-lighter);
+  font-size: .8em;
+  padding: .1em .4em;
+  border: 1px solid white;
+  border-radius: .5em;
+  font-family: var(--mono-font);
+  letter-spacing: .1em;
+}
+
+input {
+  background: var(--background-lighter);
+  color: var(--text);
+}
+
+@media (any-hover: hover) {
+  p:hover,
+  *:hover::before {
+    filter: brightness(1.35);
+  }
+}
+
+*:focus {
+  outline: double var(--primary);
+  border: 2px solid #0000;
+}

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);
+  }
+}

styles/scrollbar.css

@@ -0,0 +1,20 @@
+/* width */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #0000;
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #fff; 
+}

styles/variables.css

@@ -0,0 +1,17 @@
+/* ew google, I know, but I want easy fonts */
+@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Oxygen%20Mono:400');
+
+:root {
+  --text: #ddd3d5;
+  --dark-text: #8d8385;
+  --dark: #4d4345;
+  --background: #0f0a0b;
+  --background-lighter: #2f2a2b;
+  --primary: #dd5555;
+  --primary-complementary: #55dddd;
+  --secondary: #606b33;
+  --accent: #d1985c;
+
+  --font: 'Montserrat', Arial;
+  --mono-font: 'Oxygen Mono', monospace;
+}