(function () { 'use strict'; const stylesheet = document.querySelector("#stylesheet"); const toggleStylesheetLightButton = document.querySelector("#light"); const toggleStylesheetDarkButton = document.querySelector("#dark"); const navMenu = document.querySelector("#nav-menu"); navMenu.offsetTop; const mainPage = document.querySelector("#main-div"); const topBar = document.querySelector("#top-bar"); const lightDarkWarning = document.querySelector("#light-dark-warning"); const abnormalLogo = document.querySelector("#logo"); const abnormalLogoStylesheet = document.querySelector("#logo-stylesheet"); const footerAbnormal = document.querySelector("#footer-fourth"); const introScreen = document.querySelector("[data-intro-screen]"); const stylesheetSelector = document.createElement("div"); const previousStylesheet = document.createElement("div"); const menuButton = document.querySelector("#menu-button-open-close"); const navMobile = document.querySelector("#mobile-nav-menu"); const menuBar = document.querySelector("#mobile-menu-bar"); const pageName = document.querySelector("#page-name"); /*change prefix from "./" for test page inside the issue's folder to "./issues-number/" for root index file */ const prefix = "./156/"; const articles = { "Reincarnation Blues": [ { title: "", "sub-title": "", author: "", description: [], imgUrl: ``, link: ``, poem: false, mainImg: true, }, ], "True Tales": [ { title: "O Americano, Outra Vez!", "sub-title": "", author: "Richard P. Feynman", description: [ "One time I picked up a hitchhiker who told me how interesting South America was, and that I ought to go there. I complained that the language is different, but he said just go ahead and learn it - it’s no big problem. So I thought, that’s a good idea: I’ll go to South America.", "Cornell had some foreign language classes which followed a method used during the war, in which small groups of about ten students and one native speaker speak only the foreign language-nothing else. Since I was a rather young-looking professor there at Cornell, I decided to take the class as if I were a regular student. And since I didn’t know yet where I was going to end up in South America, I decided to take Spanish, because the great majority of the countries there speak Spanish.", "So when it was time to register for the class, we were standing outside, ready to go into the classroom, when this pneumatic blonde came along. You know how once in a while you get this feeling, WOW? She looked terrific. I said to myself, “Maybe she’s going to be in the Spanish class - that’ll be great!” But no, she walked into the Portuguese class. So I figured, What the hell - I might as well learn Portuguese.", ], imgUrl: `${prefix}richard_feynman.jpg`, link: `${prefix}feynman-brazil.html`, poem: false, mainImg: false, }, ], "Current Events": [ { title: "Bombing Muslims for Peace", "sub-title": "Isn't It Time to Put Our Toy Soldiers Away (Along with Our Illusions)?", author: "William J. Astore", description: [ "Like many American boys of the baby-boomer generation, I played “war” with those old, olive-drab, plastic toy soldiers meant to evoke our great victory over the Nazis and “the Japs” during World War II. At age 10, I also kept a scrapbook of the 1973 Yom Kippur War between Israel and its various Arab enemies in the Middle East. It was, I suppose, an early sign that I would make both the military and the study of history into careers.", "I recall rooting for the Israelis, advertised then as crucial American allies, against Egypt, Syria, and other regional enemies at least ostensibly allied with the Soviet Union in that Cold War era. I bought the prevailing narrative of a David-versus-Goliath struggle. I even got a book on the Yom Kippur War that captivated me by displaying all the weaponry the U.S. military had rushed to Israel to turn the tide there, including F-4 Phantom jets and M-60 main battle tanks. (David’s high-tech slingshots, if you will.) Little did I know that, in the next 50 years of my life, I would witness increasingly destructive U.S. military attacks in the Middle East, especially after the oil cartel OPEC (largely Middle Eastern then) hit back hard with an embargo in 1973 that sent our petroleum-based economy into a tailspin.", ], imgUrl: `${prefix}astore-bombing-image.jpg`, link: `${prefix}astore-bombing-muslims.html`, poem: false, mainImg: false, }, { title: "The Military-Industrial Complex Is the Winner (Not You)", "sub-title": "", author: "William D. Hartung", description: [ "2023 was a year marked by devastating conflicts from Russia’s ongoing invasion of Ukraine to Hamas’s horrific terror attacks on Israel, from that country’s indiscriminate mass slaughter in Gaza to a devastating civil war in Sudan. And there’s a distinct risk of even worse to come this year. Still, there was one clear winner in this avalanche of violence, suffering, and war: the U.S. military-industrial complex.", "In December, President Biden signed a record authorization of $886 billion in “national defense” spending for 2024, including funds for the Pentagon proper and work on nuclear weapons at the Department of Energy. Add to that tens of billions of dollars more in likely emergency military aid for Ukraine and Israel, and such spending could well top $900 billion for the first time this year.", "Meanwhile, the administration’s $100-billion-plus emergency military aid package that failed to pass Congress last month is likely to slip by in some form this year, while the House and Senate are almost guaranteed to add tens of billions more for “national defense” projects in specific states and districts, as happened in two of the last three years.", ], imgUrl: `${prefix}war-is-hell.jpeg`, link: `${prefix}hartung-disarming-you.html`, poem: false, mainImg: false, }, { title: "Israel, the United States, and the Rhetoric of the War on Terror", "sub-title": "From September 11, 2001, to October 7, 2023 (and Beyond)", author: "Maha Hilal", description: [ "In a New Yorker piece published five days after the attacks of September 11, 2001, American critic and public intellectual Susan Sontag wrote, “Let’s by all means grieve together. But let’s not be stupid together. A few shreds of historical awareness might help us understand what has just happened, and what may continue to happen.” Sontag’s desire to contextualize the 9/11 attacks was an instant challenge to the narratives that President George W. Bush would soon deploy, painting the United States as a country of peace and, most importantly, innocent of any wrongdoing. While the rhetorical strategies he developed to justify what came to be known as the Global War on Terror have continued to this day, they were not only eagerly embraced by Israel in 2001, they also lie at the heart of that country’s justification of the genocidal campaign that’s been waged against the Palestinian people since October 7, 2023.", ], imgUrl: `${prefix}netanyahu.jpg`, link: `${prefix}hilal-israel-terror.html`, poem: false, mainImg: false, }, ], "Children's Corner": [ { title: "The Magic Mound", "sub-title": "Chapters 12 and 13", author: "Frank Thomas Smith", description: [ "The trail became steeper and the vegetation scarcer as Sergio, Divino and Platero continued to climb. It was also much colder and the boys were grateful for their tararobes and Platero was grateful for his silver necklace. Their breath formed miniature clouds that were whisked behind them by a brisk wind. It took them three days to reach a point from where Arman's castle was visible. Divino saw it first when they woke up on the fourth morning after having separated from Tamoshot. It was wreathed in mist and blended so well into the mountain rock that less observant eyes would not have noticed it.", '"What will Arman do if he catches us?" Divino asked his brother.', '"We should have asked Tamoshot about that," Sergio answered. "It\'s too late now though, so let\'s go on."', '"I\'m afraid, Sergio."', ], imgUrl: `${prefix}magic-mound-cover.png`, link: `${prefix}magic-mound-12-13.html`, poem: false, mainImg: false, }, ], "Social Science": [ { title: "Favela children", "sub-title": "Chapter 10", author: "Ute Creamer", description: [ "October 1971", "The Spring holidays were reserved for my long overdue visit to the Vila da Fraternidade in Londrina/Paraná. For four years saudade-letters have been going back and forth, and now the legendary figure - a Rute do Jardim, Ute of the kindergarten - will appear in flesh and blood. On the one hand I am looking forward to it; on the other I am thinking: will they be disappointed when the real me stands before them, after having become idealized with time?", "I packed two huge suitcases with all the presents accumulated over four years in Germany as well as in Sao Paulo, bought my ticket, not for the bus but for a narrow-gauge railway, second class (I wanted to arrive as I had left Londrina then) and was seen off by Katerina. I remember clearly the feeling I had as I rode four years ago through the gloomy, endless outskirts of Sao Paulo and imagined how queer it must be for people loaded down with belongings and a dozen children coming from the northeast and hurled into such a confusingly enormous city and then having to adapt to an industrialized society. The first stop for most of them is the bus or train station, in which they find themselves among the crowd wrapped in rags or lying on newspapers. The second stop for many is a favela or sleeping places under bridges and underpasses.", ], imgUrl: `${prefix}favela-cover.jpg`, link: `${prefix}favela-children-10.html`, poem: false, mainImg: false, }, ], "Spiritual Science": [ { title: "Death is not Proud", "sub-title": "", author: "Frank Thomas Smith", description: [ "“Everyone now living will be dead in 100 years.”", "“Not necessarily so,” my interlocutor objects. “Modern technology could change that…radically.”", "“Do you mean it could eliminate death?”", "“Anything’s possible.”", "A third participant: “Anyway, who cares? If we’re dead we’re dead, no problem.”", "That was a real recent conversation about a subject which has baffled humanity since we began thinking about it eons ago. Life, after all, is a great mystery. From the moment it begins it marches inevitably towards death. What, then, is the point?", ], imgUrl: `${prefix}calvin-hobbes.jpg`, link: `${prefix}fts-life-and-death-2.html`, poem: false, mainImg: false, }, { title: "Mireya & Intergalactic Reincarnation", "sub-title": "", author: "Frank Thomas Smith", description: [ "Beyond the highest, Aconcagua's peak,
Lives a lady of fragile health,
Known by the name Mireya.", "Her glance, her smile are all I seek,
Are more to me than worlds of wealth,
The ailing lady, Mireya.", "Her steps are slower now, embraces weak,
So I will pray for her in stealth,
For the life of my love Mireya.", ], imgUrl: `https://southerncrossreview.org/150/intergalactic.jpg`, link: `https://southerncrossreview.org/150/mireya-intergalactic.html`, poem: true, mainImg: false, }, ], Anthroposophy: [ { title: "Anthroposophical Guidelines", "sub-title": "13 through 28", author: "Rudolf Steiner", description: [ "13. By means of meditation, one can find the I that emerges in ordinary consciousness in three additional forms: 1. In the consciousness which perceives the etheric body the I appears as an image - which at the same time is an active being and as such imparts shape, growth and formative forces to man. 2. In the consciousness which perceives the astral body, the I is manifested as a member of a spiritual world from which it derives its forces. 3. In the consciousness just described  as the last to be achieved, the I reveals itself as an autonomous being, relatively independent of its spiritual environment.", "14. The second form of the I, which was indicated in the thirteenth Guideline, emerges as an “image”, or picture. By becoming aware of this image-nature, light is also thrown on the essence of thinking in which the I appears in normal consciousness. One seeks the “true I” by all kinds of reflections. But a serious insight into the experiences of this consciousness shows that one does not find the “true I” therein. What appears is rather a reflection in thought, one which is less than an image. One realizes the truth of this fact when one progresses to the I as an image that lives in the etheric body. And by this means one is finally urged correctly to seek the I as the true being of man.a", ], imgUrl: `${prefix}guidelines-image.jpg`, link: `${prefix}guidelines-13-28.html`, poem: false, mainImg: false, }, ], Poetry: [ { title: "Reincarnation Blues", "sub-title": "", author: "Frank Thomas Smith", description: [ "I'd really like again to live
Not this long, but longer still.
Would I then have more to give
With more to feel but weaker will?", "There was a time in northern climes
When I thought and felt and sought
And willed, but failed in troubled times;
And countless were the lies I bought.", "Then in seasons southern born
Fluttered the spirit's broken wing,
Or was it an angel in female form
Whose beauty made the cosmos sing?", ], imgUrl: `${prefix}r-blues-cover.jpg`, link: `${prefix}r-blues-2.html`, poem: true, mainImg: false, }, ], Fiction: [ { title: "Three Versions of Judas", "sub-title": "", author: "Jorge Luis Borges", description: [ "In Asia Minor or in Alexandria, in the second century of our faith (when Basilides was announcing that the cosmos was a rash and malevolent improvisation engineered by defective angels), Nils Runeberg might have directed, with a singular intellectual passion, one of the Gnostic monasteries. Dante would have destined him, perhaps, for a fiery sepulcher; his name might have augmented the catalogues of heresiarchs, between Satornibus and Carpocrates; some fragment of his preaching, embellished with invective, might have been preserved in the apocryphal Liber adversus omnes haereses or might have perished when the firing of a monastic library consumed the last example of the Syntagma. Instead, God assigned him to the twentieth century, and to the university city of Lund. There, in 1904, he published the first edition of Kristus och Judas; there, in 1909, his masterpiece Dem hemlige Frälsaren appeared. (Of this last mentioned work there exists a German version, Der heimliche Heiland, published in 1912 by Emil Schering.)", "Before undertaking an examination of the foregoing works, it is necessary to repeat that Nils Runeberg, a member of the National Evangelical Union, was deeply religious. In some salon in Paris, or even in Buenos Aires, a literary person might well rediscover Runeberg’s theses; but these arguments, presented in such a setting, would seem like frivolous and idle exercises in irrelevance or blasphemy. To Runeberg they were the key with which to decipher a central mystery of theology; they were a matter of meditation and analysis, of historic and philologic controversy, of loftiness, of jubilation, and of terror. They justified, and destroyed, his life. Whoever peruses this essay should know that it states only Runeberg’s conclusions, not his dialectic or his proof. Someone may observe that no doubt the conclusion preceded the “proofs”. For who gives himself up to looking for proofs of something he does not believe in or the predication of which he does not care about?", ], imgUrl: `${prefix}judas.jpg`, link: `${prefix}borges-judas-eng.html`, poem: false, mainImg: false, }, ], Education: [ { title: "What is Waldorf Education?", "sub-title": "", author: "Stephen Sagarin", description: [ "Introduction", "Waldorf education does not exist. It is not a “thing” and it cannot necessarily be distinguished from good education anywhere. Because it does not exist, it cannot be found in the boxes we call Waldorf schools. To narrow its definition to identify it with schools named Waldorf or Steiner schools, or to identify it with a particular curriculum or technique is to reify Waldorf education in a way that may describe part of what is but necessarily ignores what may also be. What we call Waldorf education may perhaps be found in any school, or anywhere that teachers teach and students learn. There is no characteristic or quality that is unique to what we call Waldorf education that cannot potentially be found somewhere else. Waldorf education, as an idea or set of ideas, slips through the cracks of any structure erected to define it.", "Just as Waldorf education has no definite boundaries, it also has no definite origin. We may describe Waldorf education, for example, as arising from the educational conceptions of Rudolf Steiner. But many (most? all?) of these conceptions–for example, the idea that, culturally at least, “ontogeny recapitulates phylogeny” (the development of an individual mirrors in microcosm the development of the species)–may be shown to be older than Steiner and therefore not to originate with him. (Beyond inferences from Steiner’s work, the idea that “the” Waldorf curriculum must include Norse myths in fourth grade or Greek history in fifth grade–curricular practices common in Waldorf schools–is difficult to discover. It’s not in well-known lecture cycles that he gave on education, nor is it in The Study of Man and its correlates, nor may it be found in Stockmeyer’s or Heydebrand’s well-known descriptions of German Waldorf school curricula.) In particular, for the United States, the writings of Ralph Waldo Emerson contain in prototypical form many of Steiner’s ideas about education.", ], imgUrl: `${prefix}shining-waldorf.jpg`, link: `${prefix}sagarin-waldorf.html`, poem: false, mainImg: false, }, ], }; const articlesKeys = Object.keys(articles); // Uncheck all other hidden checkboxes when one is checked // colapses nav-menu dropdowns when a new one is expanded function createNavMenu(navMenuElement) { function createMenuLinks() { articlesKeys.forEach((category) => { // create dropdown menu if there is more than one article in category if (articles[category].length === 1) { if (!articles[category][0]["title"]) return; const div = document.createElement("div"); const p = document.createElement("p"); const title = articles[category][0]["title"] .toLowerCase() .replace(/[^a-zA-Z0-9]/g, ""); p.className = "nav-menu-links"; p.innerText = category; p.dataset.title = title; div.appendChild(p); navMenuElement.appendChild(div); } else if (articles[category].length > 1) { const content = document .querySelector("[data-dropdown-template]") .content.cloneNode(true); const hiddenInput = content.querySelector("[data-hidden-input]"); const label = content.querySelector("[data-label]"); const title = content.querySelector("[data-title]"); const list = content.querySelector("[data-list]"); hiddenInput.id = `${category}-input`; label.htmlFor = hiddenInput.id; title.innerHTML = `${category} ▼`; articles[category].forEach((article) => { const li = document.createElement("li"); const title = article["title"] .replace(/[^a-zA-Z0-9]/g, "") .toLowerCase(); li.className = "nav-menu-links"; li.id = article["title"]; li.innerText = `${article.title} - ${article.author}`; li.dataset.title = title; list.appendChild(li); }); navMenuElement.appendChild(content); } }); const createSingleLink = (title, id) => { const div = document.createElement("div"); const p = document.createElement("p"); p.className = "nav-menu-links"; p.innerText = title; p.dataset.title = id; div.appendChild(p); navMenuElement.appendChild(div); }; createSingleLink("Other Sections", "pic-nav-menu"); createSingleLink("Subscribe", "subscribe"); } createMenuLinks(); //event listeners const navmenuLinkArray = Array.from( navMenuElement.querySelectorAll(".nav-menu-links"), ); const scrollToTarget = (target) => { const headerOffset = 120; const elementPositon = target.getBoundingClientRect().top; const offsetPosition = elementPositon + window.pageYOffset - headerOffset; window.scrollTo({ top: offsetPosition, behavior: "smooth", }); }; navmenuLinkArray.forEach((link) => { link.addEventListener("click", () => { let article = document.querySelector(`#${link.dataset.title}`); scrollToTarget(article); if (menuBar.dataset.opened === "true") { menuBar.dataset.opened = "false"; } }); }); const navChekboxes = Array.from( document.querySelectorAll(".nav-hidden-inputs"), ); navChekboxes.forEach((input) => { input.addEventListener("change", () => { navChekboxes.forEach((element) => { console.log("hi"); if (element === input) return; element.checked = false; }); }); }); } function checkAndReduce() { const title = mainPage.querySelector("h2"); if (title.innerText.length > 20) { title.style.fontSize = "2.5em"; } } function appendPicNavMenu() { const picNavDiv = document .querySelector("[data-pic-nav]") .content.cloneNode(true); const nav = picNavDiv.querySelector("nav"); nav.id = "pic-nav-menu"; const subscribeDiv = document .querySelector("[data-subscribe-div]") .content.cloneNode(true); const subscribe = subscribeDiv.querySelector("div"); subscribe.id = "subscribe"; const firstChild = document.querySelector("#main-div").lastElementChild; const navDiv = document.createElement("div"); navDiv.appendChild(picNavDiv); navDiv.appendChild(subscribe); firstChild.insertAdjacentElement("afterend", navDiv); } function doubleFeaturedArt({ div1, div2, titleElement, subTitle, articleInnerDiv, img, description, }) { div1.id = "i-have-id"; titleElement.innerHTML = "Reincarnation Blues and Other Poems"; div2.id = "me-too"; const titleElement2 = div2.querySelector("h2"); titleElement2.innerHTML = "Reincarnation Blues
Cantos"; titleElement2.style.fontSize = "2.5em"; div1.style.width = window.screen.width > 1200 ? "50%" : "80%"; div2.style.width = window.screen.width > 1200 ? "50%" : "80%"; subTitle.style.display = "none"; const subTitle2 = div2.querySelector("h3"); subTitle2.style.display = "none"; articleInnerDiv.style.display = "flex"; articleInnerDiv.style.flexDirection = window.screen.width > 1200 ? "row" : "column"; articleInnerDiv.style.alignItems = "center"; img.src = `${prefix}reincarnation-blues-back-cover.png`; const img2 = div2.querySelector("[data-article-img]"); img2.src = `${prefix}reincarnation-blues-cover.png`; img2.style.width = "100%"; const description2 = div2.querySelector("[data-article-description]"); const div1p1 = document.createElement("p"); const div2p1 = document.createElement("p"); div2p1.style.textAlign = "center"; div2p1.innerHTML = 'An audio-visual presentantion
Voices: Frank Thomas Smith – María Teresa Gutiérrez
Music & tech: Nicolás Gawain Smith
Art: Celina MacKern
Listen at:

SouthernCrossReview.org
YouTube
Spotify'; div1p1.innerHTML = 'Fifty poems plus the twelve Reincarnation Blues Cantos by Frank Thomas Smith with illustrations by Celina MacKern for puchase at Amazon Reincarnation Blues and Other Stories'; img2.style.maxWidth = "80%"; img2.style.maxHeight = "100%"; img2.style.marginLeft = "auto"; img2.style.marginRight = "auto"; img2.style.marginBottom = "1em"; img2.style.float = "none"; const link2 = div2.querySelector("[data-article-link]"); link2.style.display = "none"; description.appendChild(div1p1); description2.appendChild(div2p1); articleInnerDiv.appendChild(div2); window.addEventListener("resize", () => { div1.style.width = window.screen.width > 1200 ? "50%" : "80%"; div2.style.width = window.screen.width > 1200 ? "50%" : "80%"; articleInnerDiv.style.flexDirection = window.screen.width > 1200 ? "row" : "column"; }); } function createArticlePeek(object) { const keys = Object.keys(object); keys.forEach((key) => { if (keys.indexOf(key) !== 0) { const categoryTitle = document.createElement("h1"); categoryTitle.innerText = key; categoryTitle.className = "category-title"; mainPage.appendChild(categoryTitle); } object[key].forEach((article) => { const articleDiv = document .querySelector("[data-article-template]") .content.cloneNode(true); const articleInnerDiv = articleDiv.querySelector("article"); const div1 = articleDiv.querySelector("div"); const div2 = div1.cloneNode(true); const titleElement = articleDiv.querySelector("h2"); const author = articleDiv.querySelector("h1"); const subTitle = articleDiv.querySelector("h3"); const description = articleDiv.querySelector( "[data-article-description]", ); const img = articleDiv.querySelector("[data-article-img]"); const linkContainer = articleDiv.querySelector("[data-link-container]"); const link = articleDiv.querySelector("[data-article-link]"); articleInnerDiv.id = article["title"] .toLowerCase() .replace(/[^a-zA-Z0-9]/g, ""); titleElement.innerHTML = article["title"]; author.innerHTML = article["author"]; if (article["sub-title"] && article["sub-title"].length !== 0) { subTitle.innerText = article["sub-title"]; } img.src = article["imgUrl"]; linkContainer.style.display = "flex"; linkContainer.style.width = "100%"; linkContainer.style.justifyContent = "center"; link.href = article["link"]; link.style.fontSize = "130%"; link.style.fontWeight = "500"; // Special Atributes for "Featured Art" if (article["mainImg"]) { doubleFeaturedArt({ div1, div2, titleElement, subTitle, articleInnerDiv, img, description, }); titleElement.style.marginBottom = "1em"; link.style.display = "none"; img.style.maxWidth = "80%"; img.style.maxHeight = "100%"; img.style.marginLeft = "auto"; img.style.marginRight = "auto"; img.style.marginBottom = "1em"; img.style.float = "none"; img.insertAdjacentElement("afterend", author); } // if its a poem, make the div and link float (so the text doesn't go under the img) if (article["poem"]) { description.style.float = "left"; link.style.clear = "left"; link.style.float = "right"; } let i = 1; const className = article["title"] .replace(/[^a-zA-Z0-9]/g, "") .toLowerCase(); description.id = `${className}-paragraphs-div`; link.id = `${className}-main-link`; article["description"].forEach((descriptionParagraph) => { const paragraph = document.createElement("p"); paragraph.innerHTML = descriptionParagraph; paragraph.className = `${className}-paragraph-${i}`; description.appendChild(paragraph); i++; }); mainPage.appendChild(articleDiv); checkAndReduce(); }); }); appendPicNavMenu(); } function mobilePortrait() { if (previousStylesheet.dataset.stylesheet == "mobile") return pageName.innerHTML = "Menu"; //create elements in mobile-navbar createNavMenu(navMobile); //get modify input and label "for" in mobile nav const navMobileInputs = Array.from(navMobile.querySelectorAll("input")); const navMobileLabels = Array.from(navMobile.querySelectorAll("label")); navMobileInputs.forEach(input => { input.id += "-mobile"; }); navMobileLabels.forEach(label => { label.htmlFor += "-mobile"; }); //append elements topBar.appendChild(navMobile); //create observer functions let observerMobileMenu = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type == "attributes") { if (menuBar.dataset.opened == "true") { navMobile.classList.add("open"); menuButton.classList.add("close"); } else { navMobile.classList.remove("open"); menuButton.classList.remove("close"); } } }); }); //create menu open button - three lines for (let i = 0; i < 3; i++) { const menuButtonLine = document.createElement("div"); menuButtonLine.className = "menu-button-line"; menuButton.appendChild(menuButtonLine); } //give new class to desktop menu navMobile.className = "nav-menu menu-mobile desktop-hide"; //observe for changes observerMobileMenu.observe(menuBar, { attributes: true, }); //menu button listener menuButton.addEventListener("click", () => { if (menuBar.dataset.opened === "false") { menuBar.dataset.opened = "true"; } else { menuBar.dataset.opened = "false"; } }); previousStylesheet.dataset.stylesheet = "mobile"; // musicLinks.innerHTML = "Words and Music" } //scroll to top on refresh window.onbeforeunload = function () { window.scrollTo(0, 0); }; //create elements for data-attributes // function to set data atributes acording to screen width function setStylesheetDataAttr() { if (screen.width <= 650) { if (stylesheetSelector.dataset.stylesheet == "mobile") return stylesheetSelector.dataset.stylesheet = "mobile"; } else if (screen.width >= 651 && screen.width < 1200) { if (stylesheetSelector.dataset.stylesheet == "medium") return stylesheetSelector.dataset.stylesheet = "medium"; } else { if (stylesheetSelector.dataset.stylesheet == "desktop") return stylesheetSelector.dataset.stylesheet = "desktop"; } } //execute on rezise window.addEventListener("resize", () => { setStylesheetDataAttr(); }); //ovserve changes on data-attributes and execute functions let observerStylesheetAttr = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type == "attributes") { if (stylesheetSelector.dataset.stylesheet === "mobile") { mobilePortrait(); } } }); }); observerStylesheetAttr.observe(stylesheetSelector, { attributes: true, }); //onload functions window.addEventListener("load", () => { setStylesheetDataAttr(); mainPage.offsetTop; introScreen.classList.add("fade-out"); setTimeout(() => { introScreen.style.display = "none"; document.querySelector("html").style.overflowY = "visible"; lightDarkWarning.classList.remove("desktop-hide", "mobile-hide"); }, 1000); //local storage - if exists change theme if (!localStorage.getItem("style")) return lightDarkWarning.style.display = "none"; const lightOrDark = localStorage.getItem("style"); if (lightOrDark === "dark") { stylesheet.href = `${prefix}css/dark.css`; } if (screen.width <= 650) { mobilePortrait(); } }); //remove light-and-dark warning onclick lightDarkWarning.addEventListener("click", () => { lightDarkWarning.style.display = "none"; }); // Toggle Stylesheets toggleStylesheetLightButton.addEventListener("click", () => { stylesheet.href = `${prefix}css/light.css`; localStorage.setItem("style", "light"); }); toggleStylesheetDarkButton.addEventListener("click", () => { stylesheet.href = `${prefix}css/dark.css`; localStorage.setItem("style", "dark"); }); // Sticky navbar const stickyFunc = () => { const limit = mainPage.offsetTop; const navCol = document.querySelector("#sticky-div "); if (window.pageYOffset + 50 >= limit) { navCol.classList.add("fixed-nav-col"); } else { navCol.classList.remove("fixed-nav-col"); } }; //observer function, scroll-in abnormal logo when footer is 50% visible let notFirstTime = 0; const observer = new IntersectionObserver( entries => { if (entries[0].isIntersecting === true) { if (notFirstTime > 0) return abnormalLogoStylesheet.href = `${prefix}css/logo2.css`; abnormalLogo.classList.add("logo-animation"); notFirstTime++; } }, { threshold: [0.5] } ); observer.observe(footerAbnormal); createNavMenu(navMenu); createArticlePeek(articles); window.onscroll = () => { stickyFunc(); }; })();