1 files changed, 91 insertions, 0 deletions
diff --git a/static/scss/lists.scss b/static/scss/lists.scss
new file mode 100644
index 0000000..ddfa53e
--- /dev/null
+++ b/static/scss/lists.scss
@@ -0,0 +1,91 @@
+@import "footer";
+@import "roboto";
+
+$bgColor: #232728;
+$fgColor: #dfdfdf;
+
+$markerColor: $fgColor;
+
+$navInactiveColor: #90e7e7;
+$navActiveColor: #e790c4;
+// #a623db <- nice color might use
+
+* {
+  font-family: 'Roboto', sans-serif;
+}
+
+@mixin selectionColor($fgColor, $bgColor) {
+  color: $fgColor;
+  background: $bgColor;
+}
+::selection { @include selectionColor($bgColor, $navActiveColor) }
+::-moz-selection { @include selectionColor($bgColor, $navActiveColor) }
+
+h1 {color: #e15f99;}
+h2 {color: #47c58d;}
+h3 {color: #e0c45e;}
+// h4 {color: #47c58d;}
+// h5 {color: #47c58d;}
+// h6 {color: #47c58d;}
+
+html, body {
+  line-height: 1.5;
+  background-color: $bgColor;
+  color: $fgColor;
+  padding: 0rem 0.8rem;
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+main {
+  // it's main ul not just ul so
+  // it doesn't affect the navbar
+  ul {
+    line-height: 1.8;
+    li::marker {
+      color: $markerColor;
+    }
+  }
+  .filled {
+    li, li::marker {
+      color: $navInactiveColor;
+    }
+  }
+  .two-column ul {
+    columns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: $navActiveColor;
+}
+
+nav {
+  ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    a {
+      color: $navInactiveColor;
+      margin: 0 0.3rem;
+      padding: 2px 4px;
+    }
+    a.selected {
+      background-color: $navActiveColor;
+      color: $bgColor;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  main .two-column ul {
+    columns: 1;
+    -webkit-columns: 1;
+    -moz-columns: 1;
+  }
+}