From 4ddd503616e406256c55ad7fa0c01d24205c6148 Mon Sep 17 00:00:00 2001 From: DashCampbell Date: Fri, 29 Dec 2023 16:17:03 -0700 Subject: [PATCH 1/4] Updated search menu and toolbar --- content/temp_index.json | 93 ++++++ themes/zettels/assets/js/search.js | 313 ++++++++++--------- themes/zettels/assets/js/thumbnails.js | 30 +- themes/zettels/layouts/partials/search.html | 233 +++++++------- themes/zettels/layouts/partials/toolbar.html | 77 +++-- 5 files changed, 444 insertions(+), 302 deletions(-) create mode 100644 content/temp_index.json diff --git a/content/temp_index.json b/content/temp_index.json new file mode 100644 index 0000000..65874e8 --- /dev/null +++ b/content/temp_index.json @@ -0,0 +1,93 @@ +{ + "index": [ + { + "permalink": "/heaviside-unit-step-function-lec-18.html", + "summary": "We got a joke! Heaviside (British electrician) was told during a …", + "tags": [ + "\n#heaviside", + " #mouc", + " #voparam", + "\n#ex", + " #heaviside", + "\n#end" + ], + "thumbnail": "", + "title": "(Heaviside) Unit step function (lec 18)" + }, + { + "permalink": "/bernoulli-equations-lec-3.html", + "summary": "Bernoulli's equation: $$\\frac{ dy }{ dx } +P(x)y=Q(x)y^n \\quad\\quad …", + "tags": [ + " #de_b_type1", + " #de_s_type1", + "\n#ex", + "\n#end" + ], + "thumbnail": "", + "title": "Bernoulli equations (lec 3)" + }, + { + "permalink": "/cauchy-euler-equations-lec-10-11.html", + "summary": "We know how to solve second order equations where a, b, c are …", + "tags": [ + "\n#cauchy-euler", + " #remember", + "\n#ex", + " #second_order", + " #second_order_nonhomogenous", + " #cauchy-euler", + "\n#end", + " #start" + ], + "thumbnail": "", + "title": "Cauchy-Euler equations (lec 10-11)" + }, + { + "permalink": "/convolution-lec-19-20.html", + "summary": "Convolution #convolution A convolution is an operation on two …", + "tags": [ + "\n#convolution", + "\n#end", + " #start", + "\n#ex", + " #convolution", + " #inv_LT", + " #partial_fractions", + " #remember", + " #IVP", + " #integral-differential" + ], + "thumbnail": "", + "title": "Convolution (lec 19-20)" + }, + { + "permalink": "/dirak-%CE%B4-function-lec-21.html", + "summary": "#start of lec 21 From newton's second law: $ma=F$ …", + "tags": [ + "\n#start", + "\n#dirak_delta", + "\n#ex", + " #second_order_nonhomogenous", + " #dirak_delta", + " #IVP", + " #voparam" + ], + "thumbnail": "drawings/Drawing-2023-10-25-13.16.20.excalidraw.png", + "title": "Dirak δ-function (lec 21)" + }, + { + "permalink": "/drawings/2023-12-06-13.14.28.excalidraw.html", + "summary": "==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this …", + "tags": [], + "thumbnail": "", + "title": "2023-12-06-13.14.28.excalidraw" + }, + { + "permalink": "/drawings/2023-12-18-16.29.58.excalidraw.html", + "summary": "==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this …", + "tags": [], + "thumbnail": "", + "title": "2023-12-18-16.29.58.excalidraw" + } + ] +} \ No newline at end of file diff --git a/themes/zettels/assets/js/search.js b/themes/zettels/assets/js/search.js index 7feeed8..de51ea7 100644 --- a/themes/zettels/assets/js/search.js +++ b/themes/zettels/assets/js/search.js @@ -3,7 +3,7 @@ loadIndex() // Highlight with jQuery // from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js // @todo: This is the only use of jQuery. Find a vanila JS way -jQuery.fn.highlight = function(pat) { +jQuery.fn.highlight = function (pat) { function innerHighlight(node, pat) { @@ -15,16 +15,16 @@ jQuery.fn.highlight = function(pat) { if (pos >= 0) { - var spannode = document.createElement('span'); + var spannode = document.createElement('span'); spannode.className = 'highlighted'; - var middlebit = node.splitText(pos); - var endbit = middlebit.splitText(pat.length); - var middleclone = middlebit.cloneNode(true); + var middlebit = node.splitText(pos); + var endbit = middlebit.splitText(pat.length); + var middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode, middlebit); - skip = 1; + skip = 1; } @@ -41,15 +41,15 @@ jQuery.fn.highlight = function(pat) { } - return this.each(function() { + return this.each(function () { innerHighlight(this, pat.toUpperCase()); }); - }; +}; -jQuery.fn.removeHighlight = function() { +jQuery.fn.removeHighlight = function () { function newNormalize(node) { @@ -71,7 +71,7 @@ jQuery.fn.removeHighlight = function() { if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; - new_node = node.ownerDocument.createTextNode(combined_text); + new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); @@ -83,7 +83,7 @@ jQuery.fn.removeHighlight = function() { } - return this.find("span.highlighted").each(function() { + return this.find("span.highlighted").each(function () { var thisParent = this.parentNode; thisParent.replaceChild(this.firstChild, this); @@ -93,9 +93,9 @@ jQuery.fn.removeHighlight = function() { }; -$(function() { +$(function () { - $('#search-input').bind('keyup change', function(ev) { + $('#search-input').bind('keyup change', function (ev) { // pull in the new value var searchTerm = $(this).val(); @@ -104,64 +104,72 @@ $(function() { $('body').removeHighlight(); // disable highlighting if empty - if ( searchTerm ) { + if (searchTerm) { // highlight the new term - $('body').highlight( searchTerm ); + $('body').highlight(searchTerm); } - }); - }); /// var scrollTop = 0 -document.addEventListener("turbolinks:before-render", function() { - var search_index = document.getElementById("search-results"); - var y = search_index.scrollTop; - scrollTop = y +document.addEventListener("turbolinks:before-render", function () { + var search_index = document.getElementById("search-results"); + var y = search_index.scrollTop; + scrollTop = y + - }) -document.addEventListener("turbolinks:render", function() { +document.addEventListener("turbolinks:render", function () { var search_index = document.getElementById("search-results"); search_index.scrollTop = scrollTop }) - -document.addEventListener("turbolinks:load", function() { + +document.addEventListener("turbolinks:load", function () { setNoteWrapperState() - - + + const current = window.location.href - - var els = document.getElementsByTagName("a"); - for (var i = 0, l = els.length; i < l; i++) { - var el = els[i]; - - if (el.href === current) { - el.classList.add("selected") - } else { - el.classList.remove("selected") - } - } + var els = document.getElementsByTagName("a"); + for (var i = 0, l = els.length; i < l; i++) { + var el = els[i]; + + if (el.href === current) { + el.classList.add("selected") + } else { + el.classList.remove("selected") + } + } }) function loadIndex() { - fetchJSON(function(response) { - + // On localhost the root url is /MATH201 + // On sasserisop the root url is /sasserisop + const localhost = true; + const root = localhost ? "" : "/MATH201"; + + fetchJSON(function (response) { const notes = response; const search_results = document.getElementById('search-results'); const tags = document.getElementById('tags'); const current_note = window.location.href; - notes.index.forEach(note => { - const title = '

