update fonts and readme

Author: gpchelkin

README.md

@@ -1,16 +1,15 @@
 # [gpchelkin](https://g.pchelk.in)
 - All pages are written in [Slim](https://slim-template.github.io) ([GitHub](https://github.com/slim-template/slim)) template language for [Ruby](https://www.ruby-lang.org). Install Ruby, then `gem install slim; slimrb --pretty index.slim > index.html`
-- [Skeleton Framework](https://skeleton-framework.github.io) ([GitHub](https://github.com/skeleton-framework/skeleton-framework)) CSS is used, so design is responsive
-- [Paratype PT Sans and PT Mono](https://www.paratype.com/collections/pt/44157) fonts are loaded from [Google Fonts](https://fonts.google.com)
-- [JavaScript sleep()](https://stackoverflow.com/a/39914235/2490759) implementation
-- [GitHub Pages](https://pages.github.com) hosting
-- `pchelk.in` domain name is registered at [Gandi.net](https://www.gandi.net) and is using [Yandex 360 for Business](https://yandex.com/support/business/) for DNS and email hosting
-- [Userpic](https://g.pchelk.in/gpchelkin.png) is drawn with [Inkscape](https://inkscape.org)
-- [QR code](https://g.pchelk.in/qr.png) is created with [QArt Coder](https://research.swtch.com/qr/draw/)
+- [Skeleton Framework](https://skeleton-framework.github.io) ([GitHub](https://github.com/skeleton-framework/skeleton-framework)) CSS is used, so that design is responsive
+- [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/) fonts are used and loaded from [Google Fonts](https://fonts.google.com)
+- [JavaScript sleep()](https://stackoverflow.com/a/39914235/2490759) implementation is used
+- [GitHub Pages](https://pages.github.com) hosting is used, with redirects for other domains set up in [Netlify](https://docs.netlify.com/routing/redirects/)
+- `pchelk.in` domain name is registered at [Porkbun](https://porkbun.com) and is using [Hetzner for DNS](https://dns.hetzner.com) (and [Apple iCloud Mail](https://support.apple.com/en-us/102540) for custom email domain hosting)
+- [My userpic](https://g.pchelk.in/gpchelkin.png) is drawn with [Inkscape](https://inkscape.org)
+- [My custom QR code](https://g.pchelk.in/qr.png) is created with [QArt Coder](https://research.swtch.com/qr/draw/)
 
 <!-- - Utilizing [JetBrains PyCharm](https://www.jetbrains.com/pycharm/) IDE's [File Watchers](https://www.jetbrains.com/help/pycharm/tutorial-file-watchers-in-product.html) feature for auto-translating Slim into HTML for static hosting, see [exported file watcher](jetbrains_filewatchers_slim.xml) and [how to use it](https://www.jetbrains.com/help/pycharm/tutorial-file-watchers-in-product.html). -->
-<!-- - [QR code](https://g.pchelk.in/qr2.png) is created with [qart.js](https://kciter.github.io/qart.js/) ([GitHub](https://github.com/kciter/qart.js)) -->
+<!-- - [QR code](https://g.pchelk.in/qr2.png) is created with [qart.js](https://kciter.so/qart.js/) ([GitHub](https://github.com/kciter/qart.js)) -->
 <!-- - [Honeybee](https://emojipedia.org/apple/ios-12.1/honeybee/), [OK Hand](https://emojipedia.org/apple/ios-12.1/ok-hand-sign/) and [Thumbs Up](https://emojipedia.org/apple/ios-12.1/thumbs-up-sign/) emojis from [Apple Color Emoji iOS 12.1](https://emojipedia.org/apple/ios-12.1/) font -->
 <!-- - `🐝👍.ws` / `xn--lo8h6c.ws` emoji domain name is registered at [GoDaddy](https://❤❤❤.ws), DNS-managed with [Cloudflare](https://cloudflare.com) and redirected through [Netlify](https://www.netlify.com/docs/redirects/) -->
 <!-- - [/tusit](https://g.pchelk.in/tusit) is [Yandex.Calendar](https://yandex.com/support/calendar/) -->
-<!-- - Translated into HTML with [Plim](https://plim.readthedocs.io) ([GitHub](https://github.com/avanov/Plim)), Python port of Ruby's Slim -->

index.html

@@ -7,19 +7,21 @@
     <base target="_blank" />
     <link href="/favicon.ico" rel="icon" type="image/x-icon" />
     <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
-    <link href="https://fonts.googleapis.com/css?family=PT+Mono|PT+Sans|PT+Sans+Caption" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&amp;family=Noto+Sans:wght@500&amp;display=swap" rel="stylesheet" />
     <link href="skeleton.min.css" rel="stylesheet" type="text/css" />
     <script src="qrmsg.js" type="text/javascript"></script>
   </head>
-  <body style="font-family: &#39;PT Sans Caption&#39;, sans-serif; background-color: #cef3f2; text-align: right;">
+  <body style="font-family: &#39;Noto Sans&#39;, sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; background-color: #cef3f2; text-align: right;">
     <div class="container">
       <div class="row">
         <div class="two columns offset-by-five">
           <a href="gpchelkin.png" title="&#39;pchela&#39; is Russian for bee"><img alt="gpchelkin.png" height="165" src="gpchelkin_thumb.png" width="165" /></a>
         </div>
         <div class="two columns">
-          <div class="alert u-hide" id="qrmsg" style="font-family: &#39;PT Sans&#39;, sans-serif; text-align: center;">
-            Nice QR code,&nbsp<a href="https://research.swtch.com/qr/draw" target="_blank">innit?</a>
+          <div class="alert u-hide" id="qrmsg" style="font-family: &#39;Noto Sans&#39;, sans-serif; text-align: center;">
+            Nice QR code,&nbsp<a href="https://research.swtch.com/qr/draw/" target="_blank">innit?</a>
           </div>
         </div>
         <div class="one column offset-by-two">
@@ -33,7 +35,7 @@ <h3>
           </h3>
         </div>
         <div class="two columns offset-by-one">
-          <h3 style="font-family: &#39;PT Mono&#39;, monospace;">
+          <h3 style="font-family: &#39;JetBrains Mono&#39;, monospace;">
             gpchelkin
           </h3>
         </div>
@@ -43,7 +45,7 @@ <h3>
           </h3>
         </div>
       </div>
-      <div class="row" style="font-family: &#39;PT Mono&#39;, monospace; font-size: 120%;">
+      <div class="row" style="font-family: &#39;JetBrains Mono&#39;, monospace; font-size: 120%;">
         <div class="one-half column">
           <ul id="useful" style="list-style-type: none;">
             <li>

index.slim

@@ -7,11 +7,13 @@ html
     base target="_blank"
     link rel="icon" href="/favicon.ico" type="image/x-icon"
     link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"
-    link href="https://fonts.googleapis.com/css?family=PT+Mono|PT+Sans|PT+Sans+Caption" rel="stylesheet"
+    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=JetBrains+Mono&family=Noto+Sans:wght@500&display=swap" rel="stylesheet"
     link href="skeleton.min.css" rel="stylesheet" type="text/css"
     script type="text/javascript" src="qrmsg.js"
 
-  body style="font-family: 'PT Sans Caption', sans-serif; background-color: #cef3f2; text-align: right;"
+  body style="font-family: 'Noto Sans', sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; background-color: #cef3f2; text-align: right;"
 
     .container
 
@@ -22,9 +24,9 @@ html
             img src="gpchelkin_thumb.png" alt="gpchelkin.png" width="165" height="165"
 
         .two.columns
-          div#qrmsg.alert.u-hide style="font-family: 'PT Sans', sans-serif; text-align: center;"
+          div#qrmsg.alert.u-hide style="font-family: 'Noto Sans', sans-serif; text-align: center;"
             | Nice QR code,&nbsp
-            a href="https://research.swtch.com/qr/draw" target="_blank" innit?
+            a href="https://research.swtch.com/qr/draw/" target="_blank" innit?
 
         .one.column.offset-by-two
           a.github-button href="https://github.com/gpchelkin/gpchelkin.github.io" data-style="mega" aria-label="Star gpchelkin/gpchelkin.github.io on GitHub" Star
@@ -34,11 +36,11 @@ html
         .one-third.column
           h3 George Pchelkin
         .two.columns.offset-by-one
-          h3 style="font-family: 'PT Mono', monospace;" gpchelkin
+          h3 style="font-family: 'JetBrains Mono', monospace;" gpchelkin
         .one-third.column.offset-by-one
           h3 Георгий Пчёлкин
 
-      .row style="font-family: 'PT Mono', monospace; font-size: 120%;"
+      .row style="font-family: 'JetBrains Mono', monospace; font-size: 120%;"
 
         .one-half.column
           ul#useful style="list-style-type: none;"

qrmsg.js

@@ -9,7 +9,7 @@ document.addEventListener(
         location.hash = "";
         var qrmsg = document.getElementById("qrmsg");
         qrmsg.classList.toggle("u-hide");
-        await sleep(3000);
+        await sleep(10000);
         qrmsg.classList.toggle("u-hide");
     }
 })