add static route for main.css

Signed-off-by: ngn <ngn@ngn.tf>

static/main.css

@@ -0,0 +1,218 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 100%;
+  min-height: 100vh;
+  display: block;
+  background: #000;
+}
+
+.index {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  height: 100vh;
+  margin: auto;
+  justify-content: space-between;
+}
+
+.index .center {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.index .center h1 {
+  font-size: 3rem;
+}
+
+@media screen and (max-width: 1200px) {
+  .index {
+    width: 90%;
+  }
+}
+
+.post {
+  width: 35em;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+  font-weight: 900;
+}
+
+a {
+  color: #02eded;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+html {
+  color: #fff;
+  font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif;
+  font-size: 26px;
+  line-height: 1.55rem;
+}
+
+p {
+  margin: 20px 0;
+}
+
+img {
+  margin: auto;
+  max-width: 100%;
+  display: block;
+}
+
+figcaption {
+  text-align: center;
+}
+
+/*
+code {
+  font-family: monospace;
+  font-size: 15px;
+  white-space: pre-wrap;
+  font-weight: 600;
+  line-height: 1rem;
+  padding: 5px;
+  border-radius: 6px;
+  background-color: rgba(175, 184, 193, 0.2);
+}
+*/
+
+pre {
+  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
+  font-size: 15px;
+  white-space: pre-wrap;
+  /*
+  font-weight: 600;
+  */
+  line-height: 1rem;
+  padding: 20px;
+  border-radius: 6px;
+  background: #101010;
+}
+
+post.code-block {
+  display: block;
+  margin: 5px 0;
+  padding: 20px;
+}
+
+iframe {
+  width: 100%;
+  display: block;
+  margin: auto;
+  min-height: 100px;
+}
+
+@media screen and (max-width: 1200px) {
+  html {
+    font-size: 16px;
+    line-height: 1.5rem;
+  }
+
+  .post {
+    width: 90%;
+  }
+
+  img {
+    display: block;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "Times New Roman", Times, serif;
+    line-height: 30px;
+  }
+}
+
+.author__photo {
+  width: 28px;
+  height: 28px;
+  border-radius: 20px;
+  display: inline-block;
+  margin: auto;
+  margin-right: 5px;
+  display: inline-flex;
+}
+
+.medium__source {
+  font-style: italic;
+}
+
+.author {
+  display: inline-flex;
+  flex-direction: row;
+  margin-right: 5px;
+}
+
+.meta {
+  display: inline-flex;
+}
+
+.gist_contianer {
+  border-radius: 6px;
+  border: 1px solid rgb(211, 211, 211);
+}
+
+.gist_link {
+  margin-left: 5px;
+}
+
+.libmedium__meta {
+  background-color: rgb(255, 165, 0);
+  padding: 5px;
+}
+
+blockquote {
+  margin-left: -5px;
+  padding-left: 19px;
+  border-left: 4px solid #333;
+  font-style: italic;
+}
+
+ol,
+ul {
+  margin-left: 40px;
+}
+
+.line-number {
+  margin-right: 20px;
+  display: inline-block;
+}
+
+.gist-block {
+  overflow-x: scroll;
+  display: block;
+}
+
+.mixtape {
+  padding: 20px;
+  border: 1px solid gray;
+  display: flex;
+  align-items: center;
+  margin: 30px 0;
+}