'+ note.title + '

'; + + // sorted notes by lecture number + const lecture_notes = new Map(); + const non_lecture_notes = []; + + // Fixed a bug where the search results had unwanted notes. + // The notes are now filtered first. + notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => { + const title = '

' + note.title + '

'; const summary = '
' + note.summary + '
'; - + const permalink = note.permalink - + var thumbnail = "" if (note.thumbnail === "") { thumbnail = "" @@ -175,20 +183,42 @@ function loadIndex() { // use lazy loading. thumbnail = '@attachments' } - + const tags = '' + note.tags + '' var list_content; if (current_note === permalink) { - list_content = '' + title + summary + '' + list_content = '' + title + summary + '' } else { - list_content = '' + title + summary + thumbnail + tags + '' + list_content = '' + title + summary + thumbnail + tags + '' } - + const child = document.createElement("li"); child.innerHTML = list_content; - search_results.append(child) + + // Add lecture notes to a dictionary, and then sort them by lecture number. + // second last character of the title may be first digit of lecture number + const d1 = note.title[note.title.length - 2]; + // find the lecture number, if there is one + if (/\d/.test(d1)) { + // it has a lecture number + // if the third last character is a digit, then the lecture number is 2 digits + const d2 = note.title[note.title.length - 3]; + const lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1); + lecture_notes.set(lecture_number, child); + } else { + non_lecture_notes.push(child); + } }); - + // sort notes by lecture number + const sorted_notes = new Map([...lecture_notes.entries()].sort((a, b) => (a[0] - b[0]))); + // Add sorted notes first + sorted_notes.forEach(val => { + search_results.append(val); + }); + non_lecture_notes.forEach(child => { + search_results.append(child); + }) + // @todo: wip // notes.tags.forEach(tag => { // const child = document.createElement("li"); @@ -196,20 +226,19 @@ function loadIndex() { // tags.append(child) // }); // - }); - } - - -function fetchJSON(callback) { - - const requestURL = '/MATH201/index.json'; + }, root); +} + + +function fetchJSON(callback, root) { + const requestURL = root + '/index.json'; const request = new XMLHttpRequest(); request.open('GET', requestURL, true); request.responseType = 'json'; - request.onreadystatechange = function() { - if (request.readyState === 4 && request.status === 200) { - callback(request.response); - } + request.onreadystatechange = function () { + if (request.readyState === 4 && request.status === 200) { + callback(request.response); + } }; request.send(null); } @@ -217,76 +246,76 @@ function fetchJSON(callback) { function focusTag(a) { showNav() performSearchWith(a.innerText) - + } function performSearchWith(query) { - - // document.getElementById('search-input').value = query - - var filter, ul, li, a, i, txtValue; - - filter = query.toLowerCase(); - filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); - - var re = new RegExp(filter, 'g'); - - ul = document.getElementById("search-results"); - li = ul.getElementsByTagName('li'); - for (i = 0; i < li.length; i++) { + // document.getElementById('search-input').value = query + + var filter, ul, li, a, i, txtValue; + + filter = query.toLowerCase(); + filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); + + var re = new RegExp(filter, 'g'); + + ul = document.getElementById("search-results"); + li = ul.getElementsByTagName('li'); + + for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; - + txtValue = a.textContent || a.innerText; if (txtValue.toLowerCase().indexOf(filter) > -1) { - li[i].style.display = "block"; - + li[i].style.display = "block"; + } else { - li[i].style.display = "none"; + li[i].style.display = "none"; } - } + } } function performSearch() { - - var input, filter, ul, li, a, i, txtValue; - input = document.getElementById('search-input'); - - filter = input.value.toLowerCase(); - filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); - - var re = new RegExp(filter, 'g'); - - ul = document.getElementById("search-results"); - li = ul.getElementsByTagName('li'); - for (i = 0; i < li.length; i++) { + var input, filter, ul, li, a, i, txtValue; + input = document.getElementById('search-input'); + + filter = input.value.toLowerCase(); + filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); + + var re = new RegExp(filter, 'g'); + + ul = document.getElementById("search-results"); + li = ul.getElementsByTagName('li'); + + for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; - + txtValue = a.textContent || a.innerText; if (txtValue.toLowerCase().indexOf(filter) > -1) { - li[i].style.display = "block"; - + li[i].style.display = "block"; + } else { - li[i].style.display = "none"; + li[i].style.display = "none"; } - } + } } // Keyboard shortcuts -document.addEventListener('keydown', function(evt) { - +document.addEventListener('keydown', function (evt) { + if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) { document.getElementById("search-input").focus(); handleNavVisibility() } - + if (evt.key === "Escape" || evt.key === "Esc" | evt.keyCode === 27) { hideNav() } - + }); var nav_is_visible = false; @@ -300,13 +329,13 @@ function handleNavVisibility() { } function showNav() { - + document.getElementById("search").style.width = "300px"; document.getElementById("search").style.opacity = 1; document.getElementById("search-header").style.opacity = 1; document.getElementById("search-header").style.width = "299px"; pushNoteWrapper() - + nav_is_visible = true; } @@ -315,9 +344,9 @@ function hideNav() { document.getElementById("search-header").style.width = "0"; document.getElementById("search").style.opacity = 0; document.getElementById("search-header").style.opacity = 0; - document.getElementById("main").style.marginLeft= "0"; + document.getElementById("main").style.marginLeft = "0"; pullNoteWrapper() - + nav_is_visible = false; } @@ -344,54 +373,54 @@ const hoverTime = 300 const fetchers = {} const doc = document.implementation.createHTMLDocument('prefetch') -function fetchPage (url, success) { - const xhr = new XMLHttpRequest() - xhr.open('GET', url) - xhr.setRequestHeader('VND.PREFETCH', 'true') - xhr.setRequestHeader('Accept', 'text/html') - xhr.onreadystatechange = () => { - if (xhr.readyState !== XMLHttpRequest.DONE) return - if (xhr.status !== 200) return - success(xhr.responseText) - } - xhr.send() +function fetchPage(url, success) { + const xhr = new XMLHttpRequest() + xhr.open('GET', url) + xhr.setRequestHeader('VND.PREFETCH', 'true') + xhr.setRequestHeader('Accept', 'text/html') + xhr.onreadystatechange = () => { + if (xhr.readyState !== XMLHttpRequest.DONE) return + if (xhr.status !== 200) return + success(xhr.responseText) + } + xhr.send() } -function prefetchTurbolink (url) { - fetchPage(url, responseText => { - doc.open() - doc.write(responseText) - doc.close() - const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement) - Turbolinks.controller.cache.put(url, snapshot) - }) +function prefetchTurbolink(url) { + fetchPage(url, responseText => { + doc.open() + doc.write(responseText) + doc.close() + const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement) + Turbolinks.controller.cache.put(url, snapshot) + }) } -function prefetch (url) { - if (prefetched(url)) return - prefetchTurbolink(url) +function prefetch(url) { + if (prefetched(url)) return + prefetchTurbolink(url) } -function prefetched (url) { - return location.href === url || Turbolinks.controller.cache.has(url) +function prefetched(url) { + return location.href === url || Turbolinks.controller.cache.has(url) } -function prefetching (url) { - return !!fetchers[url] +function prefetching(url) { + return !!fetchers[url] } -function cleanup (event) { - const element = event.target - clearTimeout(fetchers[element.href]) - element.removeEventListener('mouseleave', cleanup) +function cleanup(event) { + const element = event.target + clearTimeout(fetchers[element.href]) + element.removeEventListener('mouseleave', cleanup) } document.addEventListener('mouseover', event => { - if (!event.target.dataset.prefetch) return - const url = event.target.href - if (prefetched(url)) return - if (prefetching(url)) return - cleanup(event) - event.target.addEventListener('mouseleave', cleanup) - fetchers[url] = setTimeout(() => prefetch(url), hoverTime) + if (!event.target.dataset.prefetch) return + const url = event.target.href + if (prefetched(url)) return + if (prefetching(url)) return + cleanup(event) + event.target.addEventListener('mouseleave', cleanup) + fetchers[url] = setTimeout(() => prefetch(url), hoverTime) }) diff --git a/themes/zettels/assets/js/thumbnails.js b/themes/zettels/assets/js/thumbnails.js index 604e9b6..2b0125a 100644 --- a/themes/zettels/assets/js/thumbnails.js +++ b/themes/zettels/assets/js/thumbnails.js @@ -1,19 +1,13 @@ -var thumbnail_mode = false -function imageMode() { - const note_wrapper = document.getElementById('note-wrapper') - const images = note_wrapper.getElementsByTagName('img') - - if (thumbnail_mode) { - var els = note_wrapper.getElementsByTagName('img') - for(var i = 0, all = els.length; i < all; i++){ - els[i].classList.remove('thumbnail'); - } - thumbnail_mode = false - } else { - var els = note_wrapper.getElementsByTagName('img') - for(var i = 0, all = els.length; i < all; i++){ - els[i].classList.add('thumbnail'); - } - thumbnail_mode = true - } +// Resize images using an input range. +function resizeImage() { + // make p tags wrapping img tags inline, to resize images correctly + $("#main p").has("img").css("display", "inline-block"); + + // toggle vectical input range + $("#toolbar input[type=range][orient=vertical]").slideToggle() + + // resize image + $("#toolbar input[type=range][orient=vertical]").mouseup(function () { + $("#main p img").css("width", this.value + "%") + }); } \ No newline at end of file diff --git a/themes/zettels/layouts/partials/search.html b/themes/zettels/layouts/partials/search.html index 33254ae..3c85f1c 100644 --- a/themes/zettels/layouts/partials/search.html +++ b/themes/zettels/layouts/partials/search.html @@ -6,130 +6,141 @@ - Focused current note --> + color: var(--text-base-color); + border-bottom: 1px solid var(--separator-color); + border-left: 6px solid var(--background-search); + + } + + #search-results a:first-child:hover, + a:first-child:focus, + .selected { + outline: 0; + background-color: var(--note-table-cell-selected-color); + border-left: 6px solid var(--note-table-cell-ribbon-color) !important; + } + + /* // Reseting default styles inside search component scope */ + #search-results li { + text-indent: 0; + } + + #search-results li:before, + #search-results h1:before, + #search-results h2:before, + #search-results h3:before, + #search-results h4:before, + #search-results h5:before, + #search-results h6:before { + content: ""; + visibility: hidden; + display: none; + } + -
-
- - - - - - -
-
- - +
+
+ + + + + + +
+
+ + \ No newline at end of file diff --git a/themes/zettels/layouts/partials/toolbar.html b/themes/zettels/layouts/partials/toolbar.html index 2a95058..7b85e76 100644 --- a/themes/zettels/layouts/partials/toolbar.html +++ b/themes/zettels/layouts/partials/toolbar.html @@ -1,42 +1,57 @@ - - \ No newline at end of file + + + + \ No newline at end of file From 6a0094f858412aba8d7ef3fe8a3cab144820126a Mon Sep 17 00:00:00 2001 From: DashCampbell Date: Fri, 29 Dec 2023 20:05:27 -0700 Subject: [PATCH 2/4] Updated UI --- README.md | 5 +- content/temp_index.json | 93 -------- ...s_f120a3f402b106f64b18d498afd3d82e.content | 177 ++++++++++++-- themes/zettels/assets/css/style.scss | 225 +++++++++++++++--- themes/zettels/assets/js/search.js | 13 +- themes/zettels/assets/js/thumbnails.js | 5 +- themes/zettels/layouts/partials/search.html | 8 +- themes/zettels/layouts/partials/toolbar.html | 7 +- 8 files changed, 361 insertions(+), 172 deletions(-) delete mode 100644 content/temp_index.json diff --git a/README.md b/README.md index 79186a6..8098d6c 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,9 @@ Yes. Consider sharing it with your classmates ;) Here's a quick rundown of how to build from source: 1) download or clone the repository ```git clone https://git.sasserisop.com/Sasserisop/MATH201``` 2) make sure you have hugo installed -3) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender``` -4) visit your site by opening http://localhost:1313 on your browser. +3) if you are using localhost, inside of themes/zettels/assets/js/search.js set 'const localhost' to false. +4) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender``` +5) visit your site by opening http://localhost:1313 on your browser. Now if you want to host it on a live website, you can run: ```hugo``` diff --git a/content/temp_index.json b/content/temp_index.json deleted file mode 100644 index 65874e8..0000000 --- a/content/temp_index.json +++ /dev/null @@ -1,93 +0,0 @@ -{ - "index": [ - { - "permalink": "/heaviside-unit-step-function-lec-18.html", - "summary": "We got a joke! Heaviside (British electrician) was told during a …", - "tags": [ - "\n#heaviside", - " #mouc", - " #voparam", - "\n#ex", - " #heaviside", - "\n#end" - ], - "thumbnail": "", - "title": "(Heaviside) Unit step function (lec 18)" - }, - { - "permalink": "/bernoulli-equations-lec-3.html", - "summary": "Bernoulli's equation: $$\\frac{ dy }{ dx } +P(x)y=Q(x)y^n \\quad\\quad …", - "tags": [ - " #de_b_type1", - " #de_s_type1", - "\n#ex", - "\n#end" - ], - "thumbnail": "", - "title": "Bernoulli equations (lec 3)" - }, - { - "permalink": "/cauchy-euler-equations-lec-10-11.html", - "summary": "We know how to solve second order equations where a, b, c are …", - "tags": [ - "\n#cauchy-euler", - " #remember", - "\n#ex", - " #second_order", - " #second_order_nonhomogenous", - " #cauchy-euler", - "\n#end", - " #start" - ], - "thumbnail": "", - "title": "Cauchy-Euler equations (lec 10-11)" - }, - { - "permalink": "/convolution-lec-19-20.html", - "summary": "Convolution #convolution A convolution is an operation on two …", - "tags": [ - "\n#convolution", - "\n#end", - " #start", - "\n#ex", - " #convolution", - " #inv_LT", - " #partial_fractions", - " #remember", - " #IVP", - " #integral-differential" - ], - "thumbnail": "", - "title": "Convolution (lec 19-20)" - }, - { - "permalink": "/dirak-%CE%B4-function-lec-21.html", - "summary": "#start of lec 21 From newton's second law: $ma=F$ …", - "tags": [ - "\n#start", - "\n#dirak_delta", - "\n#ex", - " #second_order_nonhomogenous", - " #dirak_delta", - " #IVP", - " #voparam" - ], - "thumbnail": "drawings/Drawing-2023-10-25-13.16.20.excalidraw.png", - "title": "Dirak δ-function (lec 21)" - }, - { - "permalink": "/drawings/2023-12-06-13.14.28.excalidraw.html", - "summary": "==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this …", - "tags": [], - "thumbnail": "", - "title": "2023-12-06-13.14.28.excalidraw" - }, - { - "permalink": "/drawings/2023-12-18-16.29.58.excalidraw.html", - "summary": "==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this …", - "tags": [], - "thumbnail": "", - "title": "2023-12-18-16.29.58.excalidraw" - } - ] -} \ No newline at end of file diff --git a/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content b/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content index a485d54..c0c1913 100644 --- a/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content +++ b/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content @@ -26,7 +26,87 @@ input[type="submit"] { Bear base styles (Retrieved from official app, all credits belong to Bear Team) */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; padding: 0; border: 0; @@ -37,29 +117,48 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq html { line-height: 1; } -ol, ul { +ol, +ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } -caption, th, td { +caption, +th, +td { text-align: left; font-weight: normal; vertical-align: middle; } -q, blockquote { +q, +blockquote { quotes: none; } -q:before, q:after, blockquote:before, blockquote:after { +q:before, +q:after, +blockquote:before, +blockquote:after { content: ""; content: none; } a img { border: none; } -article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { display: block; } * { @@ -80,7 +179,8 @@ body { background: var(--background); color: var(--text-base-color); text-rendering: optimizeLegibility; - font-family: "AvenirNext-Regular"; } + font-family: "AvenirNext-Regular"; + position: relative; } a { color: var(--link-text-color); @@ -117,10 +217,14 @@ hr { background-color: #dedede; margin: -1px auto 1.57143em auto; } -ul, ol { +ul, +ol { margin-bottom: .31429em; } -ul ul, ul ol, ol ul, ol ol { +ul ul, +ul ol, +ol ul, +ol ol { margin-bottom: 0px; } ol { @@ -135,11 +239,13 @@ ol li:before { min-width: 1em; margin-right: 0.5em; } -b, strong { +b, +strong { font-family: "Menlo-Regular"; font-weight: bold; } -i, em { +i, +em { font-family: "Menlo-Regular"; font-style: italic; } @@ -151,22 +257,48 @@ code { text-overflow: ellipsis; white-space: nowrap; } -.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted { +.sf_code_string, +.sf_code_selector, +.sf_code_attr-name, +.sf_code_char, +.sf_code_builtin, +.sf_code_inserted { color: #D33905; } -.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata { +.sf_code_comment, +.sf_code_prolog, +.sf_code_doctype, +.sf_code_cdata { color: #838383; } -.sf_code_number, .sf_code_boolean { +.sf_code_number, +.sf_code_boolean { color: #0E73A2; } -.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation { +.sf_code_keyword, +.sf_code_atrule, +.sf_code_rule, +.sf_code_attr-value, +.sf_code_function, +.sf_code_class-name, +.sf_code_class, +.sf_code_regex, +.sf_code_important, +.sf_code_variable, +.sf_code_interpolation { color: #0E73A2; } -.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted { +.sf_code_property, +.sf_code_tag, +.sf_code_constant, +.sf_code_symbol, +.sf_code_deleted { color: #1B00CE; } -.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url { +.sf_code_macro, +.sf_code_entity, +.sf_code_operator, +.sf_code_url { color: #920448; } .note-wrapper { @@ -367,7 +499,12 @@ svg + ol { * + h4 { margin-top: 2.8em; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { position: relative; } h1:before, @@ -458,3 +595,7 @@ li img { .turbolinks-progress-bar { visibility: hidden; } + +@media only screen and (max-width: 460px) { + main .note-wrapper { + padding: 1.57143em 1.1em; } } diff --git a/themes/zettels/assets/css/style.scss b/themes/zettels/assets/css/style.scss index 0ab9b98..61e6bc5 100644 --- a/themes/zettels/assets/css/style.scss +++ b/themes/zettels/assets/css/style.scss @@ -1,4 +1,3 @@ - input { margin: 0; padding: 0; @@ -6,32 +5,113 @@ input { font: inherit; color: inherit; font-size: 100%; - vertical-align: baseline + vertical-align: baseline } *:focus { outline: none; } - + textarea, input[type="search"], input[type="text"], input[type="button"], input[type="submit"] { - -webkit-appearance: none; - border-radius: 0; + -webkit-appearance: none; + border-radius: 0; } + // @todo: class ::selection { - background: var(--selected-text-background-color); - } + background: var(--selected-text-background-color); +} /** Bear base styles (Retrieved from official app, all credits belong to Bear Team) */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; padding: 0; border: 0; @@ -44,7 +124,8 @@ html { line-height: 1 } -ol, ul { +ol, +ul { list-style: none } @@ -53,17 +134,23 @@ table { border-spacing: 0 } -caption, th, td { +caption, +th, +td { text-align: left; font-weight: normal; vertical-align: middle } -q, blockquote { +q, +blockquote { quotes: none } -q:before, q:after, blockquote:before, blockquote:after { +q:before, +q:after, +blockquote:before, +blockquote:after { content: ""; content: none } @@ -71,7 +158,20 @@ q:before, q:after, blockquote:before, blockquote:after { a img { border: none } -article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { display: block } @@ -97,7 +197,8 @@ body { // @todo: not working color: var(--text-base-color); text-rendering: optimizeLegibility; - font-family: "AvenirNext-Regular" + font-family: "AvenirNext-Regular"; + position: relative; } a { @@ -141,11 +242,15 @@ hr { margin: -1px auto 1.57143em auto } -ul, ol { +ul, +ol { margin-bottom: .31429em; } -ul ul, ul ol, ol ul, ol ol { +ul ul, +ul ol, +ol ul, +ol ol { margin-bottom: 0px } @@ -163,13 +268,15 @@ ol li:before { margin-right: 0.5em } -b, strong { +b, +strong { //font-family: "AvenirNext-Bold"; font-family: "Menlo-Regular"; font-weight: bold; } -i, em { +i, +em { //font-family: "AvenirNext-Italic"; font-family: "Menlo-Regular"; font-style: italic; @@ -185,27 +292,53 @@ code { white-space: nowrap } -.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted { +.sf_code_string, +.sf_code_selector, +.sf_code_attr-name, +.sf_code_char, +.sf_code_builtin, +.sf_code_inserted { color: #D33905 } -.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata { +.sf_code_comment, +.sf_code_prolog, +.sf_code_doctype, +.sf_code_cdata { color: #838383 } -.sf_code_number, .sf_code_boolean { +.sf_code_number, +.sf_code_boolean { color: #0E73A2 } -.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation { +.sf_code_keyword, +.sf_code_atrule, +.sf_code_rule, +.sf_code_attr-value, +.sf_code_function, +.sf_code_class-name, +.sf_code_class, +.sf_code_regex, +.sf_code_important, +.sf_code_variable, +.sf_code_interpolation { color: #0E73A2 } -.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted { +.sf_code_property, +.sf_code_tag, +.sf_code_constant, +.sf_code_symbol, +.sf_code_deleted { color: #1B00CE } -.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url { +.sf_code_macro, +.sf_code_entity, +.sf_code_operator, +.sf_code_url { color: #920448 } @@ -221,7 +354,7 @@ code { u { text-decoration: underline; - background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,var(--accent-text-color) 50%); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--accent-text-color) 50%); background-repeat: repeat-x; background-size: 2px 2px; background-position: 0 1.05em @@ -339,7 +472,7 @@ blockquote { .address a { color: #545454; - background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,#0da35e 50%); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #0da35e 50%); background-repeat: repeat-x; background-size: 2px 2px; background-position: 0 1.05em @@ -356,7 +489,7 @@ blockquote { display: inline-block; width: 1em; height: 1em; - border: solid 1px rgba(0,0,0,0.3); + border: solid 1px rgba(0, 0, 0, 0.3); border-radius: 50%; margin-right: 0.1em; position: relative; @@ -415,7 +548,7 @@ img { // Hugo renders footnotes with

