6 files changed, 24 insertions, 386 deletions

diff --git a/Makefile b/Makefile
index eade890..fb44b73 100644
--- a/Makefile
+++ b/Makefile
@@ -16,7 +16,7 @@ dev:
         alternator --watch
 
 build:
-        bash dither-images.sh
+        #bash dither-images.sh
         mkdir -p public
         openring -l 165 -n 4 -p 1 \
                 -s https://cronokirby.com/posts/index.xml \
diff --git a/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md b/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md
index ea2bec8..6f6b3d7 100644
--- a/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md
+++ b/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md
@@ -174,10 +174,10 @@ FASTA format was extended by [FASTQ](https://en.wikipedia.org/wiki/FASTQ_format)
 
 | Nucleotides   | RGB         | Color name |
 | ------------- | ----------- | ---------- |
-| A -> Adenine  | (0,0,255)   | Blue       |
-| G -> Guanine  | (0,100,0)   | Green      |
-| C -> Cytosine | (255,0,0)   | Red        |
-| T -> Thymine  | (255,255,0) | Yellow     |
+| A ➞ Adenine  | (0,0,255)   | Blue       |
+| G ➞ Guanine  | (0,100,0)   | Green      |
+| C ➞ Cytosine | (255,0,0)   | Red        |
+| T ➞ Thymine  | (255,255,0) | Yellow     |
 
 With this in mind we can create a simple algorithm to create PNG representation of a DNA sequence.
 
diff --git a/template/_meta.html b/template/_meta.html
index 4d8494f..925fb68 100755
--- a/template/_meta.html
+++ b/template/_meta.html
@@ -5,10 +5,10 @@
 
 <meta name="theme-color" content="#ffffff">
 
-<link rel="stylesheet" href="/style.css?v=2021-10-07-3">
+<link rel="stylesheet" href="/style.css?v=2021-12-07-2">
 
 <link rel="alternate" type="application/rss+xml" href="/feed.rss">
 <link rel="alternate" type="application/feed+json" href="/feed.json">
 <link rel="alternate" type="application/rss+xml" href="/yapyap.xml" title="YapYap">
 
-<link rel="icon" href="/assets/general/favicon.png?v=2021-10-07" type="image/png">
+<link rel="icon" href="/assets/general/favicon.png?v=2021-12-07-1" type="image/png">
diff --git a/template/index.html b/template/index.html
index 83567e7..d768c64 100755
--- a/template/index.html
+++ b/template/index.html
@@ -15,7 +15,7 @@
     {{template "_navigation.html"}}
 
     <main class="wrapper">
-      <h2>Posts</h2>
+      <h2>Blog posts</h2>
       <nav itemscope itemtype="https://schema.org/SiteNavigationElement">
         <meta itemprop="name" content="Article list">
 
diff --git a/template/post.html b/template/post.html
index 512fff6..0404820 100755
--- a/template/post.html
+++ b/template/post.html
@@ -19,7 +19,7 @@
         <header>
           <h1 itemtype="headline">{{.Title}}</h1>
           {{if .Listing}}
-          <time>{{.CreatedFormatted}}</time>
+          <time>Posted on {{.CreatedFormatted}}</time>
           {{end}}
         </header>
         <div>
diff --git a/template/style.css b/template/style.css
index d4c77ad..9862087 100755
--- a/template/style.css
+++ b/template/style.css
@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-
 :root {
-  --base-document-width: 760px;
+  --base-document-width: 740px;
   --base-font-size: 18px;
   --base-color: #111111;
 
   --link-color: #111111;
   --link-color-hover: #111111;
 
-  --label-color: #5f5f5f;
+  --label-color: #333333;
 
   --border-color: #eeeeee;
 
   --badge-background-color: #eeeeee;
   --badge-label-color: #111111;
+
+  --code-font-size: 13px;
 }
 
 * {
@@ -22,7 +22,7 @@
 
 body {
   background: white;
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: 'Times New Roman', Times, serif;
   color: var(--base-color);
   font-size: var(--base-font-size);
   line-height: 1.7em;
@@ -56,14 +56,9 @@ hr {
 
 /* links */
 
-a {
-  color: var(--link-color);
-  /* font-weight: 600; */
-}
+a {}
 
-a:hover {
-  color: var(--link-color-hover);
-}
+a:hover {}
 
 
 /* headings */
@@ -126,7 +121,6 @@ blockquote p {
 /* header navigation */
 
 .navigation {
-  /*border-bottom: 1px dotted var(--border-color);*/
   margin-block-start: 10px;
   margin-block-end: 50px;
 }
@@ -180,16 +174,14 @@ blockquote p {
   display: block;
   font-size: 70%;
   font-weight: 500;
+  line-height: 1.2em;
 }
 
 .post-list li a {
   display: inline-block;
-  text-decoration: none;
 }
 
-.post-list li a:hover {
-  text-decoration: underline;
-}
+.post-list li a:hover {}
 
 .post-list li a h2 {
   font-weight: 500;
@@ -204,10 +196,7 @@ blockquote p {
   margin-top: 60px;
 }
 
-.project-list a {
-  font-weight: 400;
-  text-decoration: none;
-}
+.project-list a {}
 
 .project-list li {
   list-style-type: disclosure-closed;
@@ -253,11 +242,11 @@ blockquote p {
 }
 
 code {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: monospace;
   background: rgb(255, 241, 177);
   border-radius: 5px;
   padding: 2px 8px;
-  font-size: 14px;
+  font-size: var(--code-font-size);
   font-weight: 500;
 }
 
@@ -271,7 +260,7 @@ pre > code {
 }
 
 pre {
-  font-size: 14px;
+  font-size: var(--code-font-size);
   line-height: 1.5em;
 
   margin-block-start: 40px;
@@ -306,7 +295,7 @@ article img {
   width: 120%;
   position: relative;
   left: -10%;
-  margin: 70px auto;
+  margin: 40px auto;
   border: 1px solid #eee;
 }
 
@@ -337,356 +326,7 @@ audio {
 }
 
 .footer a {
-  color: #777;
-}
-
-
-/* responsive */
-
-@media only screen and (max-width: 960px) {
-  main { padding: 0 20px; }
-  footer { padding: 0 20px; }
-  h1[itemtype="headline"] { font-size: 220%; }
-  .navigation header { padding: 0 20px; }
-
-  article img {
-    max-width: 100%;
-    position: initial;
-    margin: 50px auto;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .navigation header { display: block; }
-  .navigation header h3 { text-align: center; margin-bottom: 10px; }
-  .navigation header nav { text-align: center; }
-}
-
-
-/* light/dark mode */@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-
-:root {
-  --base-document-width: 760px;
-  --base-font-size: 18px;
-  --base-color: #111111;
-
-  --link-color: #111111;
-  --link-color-hover: #111111;
-
-  --label-color: #5f5f5f;
-
-  --border-color: #eeeeee;
-
-  --badge-background-color: #eeeeee;
-  --badge-label-color: #111111;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: white;
-  font-family: 'IBM Plex Sans', sans-serif;
-  color: var(--base-color);
-  font-size: var(--base-font-size);
-  line-height: 1.7em;
-  padding: 0;
-  margin: 0;
-  padding-bottom: 100px;
-}
-
-hr {
-  border: 0;
-  border-top: 5px solid #f7f7f7;
-}
-
-/* width of the page */
-
-.wrapper {
-  max-width: var(--base-document-width);
-  margin: 0 auto;
-}
-
-/* links */
-
-a {
-  color: var(--link-color);
-  /* font-weight: 600; */
-}
-
-a:hover {
-  color: var(--link-color-hover);
-}
-
-
-/* headings */
-
-h1 { font-size: 220%; line-height: 1.2em; }
-h2 { font-size: 180%; line-height: 1.2em; }
-h3 { font-size: 160%; line-height: 1.2em; }
-h4 { font-size: 140%; line-height: 1.2em; }
-h5 { font-size: 120%; line-height: 1.2em; }
-h6 { font-size: 100%; line-height: 1.2em; }
-
-h1[itemtype="headline"] {
-  padding-bottom: 0;
-  margin-bottom: 20px;
-  font-size: 260%;
-  line-height: 1.2em;
-}
-
-/* tables */
-
-table {
-  width: 100%;
-}
-
-table, th, td {
-  border: 1px solid black;
-  text-align: left;
-}
-
-th, td {
-  padding: 5px 10px;
-}
-
-
-/* quotes */
-
-blockquote {
-  position: relative;
-  margin-block-start: 30px;
-  margin-block-end: 30px;
-  margin-right: 0;
-}
-
-blockquote:before {
-  content: ' ';
-  background-image: url('/assets/general/alert.svg');
-  background-size: 30px 30px;
-  height: 30px;
-  width: 30px;
-  position: absolute;
-  left: -40px;
-  top: 6px;
-}
-
-blockquote p {
-  padding-left: 10px;
-}
-
-
-/* header navigation */
-
-.navigation {
-  /*border-bottom: 1px dotted var(--border-color);*/
-  margin-block-start: 30px;
-  margin-block-end: 50px;
-}
-
-.navigation header {
-  display: flex;
-  align-items: center;
-}
-
-.navigation header a {
-  text-decoration: none;
-}
-
-.navigation header a:hover {
-  text-decoration: underline;
-}
-
-.navigation header .home {
-  font-size: 130%;
-  font-weight: 900;
-}
-
-.navigation header .home a:hover {
-  text-decoration: none;
-}
-
-.navigation header nav {
-  flex-grow: 1;
-  text-align: right;
-}
-
-.navigation header nav a {
-  padding: 0 10px;
-  font-size: 90%;
-  font-weight: 500;
-}
-
-/* index post list */
-
-.post-list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.post-list li {
-  margin: 0 0 20px 0;
-}
-
-.post-list li time {
-  display: block;
-  font-size: 70%;
-  font-weight: 500;
-}
-
-.post-list li a {
-  display: inline-block;
-  text-decoration: none;
-}
-
-.post-list li a:hover {
-  text-decoration: underline;
-}
-
-.post-list li a h2 {
-  font-weight: 500;
-  font-size: 100%;
-  margin: 0;
-}
-
-
-/* project list */
-
-.project-list {
-  margin-top: 60px;
-}
-
-.project-list a {
-  font-weight: 400;
-  text-decoration: none;
-}
-
-.project-list li {
-  list-style-type: disclosure-closed;
-  padding-left: 10px;
-}
-
-
-/* webring */
-
-.webring a {
-  font-weight: 500;
-}
-
-
-/* tag badges */
-
-.tags {
-  margin-top: 5px;
-}
-
-.tags a {
-  font-size: 80%;
-  padding: 2px 10px;
-  border-radius: 20px;
-
-  background: var(--badge-background-color);
-  color: var(--badge-label-color) !important;
-}
-
-.tags a:hover {
-  filter: brightness(90%);
-}
-
-
-/* helpers */
-
-.top-margin {
-  margin-top: 60px;
-}
-
-.top-margin-huge {
-  margin-top: 100px;
-}
-
-code {
-  font-family: 'IBM Plex Mono', monospace;
-  background: rgb(255, 241, 177);
-  border-radius: 5px;
-  padding: 2px 8px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-pre > code {
-  background: unset;
-  padding: unset;
-
-  padding: 15px 20px !important;
-  border-radius: 5px !important;
-  font-weight: 400;
-}
-
-pre {
-  font-size: 14px;
-  line-height: 1.5em;
-
-  margin-block-start: 40px;
-  margin-block-end: 40px;
-}
-
-img, video {
-  max-width: 100%;
-  margin: 30px auto;
-  display: block;
-  border-radius: 5px;
-}
-
-time {
-  color: var(--label-color);
-  font-size: 90%;
-}
-
-/* article */
-
-article a {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
-}
-
-article img {
-  max-width: 120%;
-  width: 120%;
-  position: relative;
-  left: -10%;
-  margin: 70px auto;
-}
-
-article strong {
-  font-weight: 600;
-}
-
-/* audio */
-
-audio {
-  width: 100%;
-  outline: none;
-}
-
-
-/* footer */
-
-.footer {
-  margin-top: 70px;
-  padding-top: 20px;
-  padding-bottom: 50px;
-  font-size: 90%;
-  color: #888;
-}
-
-.footer a {
-  color: #777;
+  color: #666;
 }
 
 
@@ -696,7 +336,6 @@ audio {
   main { padding: 0 20px; }
   footer { padding: 0 20px; }
   h1[itemtype="headline"] { font-size: 220%; }
-  .navigation { margin-block-start: 30px; }
   .navigation header { padding: 0 20px; }
 
   article img {
@@ -712,7 +351,6 @@ audio {
   .navigation header nav { text-align: center; }
 }
 
-
 /* light/dark mode */
 
 @media (prefers-color-scheme: light) { }