add css, next post feature

change favicon, add more readme, add extra example post, dark/light mode toggle

static/styles/global.css

@@ -0,0 +1,84 @@
+body, html {
+  margin: 0;
+  padding: 0;
+}
+
+#main {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 35px 10vw;
+  color: #222;
+}
+
+* {
+  font-family: 'Times New Roman', Times, serif;
+}
+
+*:not(h1, h2, h3, h4, h5, h6) {
+  font-size: 1.02rem;
+}
+
+#return {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+
+a {
+  text-decoration: underline;
+}
+
+a:link {
+  color: forestgreen;
+}
+
+a:visited {
+  color: orchid;
+}
+
+p {
+  margin: 7px 0px;
+  line-height: 1.4;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Verdana, sans-serif;
+  margin: 0;
+  margin-bottom: 5px;
+}
+
+ul {
+  margin: 0;
+  padding-left: 40px;
+}
+
+input[type="checkbox"] {
+  margin-left: 0;
+}
+
+#dark-mode {
+  position: fixed;
+  top: 5px;
+  right: 5px;
+  opacity: 0;
+}
+
+#dark-mode:checked ~ #main {
+  background-color: #222;
+  color: white;
+}
+
+label[for="dark-mode"] {
+  position: fixed;
+  top: 3px;
+  right: 3px;
+  font-size: 1.3rem;
+}
+
+#dark-mode + label[for="dark-mode"]::after {
+  content: "🌙";
+}
+
+#dark-mode:checked + label[for="dark-mode"]::after {
+  content: "☀️";
+}

static/styles/index.css

@@ -0,0 +1,16 @@
+h2 {
+  display: inline-block;
+}
+
+#fancy-title:checked ~ h2 {
+  color: white;
+  padding-right: 0px 4px;
+  background-color: dodgerblue;
+  text-shadow: 1px 1px 1px gray, 4px 4px 1px blue;
+}
+
+#checkboxes {
+  position: relative;
+  top: 0;
+  left: 0;
+}

static/styles/post.css

@@ -0,0 +1,16 @@
+#post-md {
+  margin-top: 7px;
+  display: none;
+}
+
+#show-md:checked ~ #post-md {
+  display: block;
+}
+
+#show-md:checked ~ #post-html {
+  display: none;
+}
+
+#next-post-container {
+  padding-top: 10px;
+}