Fixed mobile styling issues

assets/scss/components/_syntax.scss

@@ -112,6 +112,10 @@ pre.block {
   border: 1px solid var(--border-color);
 }
 
+pre {
+  overflow: auto;
+}
+
 /* Background */ .chroma { color: var(--syntax-foreground); background-color: var(--syntax-background) }
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err { color: var(--syntax-error); background-color: var(--syntax-background) }

assets/scss/main.scss

@@ -74,7 +74,13 @@
 
 
 section.copyright {
-  margin-bottom: 50rem;
+  margin-bottom: 10rem;
+}
+
+@include small-breakpoint {
+  section.copyright {
+    margin-bottom: 50rem;
+  }
 }
 
 img.center {

assets/typescript/main.ts

@@ -5,7 +5,7 @@
  */
 
 
-function updateTheme(isDark:boolean) {
+function updateTheme(isDark: boolean) {
     document.documentElement.classList.toggle('light-theme', !isDark);
     sessionStorage.setItem('theme', isDark ? 'dark' : 'light');
 }
@@ -15,25 +15,25 @@ function initializeTheme() {
     let theme = sessionStorage.getItem('theme');
     let isDark = true;
     if (theme !== null && theme === 'light') {
-      isDark = false;
+        isDark = false;
     }
 
     // Use user's default theme if one is not specified
     if (theme === null && window.matchMedia) {
         const darkSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         darkSchemeMediaQuery.addEventListener('change', (e) => updateTheme(e.matches));
         updateTheme(darkSchemeMediaQuery.matches);
-      } else {
+    } else {
         updateTheme(isDark)
-      }
+    }
 
-      let toggle: HTMLDivElement = document.querySelector('.nav-theme');
-      toggle.onclick = (event) => {
+    let toggle: HTMLDivElement = document.querySelector('.nav-theme');
+    toggle.onclick = (event) => {
         updateTheme(!(sessionStorage.getItem('theme') === 'dark'));
         event.preventDefault();
         event.stopPropagation();
-      };
-      
+    };
+
 }
 
 /*
@@ -45,13 +45,13 @@ window.addEventListener('load', (event) => {
 
     // Initialize nav elements and get a handle on headings
     let nav = document.querySelectorAll(".aside-li") as unknown as HTMLElement[];
-    let headings : HTMLElement[] = [];
-    for( let i = 0; i < nav.length; i++) {
-        let li= nav[i] as HTMLElement;
+    let headings: HTMLElement[] = [];
+    for (let i = 0; i < nav.length; i++) {
+        let li = nav[i] as HTMLElement;
         headings.push(document.getElementById(li.dataset["anchor"]));
     }
 
-    let active : HTMLElement = null;
+    let active: HTMLElement = null;
     let margin = 24
 
     function scrollHandler() {
@@ -60,7 +60,7 @@ window.addEventListener('load', (event) => {
         if (Math.ceil(window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
 
             // remove active stylings
-            if( active != null ) {
+            if (active != null) {
                 active.classList.remove('active')
             }
 
@@ -73,23 +73,23 @@ window.addEventListener('load', (event) => {
         let i = 0;
         let position = -1;
         let heading = null;
-        
+
         // loop through the headings 
-        for( i = 0; i < headings.length; i++ ) {
+        for (i = 0; i < headings.length; i++) {
             heading = headings[i];
             position = heading.getBoundingClientRect().top;
-            if( position >= margin ) {
+            if (position >= margin) {
                 break;
             }
         }
 
         // remove active styling
-        if( active != null ) {
+        if (active != null) {
             active.classList.remove('active')
         }
-        
-         // check if we are at the top of the document
-        if( i <= 0 ) {
+
+        // check if we are at the top of the document
+        if (i <= 0) {
             active = undefined;
         } else {
             active = nav[i - 1];