diff --git a/assets/scss/components/_syntax.scss b/assets/scss/components/_syntax.scss index 42218a4..a319d88 100644 --- a/assets/scss/components/_syntax.scss +++ b/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) } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index d0cb988..95df404 100644 --- a/assets/scss/main.scss +++ b/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 { diff --git a/assets/typescript/main.ts b/assets/typescript/main.ts index 2122d0b..5a91f85 100644 --- a/assets/typescript/main.ts +++ b/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,7 +15,7 @@ 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 @@ -23,17 +23,17 @@ function initializeTheme() { 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];