refactor(css): split CSS up

static/marketing.css

@@ -0,0 +1,61 @@
+.hero {
+  padding: 10rem 0;
+}
+
+.mk-nav {
+  padding: 1rem;
+}
+
+.mk-nav a,
+.mk-nav a:visited,
+.mk-nav a:visited:hover,
+.mk-nav a:hover {
+  color: var(--white);
+  text-decoration: none;
+}
+
+.mk-nav a:visited:hover,
+.mk-nav a:hover {
+  text-decoration: underline;
+}
+
+.mk-header {
+  line-height: 1;
+  display: inline-block;
+  background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
+  color: transparent;
+  background-clip: text;
+  border: 3px solid #FF79C6;
+  padding: 8px 10px 10px 10px;
+  border-radius: 10px;
+  box-shadow: 0px 2px 4px 0px black;
+}
+
+.mk-subheader {
+  font-size: 2rem;
+  line-height: 1;
+  border-bottom: none;
+  margin: 10px 0;
+  padding: 0;
+}
+
+.mk-desc {
+  margin: 0;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
+  gap: 1rem;
+}
+
+.features > div {
+  border-radius: 10px;
+  border: 1px solid var(--white);
+  padding: 1rem;
+}
+
+.features h2 {
+  border: none;
+  padding: 0;
+}

static/post.css

@@ -0,0 +1,114 @@
+/* ==== MARKDOWN ==== */
+
+.md h1,
+.md h2,
+.md h3,
+.md h4 {
+  margin: 1.5rem 0;
+  font-weight: bold;
+  border-bottom: 2px solid var(--grey);
+  padding-bottom: 15px;
+}
+
+.md h1 a,
+.md h2 a,
+.md h3 a,
+.md h4 a {
+  color: var(--grey);
+}
+
+.md h1 {
+  font-size: 1.60rem;
+  line-height: 1.15;
+}
+
+.md h2 {
+  font-size: 1.45rem;
+  line-height: 1.15;
+}
+
+.md h3 {
+  font-size: 1.20rem;
+}
+
+.md h4 {
+  font-size: 1rem;
+}
+
+/* ==== POST ==== */
+
+.text-hdr {
+  color: var(--hover);
+}
+
+.text-underline-hdr {
+  border-bottom: 3px solid var(--hover);
+  padding-bottom: 3px;
+}
+
+.docs {
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: auto 1fr;
+}
+
+.toc {
+  padding: 0 1rem;
+  overflow-y: auto;
+}
+
+.toc ul, ol {
+  list-style: none;
+  padding: 0 0 0 0.5rem;
+}
+
+.toc li {
+  margin: 0 0 0.15rem 0;
+}
+
+.toc li:first-child {
+  margin-top: 0;
+}
+
+.toc a {
+  color: var(--grey-light);
+}
+
+.toc-btn {
+  display: none;
+}
+
+.current {
+  background-color: var(--blockquote-bg) !important;
+  border-right: 5px solid var(--blockquote);
+}
+
+.current a {
+  color: var(--white);
+}
+
+.current-page a {
+  color: var(--white);
+}
+
+@media only screen and (max-width: 600px) {
+  .toc {
+    width: 0px;
+    padding: 0;
+  }
+
+  .nav-show {
+    width: 95%;
+  }
+
+  .toc-btn {
+    display: block;
+  }
+
+  .docs {
+    grid-template-columns: auto 1fr;
+  }
+}