tags nested inside

  • // This is need to prevent

    breaking lines -li > p { +li>p { display: inline-block; margin-left: 16px; } @@ -434,25 +567,30 @@ h4 { margin-bottom: .47143em } -* + p, -* + ul, -* + ol, -* + blockquote { +*+p, +*+ul, +*+ol, +*+blockquote { /*margin-top: 1.6em;*/ } -svg + ul, -svg + ol { +svg+ul, +svg+ol { margin-top: 0; } -* + h2, -* + h3, -* + h4 { +*+h2, +*+h3, +*+h4 { margin-top: 2.8em; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { position: relative; } @@ -511,9 +649,10 @@ h6:before { content: "#" } -* + table { +*+table { margin-top: 12px; } + table { border-radius: 4px; border: 1px solid var(--separator-color); @@ -569,3 +708,11 @@ li img { .turbolinks-progress-bar { visibility: hidden; } + +@media only screen and (max-width: 460px) { + + // decrease padding of notes when screen width is < 460px + main .note-wrapper { + padding: 1.57143em 1.1em; + } +} \ No newline at end of file diff --git a/themes/zettels/assets/js/search.js b/themes/zettels/assets/js/search.js index de51ea7..26ae9b6 100644 --- a/themes/zettels/assets/js/search.js +++ b/themes/zettels/assets/js/search.js @@ -1,3 +1,6 @@ +// On localhost the root url is /MATH201 +// On sasserisop the root url is /sasserisop +const localhost = true; loadIndex() // Highlight with jQuery @@ -147,9 +150,6 @@ document.addEventListener("turbolinks:load", function () { }) function loadIndex() { - // On localhost the root url is /MATH201 - // On sasserisop the root url is /sasserisop - const localhost = true; const root = localhost ? "" : "/MATH201"; fetchJSON(function (response) { @@ -320,12 +320,7 @@ document.addEventListener('keydown', function (evt) { var nav_is_visible = false; function handleNavVisibility() { - if (!nav_is_visible) { - showNav(); - - } else { - hideNav() - } + $("#search").toggle("slide"); } function showNav() { diff --git a/themes/zettels/assets/js/thumbnails.js b/themes/zettels/assets/js/thumbnails.js index 2b0125a..767171a 100644 --- a/themes/zettels/assets/js/thumbnails.js +++ b/themes/zettels/assets/js/thumbnails.js @@ -4,10 +4,11 @@ function resizeImage() { $("#main p").has("img").css("display", "inline-block"); // toggle vectical input range - $("#toolbar input[type=range][orient=vertical]").slideToggle() + $("#toolbar input[type=range][orient=vertical]").slideToggle(); // resize image $("#toolbar input[type=range][orient=vertical]").mouseup(function () { - $("#main p img").css("width", this.value + "%") + $("#main p img").css("width", this.value + "%"); + this.title = this.value + "%"; }); } \ No newline at end of file diff --git a/themes/zettels/layouts/partials/search.html b/themes/zettels/layouts/partials/search.html index 3c85f1c..dee3bda 100644 --- a/themes/zettels/layouts/partials/search.html +++ b/themes/zettels/layouts/partials/search.html @@ -7,12 +7,12 @@ -->

    +{{ end }} \ No newline at end of file diff --git a/themes/zettels/layouts/partials/search.html b/themes/zettels/layouts/partials/search.html index dee3bda..d2f5444 100644 --- a/themes/zettels/layouts/partials/search.html +++ b/themes/zettels/layouts/partials/search.html @@ -33,10 +33,8 @@ } #search-header { - padding: 12px; - position: fixed; - padding-left: 12px; - padding-right: 12px; + padding: 12px 0; + margin: 0 auto; background: var(--background-search); width: 250px; opacity: 1; @@ -78,7 +76,6 @@ } #search-results { - margin-top: 50px; overflow: auto; height: 100%; } From fa560a5b29085fe99aeedbd0ed6022dfb8649e83 Mon Sep 17 00:00:00 2001 From: DashCampbell Date: Sat, 30 Dec 2023 08:50:30 -0700 Subject: [PATCH 4/4] made edits --- themes/zettels/assets/js/search.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/themes/zettels/assets/js/search.js b/themes/zettels/assets/js/search.js index b25a082..8024e7f 100644 --- a/themes/zettels/assets/js/search.js +++ b/themes/zettels/assets/js/search.js @@ -1,6 +1,6 @@ // On localhost the root url is /MATH201 // On sasserisop the root url is /sasserisop -const localhost = true; +const localhost = false; const root = localhost ? "" : "/MATH201"; loadIndex() @@ -181,14 +181,15 @@ function load_lecture_links() { const sorted_links = new Map([...lecture_links.entries()].sort((a, b) => (a[0] - b[0]))); sorted_links.forEach(val => { a_tag = document.createElement('a'); - a_tag.innerText = val[0]; - a_tag.href = val[1]; + a_tag.innerText = val[0]; //title + a_tag.href = val[1]; //permalink p_tag = document.createElement('p'); p_tag.append(a_tag); p_tag.className = "lecture-link" + // Add lecture notes before third
    tag in _index.md $("#note-wrapper br:nth-of-type(3)").before(p_tag); }); - }, root); + }); } } function loadIndex() { @@ -228,9 +229,9 @@ function loadIndex() { const tags = '' + note.tags + '' var list_content; if (current_note === permalink) { - list_content = '' + title + summary + '' + list_content = '' + title + summary + '' } else { - list_content = '' + title + summary + thumbnail + tags + '' + list_content = '' + title + summary + thumbnail + tags + '' } const child = document.createElement("li"); @@ -272,11 +273,11 @@ function loadIndex() { // tags.append(child) // }); // - }, root); + }); } -function fetchJSON(callback, root) { +function fetchJSON(callback) { const requestURL = root + '/index.json'; const request = new XMLHttpRequest(); request.open('GET', requestURL, true);