Change: image width to max 100

fix the problem when use a very small low quality pic

assets/css/style.css

@@ -24,7 +24,7 @@ p {
 }
 .home-header {
     max-width: 50rem;
-    margin: 0 -1.2rem 0rem -1.2rem;
+    margin: 3rem 0;
     padding: 1.2rem;
     display: flex;
     flex-direction: column;
@@ -302,13 +302,18 @@ p {
     z-index: 2;
 }
 .pagination-nav {
-    margin: 2em 0;
+    padding: 2em 0;
     width: 100%;
     max-width: 47rem;
 }
-/* .pagination-text {
-    font-family: 'LatoLatinWebMedium';
-} */
+.pagination-text {
+	background-color: pink;
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+	box-shadow: 0 0 0.5rem;
+	text-decoration: none;
+	color: darkred;
+}
 .pagination-newer {
     float:left;
 }
@@ -377,7 +382,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 img {
     display: block;
-    width: 100%;
+    max-width: 100%;
     height: auto;
     margin: 1.5em 0;
 }

layouts/partials/head.html

@@ -23,7 +23,8 @@
     {{ partial "meta-tags.html" . }}
   {{ end -}}
   {{ with resources.Get "css/katex.css" -}}
-  <link href="{{ .Permalink }}" rel="stylesheet">
+  {{ $katexcss := resources.Get "css/katex.css" | minify }}
+  <link href="{{ $katexcss.Permalink }}" rel="stylesheet">
   {{ end -}}
   {{ $normalizeStyle := resources.Get "css/normalize.css" }}
   {{ $mainStyle := resources.Get "css/style.css" }}

layouts/partials/scripts.html

@@ -1,8 +1,10 @@
 {{ with resources.Get "js/katex.js" }}
-  <script defer src="{{ .Permalink }}"></script>
+  {{ $katexjs := resources.Get "js/katex.js" | minify }}
+  <script defer src="{{ $katexjs.Permalink }}"></script>
 {{ end }}
 {{ with resources.Get "js/auto-render.js" }}
-  <script defer src="{{ .Permalink }}" onload="renderMathInElement(document.body);"></script>
+  {{ $autorenderjs := resources.Get "js/auto-render.js" | minify }}
+  <script defer src="{{ $autorenderjs.Permalink }}" onload="renderMathInElement(document.body);"></script>
 {{ end }}
 {{ $corejs := resources.Get "js/core.js" | minify }}
 <script src="{{ $corejs.Permalink }}"></script>