reflect new changes

3 files changed, 50 insertions, 23 deletions

diff --git a/static/css/style.css b/static/css/style.css
index ec95b6a..753cf3e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,18 +3,14 @@
   font-size: larger;
 }
 
-h1 {
-  text-align: center;
-}
-
-ul {
-  margin-left: 2em;
-  margin-right: 2em;
+* {
+  box-sizing: border-box;
+  transition: all 0.25s ease-in-out;
 }
 
-ul.page-list {
-  margin-left: 0;
-  margin-right: 0;
+h1,
+h2 {
+  text-align: center;
 }
 
 body, html {
@@ -22,11 +18,6 @@ body, html {
   padding: 0;
 }
 
-* {
-  box-sizing: border-box;
-  transition: all 0.25s ease-in-out;
-}
-
 body {
   width: 100%;
   display: grid;
@@ -49,6 +40,7 @@ body > footer {
 
 main {
   grid-area: main;
+  border-radius: 5px;
 }
 
 a{
@@ -91,7 +83,8 @@ nav ul {
 nav li {
   display: block;
   float: left;
-  min-width: 2em;
+  border-radius: 5px;
+  min-width: 1em;
   max-width: 10em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
@@ -118,7 +111,14 @@ nav > ul > li > ul > li {
 }
 
 nav span {
-  padding-left: 0.4em;
+  display: none;
+}
+
+@media screen and (min-width: 600px) {
+  nav span {
+    display: inline;
+    padding-left: 0.4em;
+  }
 }
 
 
@@ -168,9 +168,35 @@ button.theme-switcher > .fa-moon {
 }
 
 /* code blocks */
+pre {
+  white-space: pre-wrap;
+}
+
+code {
+  overflow-wrap: anywhere;
+}
+
 code.crypto {
   font-size: smaller;
-  overflow-wrap: anywhere;
+}
+
+/* for hljs line numbers */
+.hljs-ln-numbers {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  text-align: right;
+  border-right: 1px solid #CCC;
+  vertical-align: top;
+  padding-right: 0.5em !important;
+}
+
+.hljs-ln-code {
+    padding-left: 0.5em !important;
 }
 
 
@@ -230,11 +256,11 @@ div.art-grid img {
   overflow: hidden;
 }
 
-@media screen and (min-width: 600px) {  
+@media screen and (min-width: 600px) {
   div.art-grid img.wide {
     grid-column: span 2 / auto;
   }
-  
+
   div.art-grid img.tall {
     grid-row: span 2 / auto;
   }
diff --git a/static/css/theme.css b/static/css/theme.css
index 6fc0501..f490841 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -109,7 +109,7 @@ body {
 }
 
 main {
-  background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
+  background: var(--body-bg);
 }
 
 pre, code {
@@ -119,7 +119,7 @@ pre, code {
 
 /* nav bar */
 body > header {
-  background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
+  background: var(--bg);
 }
 
 nav li {
@@ -142,7 +142,7 @@ nav li:hover > a {
 
 /* footer */
 body > footer {
-  background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
+  background: var(--bg);
 }
 
 
diff --git a/static/hl/highlight-ln.min.js b/static/hl/highlight-ln.min.js
new file mode 100644
index 0000000..a5f9f20
--- /dev/null
+++ b/static/hl/highlight-ln.min.js
@@ -0,0 +1 @@
+!function(r,o){"use strict";var e,i="hljs-ln",l="hljs-ln-line",h="hljs-ln-code",s="hljs-ln-numbers",c="hljs-ln-n",m="data-line-number",a=/\r\n|\r|\n/g;function u(e){for(var n=e.toString(),t=e.anchorNode;"TD"!==t.nodeName;)t=t.parentNode;for(var r=e.focusNode;"TD"!==r.nodeName;)r=r.parentNode;var o=parseInt(t.dataset.lineNumber),a=parseInt(r.dataset.lineNumber);if(o==a)return n;var i,l=t.textContent,s=r.textContent;for(a<o&&(i=o,o=a,a=i,i=l,l=s,s=i);0!==n.indexOf(l);)l=l.slice(1);for(;-1===n.lastIndexOf(s);)s=s.slice(0,-1);for(var c=l,u=function(e){for(var n=e;"TABLE"!==n.nodeName;)n=n.parentNode;return n}(t),d=o+1;d<a;++d){var f=p('.{0}[{1}="{2}"]',[h,m,d]);c+="\n"+u.querySelector(f).textContent}return c+="\n"+s}function n(e){try{var n=o.querySelectorAll("code.hljs,code.nohighlight");for(var t in n)n.hasOwnProperty(t)&&(n[t].classList.contains("nohljsln")||d(n[t],e))}catch(e){r.console.error("LineNumbers error: ",e)}}function d(e,n){"object"==typeof e&&r.setTimeout(function(){e.innerHTML=f(e,n)},0)}function f(e,n){var t,r,o=(t=e,{singleLine:function(e){return!!e.singleLine&&e.singleLine}(r=(r=n)||{}),startFrom:function(e,n){var t=1;isFinite(n.startFrom)&&(t=n.startFrom);var r=function(e,n){return e.hasAttribute(n)?e.getAttribute(n):null}(e,"data-ln-start-from");return null!==r&&(t=function(e,n){if(!e)return n;var t=Number(e);return isFinite(t)?t:n}(r,1)),t}(t,r)});return function e(n){var t=n.childNodes;for(var r in t){var o;t.hasOwnProperty(r)&&(o=t[r],0<(o.textContent.trim().match(a)||[]).length&&(0<o.childNodes.length?e(o):v(o.parentNode)))}}(e),function(e,n){var t=g(e);""===t[t.length-1].trim()&&t.pop();if(1<t.length||n.singleLine){for(var r="",o=0,a=t.length;o<a;o++)r+=p('<tr><td class="{0} {1}" {3}="{5}"><div class="{2}" {3}="{5}"></div></td><td class="{0} {4}" {3}="{5}">{6}</td></tr>',[l,s,c,m,h,o+n.startFrom,0<t[o].length?t[o]:" "]);return p('<table class="{0}">{1}</table>',[i,r])}return e}(e.innerHTML,o)}function v(e){var n=e.className;if(/hljs-/.test(n)){for(var t=g(e.innerHTML),r=0,o="";r<t.length;r++){o+=p('<span class="{0}">{1}</span>\n',[n,0<t[r].length?t[r]:" "])}e.innerHTML=o.trim()}}function g(e){return 0===e.length?[]:e.split(a)}function p(e,t){return e.replace(/\{(\d+)\}/g,function(e,n){return void 0!==t[n]?t[n]:e})}r.hljs?(r.hljs.initLineNumbersOnLoad=function(e){"interactive"===o.readyState||"complete"===o.readyState?n(e):r.addEventListener("DOMContentLoaded",function(){n(e)})},r.hljs.lineNumbersBlock=d,r.hljs.lineNumbersValue=function(e,n){if("string"!=typeof e)return;var t=document.createElement("code");return t.innerHTML=e,f(t,n)},(e=o.createElement("style")).type="text/css",e.innerHTML=p(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[i,c,m]),o.getElementsByTagName("head")[0].appendChild(e)):r.console.error("highlight.js not detected!"),document.addEventListener("copy",function(e){var n,t=window.getSelection();!function(e){for(var n=e;n;){if(n.className&&-1!==n.className.indexOf("hljs-ln-code"))return 1;n=n.parentNode}}(t.anchorNode)||(n=-1!==window.navigator.userAgent.indexOf("Edge")?u(t):t.toString(),e.clipboardData.setData("text/plain",n),e.preventDefault())})}(window,document);
\ No newline at end of file