Mobile friendliness

Munter · Munter · commit 1ef231832f1b · 2017-12-22T07:54:02.000+01:00
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
@@ -1,5 +1,6 @@
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>{{ page.title }}</title>
   <link rel="stylesheet" href="css/normalize.css"/>
   <link rel="stylesheet" href="css/style.css"/>
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -27,11 +27,23 @@ body {
   }
 }
 
+header, #content {
+  max-width: 920px;
+  margin: 0 auto;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
 header {
-  padding: 140px 110px 0 110px;
+  padding-top: 20px;
+}
+
+#content {
+  padding-bottom: 60px;
 }
 
 #_header h1 {
+  margin-top: 0;
   margin-left: -19px;
   opacity: 0;
   animation: fadein 1s forwards;
@@ -49,10 +61,6 @@ header {
   animation: fadein 1s forwards, slideright 1s forwards;
 }
 
-#content {
-  padding: 0 110px 60px 110px;
-}
-
 #tag em {
   font-style: normal
 }
@@ -123,26 +131,17 @@ a:hover {
 ul {
   margin-top: 20px;
   padding: 0 15px;
-  width: 100%;
+  column-gap: 30px;
   column-count: 2;
   box-sizing: content-box;
 }
 
 ul li {
   margin-top: 5px;
-  margin-right: 60px;
   list-style: none;
   border-bottom: 1px solid #eee;
   padding: 5px 0;
-  column-break-inside: avoid;
-}
-
-ul::after {
-  content: '.';
-  height: 0;
-  display: block;
-  visibility: hidden;
-  clear: both;
+  break-inside: avoid;
 }
 
 code {
@@ -151,7 +150,7 @@ code {
 }
 
 pre {
-  margin: 20px;
+  margin: 20px 0;
   padding: 20px;
   border: 1px solid #ddd;
   border-bottom-color: #ccc;
@@ -162,16 +161,15 @@ pre {
 }
 
 main img:not([src*=avatar]):not([src*=badges]):not([src*=".svg"]) {
-  margin: 30px;
-  padding: 1px;
+  display: block;
+  margin: 30px auto;
   border-radius: 3px;
   box-shadow: 0 3px 10px #dedede, 0 1px 5px #888;
   max-width: 100%;
 }
 
 footer {
   background-color: #eee;
-  width: 100%;
   padding: 50px 0;
   text-align: right;
   border-top: 1px solid #ddd;
@@ -184,22 +182,22 @@ footer span {
   font-size: 0.8em;
 }
 
-@media all and (max-width: 850px) {
-  ul li {
-    width: 100%;
-  }
-}
-
 @media all and (max-width: 600px) {
   #tag {
     margin-top: 0;
     margin-left: 0;
     margin-bottom: 0;
   }
 
-  .onload #tag {
-    margin-left: 0;
+  ul {
+    column-count: 1;
+  }
+
+  pre {
+    padding: 10px;
+    margin: 20px -11px;
   }
+
 }
 
 blockquote {
diff --git a/docs/js/avatars.js b/docs/js/avatars.js
@@ -17,6 +17,7 @@
 
     for (var i = 0; i < images.length; i += 1) {
       images[i].onload = onloadHandler;
+      images[i].onerror = onloadHandler;
     }
   });
 

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@`
`17`	`17`
`18`	`18`	`for (var i = 0; i < images.length; i += 1) {`
`19`	`19`	`images[i].onload = onloadHandler;`
	`20`	`+ images[i].onerror = onloadHandler;`
`20`	`21`	`}`
`21`	`22`	`});`
`22`	`23`