Improve looks

static/style.css

@@ -1,3 +1,60 @@
+@import url(https://fonts.bunny.net/css?family=be-vietnam-pro:400);
+
+:root {
+    --width-card-wide: 1080px;
+    --color-link: blue;
+    --font-family: sans-serif;
+}
+
 body {
-    font-family: sans-serif;
+    /* font-size: 5vw; */
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    text-align: justify;
+}
+
+main > img {
+    align-self: center;
+}
+
+main > pre {
+    /* align-self: center; */
+    width: 100%;
+}
+
+main a {
+    display: inline;
+}
+
+main small > code,
+main p > code,
+main a > code {
+    display: inline;
+    padding: 0.1em 0.3em;
+}
+
+main small {
+    @media (min-width: 768px) {
+        font-size: 0.7rem;
+    }
+
+    @media (max-width: 768px) {
+        font-size: 1rem;
+    }
+}
+
+pre > code {
+    font-size: 1rem;
+}
+
+code {
+    overflow-x: scroll;
+    text-wrap: nowrap !important;
+}
+
+main small code {
+    font-size: inherit;
 }

templates/blog-page.html

@@ -1,22 +1,18 @@
-{% extends "base.html" %}
+{% extends "base.html" %} {% block content %}
+<a href="/">micouy's blog</a>
 
-
-{% block content %}
-<a href="/">home</a>
-
-<h1 class="title">
-  {{ page.title }}
-</h1>
+<h1 class="title">{{ page.title }}</h1>
 
 <p class="subtitle"><strong>{{ page.date }}</strong></p>
 
 {{ page.content | safe }}
 
-<script src="https://utteranc.es/client.js"
-        repo="micouy/micouy.github.io"
-        issue-term="pathname"
-        theme="github-light"
-        crossorigin="anonymous"
-        async>
-</script>
+<script
+    src="https://utteranc.es/client.js"
+    repo="micouy/micouy.github.io"
+    issue-term="pathname"
+    theme="github-light"
+    crossorigin="anonymous"
+    async
+></script>
 {% endblock content %}