feat: use monospaced

Author: mtib

src/base.html.jinja2

@@ -7,9 +7,8 @@
     <title>{% block title %}blog.mtib.dev{% endblock %}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Sono:wght@500&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Sono:wght,MONO@500,0&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Sono:wght,MONO@700,0&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Sono:wght,MONO@500,0;500,1;700,0;700,1&display=swap"
+        rel="stylesheet">
     <link rel="stylesheet" href="/main.css">
     <link rel="icon" href="/assets/m.png">
     <meta name="application-name" content="blog.mtib.dev">

src/index.html.jinja2

@@ -2,7 +2,7 @@
 {% block content %}
 {% for part in index.parts %}
 <div class="item">
-    <h2 class="sono-mono">{{part.title}}</h2>
+    <h2>{{part.title}}</h2>
     {% if part.description %}
     <p>{{part.description}}</p>
     {% endif %}

src/main.css.jinja2

@@ -61,9 +61,7 @@ h6 {
 
 .sono-mono {
   font-family: "Sono", monospace;
-  font-optical-sizing: auto;
   font-weight: 500;
-  font-style: normal;
   font-variation-settings:
     "MONO" 1;
 }
@@ -73,8 +71,6 @@ a {
     font-weight: 700;
     color: #f4f;
     font-family: "Sono", monospace;
-    font-optical-sizing: auto;
-    font-style: normal;
     font-variation-settings:
         "MONO" 1;
 }
@@ -89,10 +85,18 @@ a:visited {
 
 h1 {
     font-size: 4rem;
+    font-weight: 700;
 }
 
 h2 {
     font-size: 2.5rem;
+    font-weight: 700;
+}
+
+h3 {
+    font-size: 1.7rem;
+    line-height: 1.2;
+    font-weight: 700;
 }
 
 ul {

src/posts/text_manipulation.html

@@ -1,16 +1,16 @@
-<textarea name="input" id="input"></textarea>
+<textarea name="input" id="input" class="sono-mono"></textarea>
 
 <select name="algo" id="algo">
     <option value="codeQuote">Code quote</option>
 </select>
 
 <code id="outputWrap">
-<pre id="output">
+<pre id="output" class="sono-mono">
 </pre>
 </code>
 
 <input type="button" value="Copy" id="copyBtn">
-<span id="feedback"></span>
+<span id="feedback" class="sono-mono"></span>
 
 <script>
     const input = document.getElementById('input');
@@ -43,7 +43,7 @@
 
     function getAlgo() {
         const algoName = document.getElementById('algo').value;
-        const algo = algos[algoName]
+        const algo = algos[algoName];
 
         if (algo) {
             return algo;
@@ -83,6 +83,7 @@
         margin-bottom: 1em;
         resize: vertical;
     }
+
     #outputWrap {
         display: block;
         width: 100%;
@@ -92,10 +93,12 @@
         padding: 1em 1em;
         margin-top: 1em;
     }
+
     #output {
         text-wrap: pretty;
         overflow-wrap: break-word;
     }
+
     #copyBtn {
         display: inline-block;
         margin-top: 1em;
@@ -106,9 +109,11 @@
         border-radius: .5em;
         cursor: pointer;
     }
+
     #copyBtn:hover {
         background-color: #fff;
     }
+
     #algo {
         background-color: #fdf;
         border: none;
@@ -117,7 +122,8 @@
         border-radius: .5em;
         cursor: pointer;
     }
+
     #algo:hover {
         background-color: #fff;
     }
-</style>
+</style>

src/posts/text_manipulation.html.jinja2

@@ -1,11 +1,11 @@
 {% extends "src/base.html.jinja2" %}
 {% block heading %}
-<h1>blog.mtib.dev</h1>
+<h1 class="sono-mono">blog.mtib.dev</h1>
 <a href="/index.html">back</a>
 {% endblock heading %}
 {% block content %}
 <div class="item">
-    <h2>Text Manipulation</h2>
+    <h2 class="sono-mono">Text Manipulation</h2>
     {% include "text_manipulation.html" %}
 </div>
-{% endblock content %}
+{% endblock content %}