Fix overflow issue

assets/js/main.js

@@ -45,8 +45,8 @@ const throttle = (callback, limit) => {
         timeoutHandler = null;
       }, limit);
     }
-  };
-};
+  }
+}
 
 // addEventListener Helper
 //
@@ -60,13 +60,26 @@ const listen = (ele, e, callback) => {
  * Functions
  */
 
-const toggleToc = () => {
+// Set inner width into CSS variable
+//
+function setVw() {
+  let vw = document.documentElement.clientWidth / 100;
+  document.documentElement.style.setProperty('--vw', `${vw}px`);
+}
+
+setVw();
+window.addEventListener('resize', setVw);
+
+
+// ToC toggle
+//
+function toggleToc() {
   const toc = document.getElementById('toc');
   if (toc.style.display === 'block') {
     toc.style.display = 'none';
   } else {
     toc.style.display = 'block';
-  };
+  }
 }
 
 listen ("#toc-btn", "click", toggleToc);
@@ -117,4 +130,4 @@ if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
   commentsLoader.style.display = 'block';
   loadComments();
   commentsLoaded = true;
-};
+}

assets/scss/_predefined.scss

@@ -11,7 +11,6 @@ $mono-fonts: Consolas, Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter"
 //
 @mixin stylized-link {
   a {
-    word-wrap: break-word;
     text-decoration: none;
     border: none;
     box-shadow: inset 0 -4px 0 $accent;

assets/scss/partials/_single.scss

@@ -49,6 +49,7 @@
 
 .content {
   text-justify: inter-ideograph; //For IE/Edge
+  overflow-wrap: break-word;
 
   @include stylized-link;
 
@@ -59,11 +60,12 @@
     height: auto;
     margin: 0;
     text-align: center;
-    p {
-      font-size: .8em;
-      font-style: italic;
-      color: var(--c-txt-alt);
-    }
+  }
+  figcaption > p {
+    margin-top: .5em;
+    font-size: .8em;
+    font-style: italic;
+    color: var(--c-txt-alt);
   }
 
   figure.left {
@@ -77,7 +79,7 @@
     max-width: 50%;
   }
   figure.big {
-    width: 100vw;
+    width: calc(var(--vw) * 100);
     margin-left: -1em;
   }
 

assets/scss/style.scss

@@ -2,6 +2,7 @@
 
 :root {
   --offset: 0;
+  --vw: 1vw;
 }
 
 html {
@@ -64,7 +65,6 @@ code {
   border-radius: 3px;
   padding: 0 3px;
   margin: 0 4px;
-  word-break: break-all;
   letter-spacing: normal;
 }
 
@@ -251,7 +251,7 @@ h1#page-title {
     display: flex;
   }
   .content figure.big {
-    margin-left: calc(390px - 50vw - 1em);
+    margin-left: calc(390px - var(--vw) * 50 - 1em);
   }
 }
 
@@ -270,7 +270,7 @@ h1#page-title {
     display: flex;
   }
   .content figure.big {
-    margin-left: calc(490px - 50vw - 1em);
+    margin-left: calc(490px - var(--vw) * 50 - 1em);
   }
 }
 
@@ -322,7 +322,7 @@ h1#page-title {
     }
   }
   .content figure.big {
-    width: calc(100vw - var(--offset) - 1em);
+    width: calc(var(--vw) * 100 - var(--offset) - 1em);
     margin-left: 0;
     text-align: left;
     &>img {

layouts/_default/baseof.html

@@ -37,7 +37,17 @@
 	<div id="bg-img"></div>
 	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
 	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
-	{{ template "_internal/google_analytics_async.html" . }}
+	{{ with .Site.GoogleAnalytics -}}
+	<script>
+		(function(e,t,n,i,s,a,c){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)}
+		;a=t.createElement(i);c=t.getElementsByTagName(i)[0];a.async=true;a.src=s
+		;c.parentNode.insertBefore(a,c)
+		})(window,document,"galite","script","/js/ga-lite.min.js");
+
+		galite('create', '{{.}}', 'auto');
+		galite('send', 'pageview');
+	</script>
+	{{ end -}}
 	<script src="/js/instant.page-5.1.0.js" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
 </body>