fixes and changes.

src/index.html

@@ -21,23 +21,6 @@
         My name is Rupus Reinefjord and this is my own little space on the
         World Wide Web.
       </p>
-      <p>
-        I am a programmer and computer enthusiast. I love technology,
-        especially <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">
-          free and open source</a> software.
-        I am currently studying computer science at
-        KTH Royal Institute of Technology, and I work for a small company as an
-        IT administrator.
-      </p>
-
-      <h2>Photography</h2>
-      <p>
-        My photography is available at <a href="https://www.flickr.com/photos/koltrast_">Flickr</a>
-        primarily. You can also follow me on <a href="https://www.instagram.com/rupusreinefjord/">Instagram</a>.
-        I mostly take photos of nature, but mix it up with whatever I happen to
-        see while carrying my camera. I use a Nikon D7100 with a Nikkor 18-140mm
-        kit lens. It works for most purposes.
-      </p>
 
       <h2>My online presence</h2>
       <dl>
@@ -53,22 +36,23 @@
 
       <h2>How to contact me</h2>
       <p>
-        I prefer you contact me via email. Use PGP encryption if you feel like
-        doing so!
+        I prefer that you contact me via email. Use PGP encryption if you like!
       </p>
       <dl>
         <dt>Email:</dt>
         <dd>
-        <a href="mailto:firstname(at)lastname(dot)net" class="email encoded">cnVwdXNAcmVpbmVmam9yZC5uZXQK</a>
+        <a href="mailto:firstname(at)lastname(dot)net" class="email encoded" data-encoded="cnVwdXNAcmVpbmVmam9yZC5uZXQK">
+          firstname(at)lastname(dot)net
+        </a>
         <p class="nojs">
-          Please activate javascript (or wait for it to load) to see the address.
-          Hint: the address is <span class="email">firstname(at)lastname(dot)net</span>
+          Please activate javascript (or wait for it to load if it hasn't) to
+          see the address, or use the hint above to figure it out.
         </p>
         </dd>
         <dt>PGP key:</dt>
         <dd>
         <a href="/static/rupusreinefjord_pubkey.asc">
-          <code>E275 C3F0 8765 EBC3 C906 66F4 E918 999B E668 8BD2</code>
+          <code>E275 C3F0 8765 EBC3 C906 65F4 E918 999B E668 8BD2</code>
         </a>
         </dd>
       </dl>

src/static/css/fonts.css

@@ -1,55 +0,0 @@
-@font-face {
-    font-family: "Fira Sans";
-    src: url('/static/fonts/firasans/Normal/Roman/FiraSans-Regular.woff2') format('woff2'),
-         url('/static/fonts/firasans/Normal/Roman/FiraSans-Regular.woff') format('woff');
-    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-    font-weight: 400;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Fira Sans";
-    src: url('/static/fonts/firasans/Normal/Italic/FiraSans-Italic.woff2') format('woff2'),
-         url('/static/fonts/firasans/Normal/Italic/FiraSans-Italic.woff') format('woff');
-    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-    font-weight: 400;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Fira Sans";
-    src: url('/static/fonts/firasans/Normal/Roman/FiraSans-Bold.woff2') format('woff2'),
-         url('/static/fonts/firasans/Normal/Roman/FiraSans-Bold.woff') format('woff');
-    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-    font-weight: 600;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Fira Sans";
-    src: url('/static/fonts/firasans/Normal/Italic/FiraSans-BoldItalic.woff2') format('woff2'),
-         url('/static/fonts/firasans/Normal/Italic/FiraSans-BoldItalic.woff') format('woff');
-    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-    font-weight: 600;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Fira Mono";
-    src: url('/static/fonts/firamono/FiraMono-Regular.woff2') format('woff2'),
-         url('/static/fonts/firamono/FiraMono-Regular.woff') format('woff');
-    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-    font-weight: 400;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Fira Mono";
-    src: url('/static/fonts/firamono/FiraMono-Bold.woff2') format('woff2'),
-         url('/static/fonts/firamono/FiraMono-Bold.woff') format('woff');
-    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-    font-weight: 600;
-    font-display: swap;
-}

src/static/css/style.css

@@ -10,15 +10,12 @@ html {
 }
 
 body {
-    font-family: serif;
+    background-color: #fff;
+    font-family: sans-serif;
     text-decoration-skip: ink;
     padding: 1rem 1rem 2rem 1rem;
 }
 
-h1, h2, h3 {
-    font-family: sans-serif;
-}
-
 main {
     max-width: 36rem;
     margin: 0 auto;
@@ -34,8 +31,8 @@ dd {
 }
 
 code, .email {
-    font-family: monospace, sans-serif;
-    font-size: 0.9em;
+    /* http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/ */
+    font-family: monospace, monospace;
 }
 
 footer {

src/static/js/common.js

@@ -2,7 +2,7 @@ function emaildecode() {
   var emails = document.getElementsByClassName("encoded");
 
   for (var i = 0; i < emails.length; i++) {
-    var b64 = emails[i].innerHTML;
+    var b64 = emails[i].dataset.encoded;
     var decoded = window.atob(b64);
     emails[i].innerHTML = decoded;
     emails[i].href = "mailto:" + decoded;

utils

@@ -44,7 +44,7 @@ function build {
 
 function serve {
     cd build
-    python -m http.server $1
+    python3 -m http.server $1
 }
 
 "$@"