From 0c98384e5784b174e3a42543072a870c098ed6ec Mon Sep 17 00:00:00 2001
From: curben <curben@users.noreply.gitlab.com>
Date: Thu, 8 Nov 2018 12:15:46 +1030
Subject: [PATCH] style: beautify css

https://codepen.io/jasondavis/pen/JoxMXa
---
 themes/typing/source/css/typing.css | 694 +++++++++++++++++++++-------
 1 file changed, 531 insertions(+), 163 deletions(-)

diff --git a/themes/typing/source/css/typing.css b/themes/typing/source/css/typing.css
index 75192d7..707faaa 100644
--- a/themes/typing/source/css/typing.css
+++ b/themes/typing/source/css/typing.css
@@ -4,34 +4,83 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
-button,input,optgroup,select,textarea {
+button,
+input,
+optgroup,
+select,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
 }
 
-[type=button],[type=reset],[type=submit],button {
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
   -webkit-appearance: button;
 }
 
-[type=search]::-webkit-search-decoration {
+[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-html.borderbox *,html.borderbox :after,html.borderbox :before {
+html.borderbox *,
+html.borderbox :after,
+html.borderbox :before {
   box-sizing: border-box;
 }
 
-article,aside,blockquote,body,button,code,dd,details,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul {
+article,
+aside,
+blockquote,
+body,
+button,
+code,
+dd,
+details,
+dl,
+dt,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hr,
+input,
+legend,
+li,
+menu,
+nav,
+ol,
+p,
+pre,
+section,
+td,
+textarea,
+th,
+ul {
   margin: 0;
   padding: 0;
 }
 
-body,button,input,select,textarea {
+body,
+button,
+input,
+select,
+textarea {
   font: 300 1em/1.8 sans-serif;
 }
 
-button::-moz-focus-inner,input::-moz-focus-inner {
+button::-moz-focus-inner,
+input::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
@@ -41,7 +90,8 @@ table {
   border-spacing: 0;
 }
 
-fieldset,img {
+fieldset,
+img {
   border: 0;
 }
 
@@ -50,13 +100,14 @@ blockquote {
   font-weight: 400;
 }
 
-@media only screen and (max-width:640px) {
+@media only screen and (max-width: 640px) {
   blockquote {
     margin: 1em 0;
   }
 }
 
-abbr,acronym {
+abbr,
+acronym {
   border-bottom: 1px dotted;
   -webkit-font-feature-settings: normal;
   font-feature-settings: normal;
@@ -71,24 +122,35 @@ del {
   text-decoration: line-through;
 }
 
-address,caption,cite,code,dfn,em,th,var {
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+th,
+var {
   font-style: normal;
   font-weight: 400;
 }
 
-ol,ul {
+ol,
+ul {
   list-style: none;
 }
 
-caption,th {
+caption,
+th {
   text-align: left;
 }
 
-q:after,q:before {
-  content: '';
+q:after,
+q:before {
+  content: "";
 }
 
-:root sub,:root sup {
+:root sub,
+:root sup {
   vertical-align: baseline;
 }
 
@@ -101,11 +163,14 @@ q:after,q:before {
   color: #555;
 }
 
-.typo a:hover,a,ins {
+.typo a:hover,
+a,
+ins {
   text-decoration: none;
 }
 
-.typo-u,u {
+.typo-u,
+u {
   text-decoration: underline;
 }
 
@@ -116,8 +181,10 @@ mark {
   margin: 0 5px;
 }
 
-code,pre,pre tt {
-  font-family: monospace,monospace;
+code,
+pre,
+pre tt {
+  font-family: monospace, monospace;
 }
 
 pre {
@@ -137,8 +204,10 @@ hr {
   overflow: visible;
 }
 
-.typo-small,figcaption,small {
-  font-size: .9em;
+.typo-small,
+figcaption,
+small {
+  font-size: 0.9em;
   color: #888;
 }
 
@@ -146,7 +215,8 @@ hr {
   cursor: move;
 }
 
-.clearfix:after,.clearfix:before {
+.clearfix:after,
+.clearfix:before {
   content: "";
   display: table;
 }
@@ -159,7 +229,9 @@ hr {
   zoom: 1;
 }
 
-.textwrap,.textwrap td,.textwrap th {
+.textwrap,
+.textwrap td,
+.textwrap th {
   word-wrap: break-word;
   word-break: break-all;
 }
@@ -168,72 +240,126 @@ hr {
   table-layout: fixed;
 }
 
-.typo dl,.typo form,.typo hr,.typo ol,.typo p,.typo pre,.typo table,.typo ul,.typo-dl,.typo-form,.typo-hr,.typo-ol,.typo-p,.typo-pre,.typo-table,.typo-ul,blockquote {
+.typo dl,
+.typo form,
+.typo hr,
+.typo ol,
+.typo p,
+.typo pre,
+.typo table,
+.typo ul,
+.typo-dl,
+.typo-form,
+.typo-hr,
+.typo-ol,
+.typo-p,
+.typo-pre,
+.typo-table,
+.typo-ul,
+blockquote {
   margin-bottom: 1.2em;
 }
 
-h1,h2,h3,h4,h5,h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 100;
   color: #000;
   line-height: 1.35;
 }
 
-.typo h1,.typo h2,.typo h3,.typo h4,.typo h5,.typo h6,.typo-h1,.typo-h2,.typo-h3,.typo-h4,.typo-h5,.typo-h6 {
+.typo h1,
+.typo h2,
+.typo h3,
+.typo h4,
+.typo h5,
+.typo h6,
+.typo-h1,
+.typo-h2,
+.typo-h3,
+.typo-h4,
+.typo-h5,
+.typo-h6 {
   margin-top: 1.2em;
-  margin-bottom: .6em;
+  margin-bottom: 0.6em;
   line-height: 1.35;
 }
 
-.typo h1,.typo-h1 {
+.typo h1,
+.typo-h1 {
   font-size: 2em;
 }
 
-.typo h2,.typo-h2 {
+.typo h2,
+.typo-h2 {
   font-size: 1.8em;
 }
 
-.typo h3,.typo-h3 {
+.typo h3,
+.typo-h3 {
   font-size: 1.6em;
 }
 
-.typo h4,.typo-h4 {
+.typo h4,
+.typo-h4 {
   font-size: 1.4em;
 }
 
-.typo h5,.typo h6,.typo-h5,.typo-h6 {
+.typo h5,
+.typo h6,
+.typo-h5,
+.typo-h6 {
   font-size: 1.2em;
 }
 
-.typo ul,.typo-ul {
+.typo ul,
+.typo-ul {
   margin-left: 1.3em;
   list-style: disc;
 }
 
-.typo ol,.typo-ol {
+.typo ol,
+.typo-ol {
   list-style: decimal;
   margin-left: 1.9em;
 }
 
-.typo li ol,.typo li ul,.typo-ol ol,.typo-ol ul,.typo-ul ol,.typo-ul ul {
-  margin-bottom: .8em;
+.typo li ol,
+.typo li ul,
+.typo-ol ol,
+.typo-ol ul,
+.typo-ul ol,
+.typo-ul ul {
+  margin-bottom: 0.8em;
   margin-left: 2em;
 }
 
-.typo li ul,.typo-ol ul,.typo-ul ul {
+.typo li ul,
+.typo-ol ul,
+.typo-ul ul {
   list-style: circle;
 }
 
-.typo table caption,.typo table td,.typo table th,.typo-table td,.typo-table th {
+.typo table caption,
+.typo table td,
+.typo table th,
+.typo-table td,
+.typo-table th {
   border: 1px solid #ddd;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   color: #666;
 }
 
-.typo table th,.typo-table th {
+.typo table th,
+.typo-table th {
   background: #fbfbfb;
 }
 
-.typo table thead th,.typo-table thead th {
+.typo table thead th,
+.typo-table thead th {
   background: #f1f1f1;
 }
 
@@ -241,12 +367,16 @@ h1,h2,h3,h4,h5,h6 {
   border-bottom: none;
 }
 
-.typo-input,.typo-textarea {
+.typo-input,
+.typo-textarea {
   -webkit-appearance: none;
   border-radius: 0;
 }
 
-.typo em,.typo-em,caption,legend {
+.typo em,
+.typo-em,
+caption,
+legend {
   color: #000;
   font-weight: inherit;
 }
@@ -257,7 +387,7 @@ h1,h2,h3,h4,h5,h6 {
 
 .typo-em:after {
   position: absolute;
-  top: .65em;
+  top: 0.65em;
   left: 0;
   width: 100%;
   overflow: hidden;
@@ -279,11 +409,25 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
-article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
   display: block;
 }
 
-audio,canvas,progress,video {
+audio,
+canvas,
+progress,
+video {
   display: inline-block;
 }
 
@@ -296,7 +440,8 @@ progress {
   vertical-align: baseline;
 }
 
-[hidden],template {
+[hidden],
+template {
   display: none;
 }
 
@@ -304,11 +449,12 @@ a {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   color: #222;
-  transition: color .25s linear;
+  transition: color 0.25s linear;
   cursor: pointer;
 }
 
-a:active,a:hover {
+a:active,
+a:hover {
   outline-width: 0;
 }
 
@@ -325,7 +471,7 @@ dfn {
 
 h1 {
   font-size: 1.5em;
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
 
 mark {
@@ -337,7 +483,8 @@ small {
   font-size: 80%;
 }
 
-sub,sup {
+sub,
+sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -345,11 +492,11 @@ sub,sup {
 }
 
 sub {
-  bottom: -.25em;
+  bottom: -0.25em;
 }
 
 sup {
-  top: -.5em;
+  top: -0.5em;
 }
 
 img {
@@ -360,9 +507,12 @@ svg:not(:root) {
   overflow: hidden;
 }
 
-code,kbd,pre,samp {
-  font-family: monospace,monospace;
-  font-size: .9em;
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 0.9em;
   background-color: #f3f5f6;
 }
 
@@ -370,7 +520,11 @@ figure {
   margin: 1em 40px;
 }
 
-button,input,optgroup,select,textarea {
+button,
+input,
+optgroup,
+select,
+textarea {
   font: inherit;
   margin: 0;
 }
@@ -379,19 +533,27 @@ optgroup {
   font-weight: 700;
 }
 
-button,input {
+button,
+input {
   overflow: visible;
 }
 
-button,select {
+button,
+select {
   text-transform: none;
 }
 
-[type=reset],[type=submit],button,html [type=button] {
+[type="reset"],
+[type="submit"],
+button,
+html [type="button"] {
   -webkit-appearance: button;
 }
 
-[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner,
+button::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -399,7 +561,7 @@ button,select {
 fieldset {
   border: 1px solid silver;
   margin: 0 2px;
-  padding: .35em .625em .75em;
+  padding: 0.35em 0.625em 0.75em;
 }
 
 legend {
@@ -415,27 +577,30 @@ textarea {
   overflow: auto;
 }
 
-[type=checkbox],[type=radio] {
+[type="checkbox"],
+[type="radio"] {
   box-sizing: border-box;
   padding: 0;
 }
 
-[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
-[type=search] {
+[type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
 
-[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 ::-webkit-input-placeholder {
   color: inherit;
-  opacity: .54;
+  opacity: 0.54;
 }
 
 ::-webkit-file-upload-button {
@@ -443,16 +608,31 @@ textarea {
   font: inherit;
 }
 
-.article .article-entry blockquote footer cite a:hover,.article .article-nav-link-wrap:hover,.dark a:hover,a:hover {
+.article .article-entry blockquote footer cite a:hover,
+.article .article-nav-link-wrap:hover,
+.dark a:hover,
+a:hover {
   color: #22c5e5;
   border-bottom: 1px solid;
-  transition: color .1s linear;
+  transition: color 0.1s linear;
 }
 
-.archive-container hr,.archive-footer hr,.article .article-footer hr,.article hr,.category-container hr,.home hr,.post-footer hr,.tag-container hr {
+.archive-container hr,
+.archive-footer hr,
+.article .article-footer hr,
+.article hr,
+.category-container hr,
+.home hr,
+.post-footer hr,
+.tag-container hr {
   height: 1px;
   border: 0;
-  background-image: -webkit-linear-gradient(0deg,transparent,#d5d5d5,transparent);
+  background-image: -webkit-linear-gradient(
+    0deg,
+    transparent,
+    #d5d5d5,
+    transparent
+  );
 }
 
 .main-nav-link {
@@ -463,7 +643,8 @@ textarea {
   border: 0;
 }
 
-body,html {
+body,
+html {
   width: 100%;
   height: 100%;
   position: relative;
@@ -471,11 +652,17 @@ body,html {
   color: #222;
 }
 
-body,h1,h2,h3,h4,h5,h6 {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -moz-font-feature-settings: "liga" on;
-  transition: .25s;
+  transition: 0.25s;
 }
 
 body {
@@ -484,11 +671,17 @@ body {
   font-size: 1.2em;
 }
 
-h1,h2,h3,h4,h5,h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: serif;
 }
 
-a,a:hover {
+a,
+a:hover {
   text-decoration: none;
 }
 
@@ -497,7 +690,8 @@ em {
   font-weight: lighter;
 }
 
-b,strong {
+b,
+strong {
   color: #000;
   font-weight: 700;
 }
@@ -517,7 +711,12 @@ blockquote {
   padding: 50px 0;
 }
 
-.archive-footer a,.archive-footer b,.archive-footer strong,.post-footer a,.post-footer b,.post-footer strong {
+.archive-footer a,
+.archive-footer b,
+.archive-footer strong,
+.post-footer a,
+.post-footer b,
+.post-footer strong {
   color: #aeb4b9;
 }
 
@@ -525,26 +724,35 @@ blockquote {
   width: 100%;
 }
 
-.copyright,.footer-content,.footer-links {
+.copyright,
+.footer-content,
+.footer-links {
   text-align: center;
   width: 100%;
-  font-size: .9em;
+  font-size: 0.9em;
   color: #cacdd0;
 }
 
-.copyright li,.footer-content li,.footer-links li {
+.copyright li,
+.footer-content li,
+.footer-links li {
   display: inline-block;
 }
 
-.copyright a,.footer-content a,.footer-links a {
+.copyright a,
+.footer-content a,
+.footer-links a {
   color: #777;
 }
 
-.copyright a:hover,.footer-content a:hover,.footer-links a:hover {
+.copyright a:hover,
+.footer-content a:hover,
+.footer-links a:hover {
   color: #22c5e5;
 }
 
-.archive-footer,.post-footer {
+.archive-footer,
+.post-footer {
   margin: 0 auto;
   padding: 1em 0;
   color: #cacdd0;
@@ -558,7 +766,7 @@ blockquote {
 }
 
 .footer-links {
-  font-size: .9em;
+  font-size: 0.9em;
   padding: 0;
 }
 
@@ -595,7 +803,8 @@ blockquote {
   margin: 0 auto;
 }
 
-.home h1,.home strong {
+.home h1,
+.home strong {
   color: #222;
 }
 
@@ -628,11 +837,14 @@ blockquote {
   padding-bottom: 10px;
 }
 
-.header-hr-left,.mobile-nav {
+.header-hr-left,
+.mobile-nav {
   display: none;
 }
 
-.archive-container,.category-container,.tag-container {
+.archive-container,
+.category-container,
+.tag-container {
   width: 60%;
   margin: 0 auto;
   position: relative;
@@ -643,62 +855,100 @@ blockquote {
   max-width: 700px;
 }
 
-.archive-container article,.category-container article,.tag-container article {
+.archive-container article,
+.category-container article,
+.tag-container article {
   margin-bottom: 15px;
 }
 
-.archive-container a,.archive-container a:hover,.category-container a,.category-container a:hover,.tag-container a,.tag-container a:hover {
+.archive-container a,
+.archive-container a:hover,
+.category-container a,
+.category-container a:hover,
+.tag-container a,
+.tag-container a:hover {
   border: 0;
 }
 
-.archive-container .header,.category-container .header,.tag-container .header {
+.archive-container .header,
+.category-container .header,
+.tag-container .header {
   font-size: 1em;
 }
 
-.archive-container .archive-article-header>a,.archive-container .archive-article-header>h1,.category-container .archive-article-header>a,.category-container .archive-article-header>h1,.tag-container .archive-article-header>a,.tag-container .archive-article-header>h1 {
+.archive-container .archive-article-header > a,
+.archive-container .archive-article-header > h1,
+.category-container .archive-article-header > a,
+.category-container .archive-article-header > h1,
+.tag-container .archive-article-header > a,
+.tag-container .archive-article-header > h1 {
   vertical-align: middle;
 }
 
-.archive-container .archive-article-header h1,.category-container .archive-article-header h1,.tag-container .archive-article-header h1 {
+.archive-container .archive-article-header h1,
+.category-container .archive-article-header h1,
+.tag-container .archive-article-header h1 {
   width: calc(100% - 120px);
   font-size: 1em;
   margin: 0;
 }
 
-.archive-container hr,.category-container hr,.tag-container hr {
+.archive-container hr,
+.category-container hr,
+.tag-container hr {
   width: 60%;
   margin: 20px 0 40px;
-  background-image: -webkit-linear-gradient(0deg,#d5d5d5,#d5d5d5,transparent);
+  background-image: -webkit-linear-gradient(
+    0deg,
+    #d5d5d5,
+    #d5d5d5,
+    transparent
+  );
 }
 
-.archive-container .archive-article-date,.category-container .archive-article-date,.tag-container .archive-article-date {
+.archive-container .archive-article-date,
+.category-container .archive-article-date,
+.tag-container .archive-article-date {
   font-size: 1em;
   color: #cacdd0;
 }
 
 .archive-article-date {
-  margin-right: .5em;
+  margin-right: 0.5em;
 }
 
-.archive-container .archive-article-title,.category-container .archive-article-title,.tag-container .archive-article-title {
+.archive-container .archive-article-title,
+.category-container .archive-article-title,
+.tag-container .archive-article-title {
   font-weight: 200;
 }
 
-.archive-container .archive-year-wrap,.category-container .archive-year-wrap,.tag-container .archive-year-wrap {
+.archive-container .archive-year-wrap,
+.category-container .archive-year-wrap,
+.tag-container .archive-year-wrap {
   margin-bottom: 20px;
 }
 
-.archive-container .page-nav,.category-container .page-nav,.tag-container .page-nav {
+.archive-container .page-nav,
+.category-container .page-nav,
+.tag-container .page-nav {
   text-align: center;
   margin-top: 30px;
   color: #aeb4b9;
 }
 
-.archive-container .page-nav a,.category-container .page-nav a,.tag-container .page-nav a {
+.archive-container .page-nav a,
+.category-container .page-nav a,
+.tag-container .page-nav a {
   color: #777;
 }
 
-.archive-container .extend,.archive-container .page-number,.category-container .extend,.category-container .page-number,.tag-container .extend,.tag-container .page-number {
+.archive-container .extend,
+.archive-container .page-number,
+.category-container .extend,
+.category-container .page-number,
+.tag-container .extend,
+.tag-container .page-number {
   margin-right: 15px;
 }
 
@@ -710,7 +960,7 @@ blockquote {
 
 .article .header {
   font-size: 1.1em;
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
 
 .article .main-nav-link:hover {
@@ -734,10 +984,20 @@ blockquote {
 
 .article hr {
   width: 80%;
-  background-image: -webkit-linear-gradient(0deg,#d5d5d5,#d5d5d5,transparent);
+  background-image: -webkit-linear-gradient(
+    0deg,
+    #d5d5d5,
+    #d5d5d5,
+    transparent
+  );
 }
 
-.article h1,.article h2,.article h3,.article h4,.article h5,.article h6 {
+.article h1,
+.article h2,
+.article h3,
+.article h4,
+.article h5,
+.article h6 {
   font-weight: bolder;
 }
 
@@ -745,7 +1005,8 @@ blockquote {
   font-size: 2em;
 }
 
-.article a.fancybox,.article a.fancybox-item {
+.article a.fancybox,
+.article a.fancybox-item {
   border: 0;
 }
 
@@ -778,12 +1039,12 @@ blockquote {
 .article .article-entry blockquote footer cite a {
   color: #aeb4b9;
   border-bottom: 1px solid #eee;
-  transition: color .25s linear;
+  transition: color 0.25s linear;
 }
 
 .article .article-entry blockquote footer cite:before {
   content: "—";
-  padding: 0 .5em;
+  padding: 0 0.5em;
 }
 
 .article .article-entry blockquote footer strong {
@@ -791,7 +1052,11 @@ blockquote {
   font-weight: 400;
 }
 
-.article .article-entry table caption,.article .article-entry table td,.article .article-entry table th,.article .article-entry td,.article .article-entry th {
+.article .article-entry table caption,
+.article .article-entry table td,
+.article .article-entry table th,
+.article .article-entry td,
+.article .article-entry th {
   word-break: normal;
 }
 
@@ -857,12 +1122,13 @@ blockquote {
   text-align: left;
 }
 
-.article .article-footer,.article .article-footer hr {
+.article .article-footer,
+.article .article-footer hr {
   margin-top: 1em;
 }
 
 .article .article-meta {
-  font-size: .9em;
+  font-size: 0.9em;
   color: #aeb4b9;
 }
 
@@ -874,7 +1140,8 @@ blockquote {
   margin-right: 10px;
 }
 
-.article .article-meta .article-category,.article .article-meta .article-tag-list {
+.article .article-meta .article-category,
+.article .article-meta .article-tag-list {
   display: inline-block;
 }
 
@@ -884,7 +1151,7 @@ blockquote {
 }
 
 .article .article-meta .article-tag-list-item:before {
-  content: '#';
+  content: "#";
 }
 
 .article .article-gallery img {
@@ -905,7 +1172,9 @@ blockquote {
   color: #d8d8d8;
 }
 
-.dark,.dark .container,.dark .footer {
+.dark,
+.dark .container,
+.dark .footer {
   background-color: #3f3f3f;
 }
 
@@ -921,7 +1190,8 @@ blockquote {
   color: #d8d8d8;
 }
 
-.dark .home h1,.dark .home strong {
+.dark .home h1,
+.dark .home strong {
   color: #ddd;
 }
 
@@ -933,33 +1203,70 @@ blockquote {
   border-bottom: 1px solid #fff;
 }
 
-.dark code,kbd,pre,samp {
-  font-family: monospace,monospace;
-  font-size: .9em;
+.dark code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 0.9em;
   background-color: #333;
 }
 
-.dark .archive-container .header .main-nav-link,.dark .article .header .main-nav-link,.dark .category-container .header .main-nav-link,.dark .tag-container .header .main-nav-link {
+.dark .archive-container .header .main-nav-link,
+.dark .article .header .main-nav-link,
+.dark .category-container .header .main-nav-link,
+.dark .tag-container .header .main-nav-link {
   color: #aaa;
 }
 
-.dark .archive-container .header .main-nav-link:hover,.dark .article .header .main-nav-link:hover,.dark .category-container .header .main-nav-link:hover,.dark .tag-container .header .main-nav-link:hover {
+.dark .archive-container .header .main-nav-link:hover,
+.dark .article .header .main-nav-link:hover,
+.dark .category-container .header .main-nav-link:hover,
+.dark .tag-container .header .main-nav-link:hover {
   color: #fff;
 }
 
-.dark .archive-container .article-nav,.dark .archive-container .page-nav,.dark .article .article-nav,.dark .article .page-nav,.dark .category-container .article-nav,.dark .category-container .page-nav,.dark .tag-container .article-nav,.dark .tag-container .page-nav {
+.dark .archive-container .article-nav,
+.dark .archive-container .page-nav,
+.dark .article .article-nav,
+.dark .article .page-nav,
+.dark .category-container .article-nav,
+.dark .category-container .page-nav,
+.dark .tag-container .article-nav,
+.dark .tag-container .page-nav {
   color: #aaa;
 }
 
-.dark .archive-container .article-nav a,.dark .archive-container .page-nav a,.dark .article .article-nav a,.dark .article .page-nav a,.dark .category-container .article-nav a,.dark .category-container .page-nav a,.dark .tag-container .article-nav a,.dark .tag-container .page-nav a {
+.dark .archive-container .article-nav a,
+.dark .archive-container .page-nav a,
+.dark .article .article-nav a,
+.dark .article .page-nav a,
+.dark .category-container .article-nav a,
+.dark .category-container .page-nav a,
+.dark .tag-container .article-nav a,
+.dark .tag-container .page-nav a {
   color: #bbb;
 }
 
-.dark .archive-container .article-nav a:hover,.dark .archive-container .page-nav a:hover,.dark .article .article-nav a:hover,.dark .article .page-nav a:hover,.dark .category-container .article-nav a:hover,.dark .category-container .page-nav a:hover,.dark .tag-container .article-nav a:hover,.dark .tag-container .page-nav a:hover {
+.dark .archive-container .article-nav a:hover,
+.dark .archive-container .page-nav a:hover,
+.dark .article .article-nav a:hover,
+.dark .article .page-nav a:hover,
+.dark .category-container .article-nav a:hover,
+.dark .category-container .page-nav a:hover,
+.dark .tag-container .article-nav a:hover,
+.dark .tag-container .page-nav a:hover {
   color: #fff;
 }
 
-.dark .archive-container .article-entry blockquote footer strong,.dark .archive-container .article-meta a,.dark .article .article-entry blockquote footer strong,.dark .article .article-meta a,.dark .category-container .article-entry blockquote footer strong,.dark .category-container .article-meta a,.dark .tag-container .article-entry blockquote footer strong,.dark .tag-container .article-meta a {
+.dark .archive-container .article-entry blockquote footer strong,
+.dark .archive-container .article-meta a,
+.dark .article .article-entry blockquote footer strong,
+.dark .article .article-meta a,
+.dark .category-container .article-entry blockquote footer strong,
+.dark .category-container .article-meta a,
+.dark .tag-container .article-entry blockquote footer strong,
+.dark .tag-container .article-meta a {
   color: #bbb;
 }
 
@@ -967,25 +1274,40 @@ blockquote {
   color: #aaa;
 }
 
-.dark b,.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,.dark strong {
+.dark b,
+.dark h1,
+.dark h2,
+.dark h3,
+.dark h4,
+.dark h5,
+.dark h6,
+.dark strong {
   color: #ddd;
 }
 
-.dark .typo em,.dark .typo-em,.dark caption,.dark legend {
+.dark .typo em,
+.dark .typo-em,
+.dark caption,
+.dark legend {
   color: #bbb;
 }
 
-.dark .typo table caption,.dark .typo table td,.dark .typo-table td {
+.dark .typo table caption,
+.dark .typo table td,
+.dark .typo-table td {
   border: 1px solid #ddd;
   color: #aaa;
 }
 
-.dark .article-entry .highlight,.dark .article-entry pre {
+.dark .article-entry .highlight,
+.dark .article-entry pre {
   color: #d8d8d8;
   background-color: #333;
 }
 
-.dark .article-entry .highlight table caption,.dark .article-entry .highlight table td,.dark .article-entry .highlight td {
+.dark .article-entry .highlight table caption,
+.dark .article-entry .highlight table td,
+.dark .article-entry .highlight td {
   border: 0;
 }
 
@@ -993,18 +1315,19 @@ blockquote {
   background: #444;
 }
 
-.article-entry .highlight,.article-entry pre {
+.article-entry .highlight,
+.article-entry pre {
   padding: 1em;
   background: #f3f5f6;
   color: #4d4d4c;
-  font-size: .9em;
+  font-size: 0.9em;
   overflow: auto;
   line-height: 1.8;
 }
 
 .article-entry .highlight .gutter pre {
   color: #aeb4b9;
-  font-size: .9em;
+  font-size: 0.9em;
 }
 
 .article-entry figure.highlight {
@@ -1049,19 +1372,44 @@ blockquote {
   background: #e6e6e6;
 }
 
-pre .comment,pre .title {
+pre .comment,
+pre .title {
   color: #8e908c;
 }
 
-pre .attribute,pre .css .class,pre .css .id,pre .css .pseudo,pre .html .doctype,pre .regexp,pre .ruby .constant,pre .tag,pre .variable,pre .xml .doctype,pre .xml .pi,pre .xml .tag .title {
+pre .attribute,
+pre .css .class,
+pre .css .id,
+pre .css .pseudo,
+pre .html .doctype,
+pre .regexp,
+pre .ruby .constant,
+pre .tag,
+pre .variable,
+pre .xml .doctype,
+pre .xml .pi,
+pre .xml .tag .title {
   color: #c82829;
 }
 
-pre .built_in,pre .constant,pre .literal,pre .number,pre .params,pre .preprocessor {
+pre .built_in,
+pre .constant,
+pre .literal,
+pre .number,
+pre .params,
+pre .preprocessor {
   color: #f5871f;
 }
 
-pre .class,pre .css .rules .attribute,pre .header,pre .inheritance,pre .ruby .class .title,pre .ruby .symbol,pre .string,pre .value,pre .xml .cdata {
+pre .class,
+pre .css .rules .attribute,
+pre .header,
+pre .inheritance,
+pre .ruby .class .title,
+pre .ruby .symbol,
+pre .string,
+pre .value,
+pre .xml .cdata {
   color: #718c00;
 }
 
@@ -1069,37 +1417,53 @@ pre .css .hexcolor {
   color: #3e999f;
 }
 
-pre .coffeescript .title,pre .function,pre .javascript .title,pre .perl .sub,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword {
+pre .coffeescript .title,
+pre .function,
+pre .javascript .title,
+pre .perl .sub,
+pre .python .decorator,
+pre .python .title,
+pre .ruby .function .title,
+pre .ruby .title .keyword {
   color: #4271ae;
 }
 
-pre .javascript .function,pre .keyword {
+pre .javascript .function,
+pre .keyword {
   color: #8959a8;
 }
 
 /* hide mobile nav menu and its checkbox */
 /* when it's not mobile */
-.mobile-nav,#mobile-menu-toggle,.mobile-nav-link{
-  display: none
+.mobile-nav,
+#mobile-menu-toggle,
+.mobile-nav-link {
+  display: none;
 }
 
 /* align the text (in nav menu) to right */
 /* set line-height in /archives page */
-.mobile-nav-menu{
+.mobile-nav-menu {
   text-align: right;
-  line-height: 1.8
+  line-height: 1.8;
 }
 
-@media (max-width:768px) {
+@media (max-width: 768px) {
   body {
     font-size: 1.2em;
   }
 
-  .archive-container,.archive-footer,.article,.home .content,.post-footer {
+  .archive-container,
+  .archive-footer,
+  .article,
+  .home .content,
+  .post-footer {
     width: 80%;
   }
 
-  .archive-container,.category-container,.tag-container {
+  .archive-container,
+  .category-container,
+  .tag-container {
     padding-top: 1em;
   }
 
@@ -1116,30 +1480,30 @@ pre .javascript .function,pre .keyword {
   }
 
   /* hide desktop nav */
-  .main-nav{
-    display:none
+  .main-nav {
+    display: none;
   }
 
   /* display mobile nav */
-  .mobile-nav{
-    display:flex;
-    align-items:center;
-    justify-content:space-between
+  .mobile-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
   /* display links when menu button is clicked */
   /* use grid to display each link in new line */
-  #mobile-menu-toggle:checked + .mobile-nav-link{
+  #mobile-menu-toggle:checked + .mobile-nav-link {
     display: grid;
     display: -ms-grid;
     border: 2px solid #999;
     border-radius: 5px;
     padding: 5px;
-    text-align: center
+    text-align: center;
   }
 }
 
-@media (max-width:468px) {
+@media (max-width: 468px) {
   body {
     font-size: 1em;
   }
@@ -1152,30 +1516,34 @@ pre .javascript .function,pre .keyword {
     color: #111;
   }
 
-  .archive-container .archive-footer,.archive-container .post-footer {
+  .archive-container .archive-footer,
+  .archive-container .post-footer {
     padding: 1em;
   }
 
-  .archive-container .archive-article-header>a,.archive-container .archive-article-header>h1 {
+  .archive-container .archive-article-header > a,
+  .archive-container .archive-article-header > h1 {
     width: 100%;
   }
 }
 
-@media (max-width:320px) {
+@media (max-width: 320px) {
   body {
-    font-size: .9em;
+    font-size: 0.9em;
   }
 
   .article {
     font-size: 1em;
   }
 
-  .archive-container .archive-footer,.archive-container .post-footer {
+  .archive-container .archive-footer,
+  .archive-container .post-footer {
     padding: 1em;
   }
 
-  .footer,.footer-content {
-    font-size: .9em;
+  .footer,
+  .footer-content {
+    font-size: 0.9em;
   }
 }
 
@@ -1185,7 +1553,7 @@ pre .javascript .function,pre .keyword {
   border-radius: 5px;
   color: #d8d8d8;
   cursor: pointer;
-  font-size: .8em;
+  font-size: 0.8em;
   line-height: 1em;
   padding: 5px;
   user-select: none;