(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"); const backToTop = document.querySelector("#back-to-top"); /*change prefix from "./" for test page inside the issue's folder to "./issue-number/" for root index file */ const prefix = "./162/"; const articles = { HeyZeus: [ { title: "", "sub-title": "", author: "", description: [ "

HeyZeus

", "

A Modern Mystery Drama

", "

  by Frank Thomas Smith

", "

Synopsis

", ], imgUrl: `${prefix}heyzeus-img.jpg`, link: ``, poem: false, mainImg: true, }, ], Anthroposophy: [ { title: "Anthroposophy: an (eyebrow – raising) Introduction", "sub-title": "", author: "Frank Thomas Smith", description: [ "The first Waldorf school was founded in 1919 in Germany by one of Rudolf Steiner’s followers, Emil Molt, who was the owner and director of the Waldorf Astoria cigarette factory. It was meant at first for the children of Molt’s employees and was based on Steiner’s educational ideas. Also, because Molt wanted to put into practice Steiner’s social ideas, namely the “Threefold Society” or the triformation of the social organism.", "I first became aware of this back in the 1970s when I became involved in a Waldorf School my daughter attended in Argentina. In 1919 Rudolf Steiner published a book: Die Kernpunkte der sozialen Frage (Basic Issues of the Social Question.) Later when I lived in Switzerland, I translated it. It was published in the U.K as Toward Social Renewal. The latest edition is titled Toward a Threefold Society published in the United States by AnthroposophicalPublications.org.", "It is not an easy book, but it surprised me to realize that the same individual, whose work was the foundation of Waldorf pedagogy and who had spoken and written about angels, devils, religion, reincarnation and karma, had also introduced concepts about how society should be organized and renewed in a rational, practical way.", ], imgUrl: `${prefix}anthroposophy-intro.png`, link: `${prefix}anthroposophy-intro-2.html`, poem: false, mainImg: false, }, ], "True Tales": [ { title: "Double Lives", "sub-title": "", author: "Frank Thomas Smith", description: [ "Madrid was experiencing an early spring, the trees were budding and the birds chirped even in the commercial center of the city. It was in the late ’seventies and I was there for two very different meetings, reflections of my double life. The first was with the country’s airline managers, hosted by Iberia as national carrier. I was there as the representative of IATA to try and convince them not to give discounts and thus avoid tariff wars, which are debilitating to all, to be alert to security problems and to train their people in Fraud Prevention. It was a long morning because Iberia had recently initiated a new working day: from 7 a.m. till 3 p.m. without a lunch break. The idea was to concentrate travail to the morning when people have more energy and give them the afternoon off. The concept’s fallacy was that Madridleños dined and went to bed late and were bleary-eyed and slow-witted in the mornings for lack of sleep. Fortunately, pilots weren’t subject to the same regimen.", ], imgUrl: `${prefix}double-heads.jpg`, link: `${prefix}fts-double-lives.html`, poem: false, mainImg: false, }, { title: "Mi Maestro de Inglés", "sub-title": "", author: "Claudia Lemus", description: [ "Frank Smith fue mi maestro de inglés en el colegio que se formó allá por el año 1968 en la calle Ituzaingó 368, San Isidro, Buenos Aires. Hoy en día esa dirección no existe, pasó a formar parte de los juzgados.", "Recuerdo que él tenía una forma muy particular de hablar, arrastrando las erres y cambiando los artículos de los sustantivos. Esto a mí me fascinaba, porque era como una especie de rebeldía a las reglas gramaticales. Yo desde chica pensaba que el idioma lo habían hecho más complicado que lo que tendría que ser. Sino ¿Por qué la vaca y el toro? Siendo que podría ser “la vaca y el vaco”. O si preferían “el toro y la tora”. Lo mismo pasaba con el sapo y otros animales. Pero el maestro se saltaba estas reglas.", "De él aprendí varias cosas, pero la verdad es que no mucho inglés. Algo de pronunciación, porque cantábamos, pero yo ni sabía que decía. Pero tengo que decir que ahora entiendo inglés bastante bien.", ], imgUrl: `${prefix}el-maestro-de-ingles-2.png`, link: `${prefix}lemus-maestro-ingles.html`, poem: false, mainImg: false, }, { title: "Mi amiga Bibi", "sub-title": "", author: "Claudia Lemus", description: [ "Estoy redescubriendo lo que significó para mí la amistad de esa niña, Bibi. Muchas veces recordaba las anécdotas, pero solamente como cosas de niños, divertidas y nada más. Pero hoy creo que fue algo más profundo. Que el universo, la vida, o como lo quieran llamar, la puso allí. Que no fue casualidad.", "Al recordarla, le agradecí en mis meditaciones, considerando que esa energía positiva le llegaría. Pasaron más de veinticinco años. Yo cambié, y ella seguramente habrá cambiado. Pero quiero honrar esos recuerdos…", "Hace un tiempo al escuchar a Deepak Chopra, comencé a hacerme varias preguntas y una de ellas fue: “¿De qué estoy agradecida?”", "Aparecieron agradecimientos actuales, muy evidentes. También aparecieron otros agradecimientos del pasado, de hace mucho tiempo, como éstos que estoy escribiendo.", ], imgUrl: `${prefix}lemus-mi-amiga-bibi.png`, link: `${prefix}lemus-mi-amiga-bibi.html`, poem: false, mainImg: false, }, ], "Current Events": [ { title: "Manifest Destiny Gets a Reboot Under President Donald Trump", "sub-title": "", author: "William J. Astore", description: [ "A few years ago, I came across an old book at an estate sale. Its title caught my eye: “Our New Possessions.” Its cover featured the Statue of Liberty against stylized stars and stripes. What were those “new possessions”? The cover made it quite clear: Cuba, Hawaii, the Philippines, and Puerto Rico. The subtitle made it even clearer: “A graphic account, descriptive and historical, of the tropic islands of the sea which have fallen under our sway, their cities, peoples, and commerce, natural resources and the opportunities they offer to Americans.” What a mouthful! I’m still impressed with the notion that “tropical” peoples falling “under our sway” offered real Americans amazing opportunities, as did our (whoops — I meant their) lands. Consider that Manifest Destiny at its boldest, imperialism unapologetically being celebrated as a new basis for burgeoning American greatness.", "The year that imperial celebration was published — 1898 — won’t surprise students of U.S. history. America had just won its splendid little imperial war with Spain, an old empire very much in the “decline and fall” stage of a rich, long, and rapacious history. And just then red-blooded Americans like “Rough Rider” Teddy Roosevelt were emerging as the inheritors of the conquistador tradition of an often murderously swashbuckling Spanish Empire.", ], imgUrl: `${prefix}trump-takeover-plan.jpg`, link: `${prefix}astore-manifest-destiny.html`, poem: false, mainImg: false, }, { title: "Toward a Better World", "sub-title": "Building a Movement for Social Justice in a Time of Peril", author: "Liz Theoharis and William Hartung", description: [ "With the return of Donald Trump to the White House, advocates for peace, social justice, racial and economic equality, fair immigration policies, climate renewal, trans rights, and other movements for change are bracing for hard times. The new administration will be doggedly opposed to so many of the values we hold dear, as well as programs that have helped keep millions of Americans above the poverty line.", "Only recently, newly reelected Speaker of the House Mike Johnson reaffirmed his commitment to an “America First” agenda, which distills the most harmful aspirations of the Heritage Foundation’s Project 2025 into 10 priority areas, including slashing social welfare, healthcare programs, and public education; supporting increased military spending to promote”peace through strength”; unleashing a nightmarish version of immigration enforcement; and restricting voting rights.", "Many of us are now asking ourselves, how did we end up here? Part of the answer is simple enough: the status quo, regardless of which party has been in power, simply hasn’t been working for all too many Americans. Research compiled by our colleague Shailly Gupta Barnes of the Kairos Center indicates that some 140 million of us live either in poverty or one financial emergency away from joining the ranks of the poor. One out of six children in this country now lives below the official poverty line and the families of nearly half of all kids are in a state of economic precarity or food insecurity. Meanwhile, the average life span of white American males is actually declining, while more than 20 million people lost their access to health care in 2024 alone.", ], imgUrl: `${prefix}fight_hate.jpg`, link: `${prefix}better-world-theoharis-hartung.html`, poem: false, mainImg: false, }, { title: "When Israeli Warplanes Rain Death on Gaza, the Copilot is Uncle Sam", "sub-title": "Arming Israel Still Has Bipartisan Support in Washington", author: "Stan Cox", description: [ "In recent weeks, political soothsayers have speculated about a wide variety of odious new policies the incoming Trump administration and its allies in Congress may or may not pursue. No one can predict with certainty which of those measures they will inflict on us and which they’ll forget about.  But we can make one prediction with utter confidence. The White House and large bipartisan majorities in Congress will continue their lavish support for Israel’s war on Gaza, however catastrophic the results.   ", "Washington has supplied a large share of the armaments that have allowed the Israeli Defense Forces (IDF) to rain death and destruction on Gaza (not to speak of Lebanon) over the past year and a quarter. Before October 7, 2023, when Hamas and other groups attacked southern Israel, that country was receiving $3.8 billion worth of American military aid annually. Since then, the floodgates have opened and $18 billion worth of arms have flowed out. The ghastly results have shocked people and governments across the globe.", ], imgUrl: `${prefix}cox-israel-usa.png`, link: `${prefix}cox-israel-usa.html`, poem: false, mainImg: false, }, ], Memoir: [ { title: "Exile’s End: a Memoir", "sub-title": "Episode 5", author: "Frank Thomas Smith", description: [ 'The Language School was like a free-of-charge university including room and board. And the food was excellent, way above the normal army fare. We were a Russian class of about eighty students, divided into groups of eight. The teachers were all Russian native speakers, although not necessarily professional educators. But they were all well-educated, at least in Russian. We had class five hours a day, five days a week. With that kind of immersion it would be hard not to learn something, even a lot. Our fun teacher was Romanov, a nephew of Czar Nicholas II, who had been murdered by the Bolsheviks. He was kind of decadent, but had a sense of humor and taught us all the dirty words in Russian, of which there are plenty. His method of correcting pronunciation was by shouting: “There are no cows in Mask-va!” (correct pronunciation of "Moscow.”)', "One night I went to the Gilded Cage in town and was dressed accordingly: blue sports jacket, slacks, loafers without socks, white shirt open to the third button. I arrived early and found a stool at the semi-circular bar, put a fiver on the bar for effect, ordered a Millers High Life, lit a cigarette, and looked around. The bar stools were almost all occupied — by men. Soon they'd be three deep, it being Friday night. The piano was set back in an alcove to the left- rear of the bar. It also had bar stools around it so you could drink there and look at the player with one elbow on the piano. Two young couples were perched on the stools, the men in suits and ties and the giggly women showing a lot of leg. The men were probably asshole officers from Fort Ord, I figured. The piano player was playing As Time Goes By, probably requested by one of the girls. That kind of girl always requested that kind of song because they liked to think of themselves as Ingrid Bergman — romantic and teary — without realizing that it wasn't a song you could request, it had to hit you out of the blue. I lit another cigarette and nursed my beer.", ], imgUrl: `${prefix}exiles-end-main.png`, link: `${prefix}exiles-end-5.html`, poem: false, mainImg: false, }, ], Poetry: [ { title: "The Negro’s America", "sub-title": "", author: "Frank Barbour Coffin", description: [ "My country, ’tis of thee,
Sweet land of liberty,
Would I could sing;
Its land of Pilgrim’s pride
Also where lynched men died
With such upon her tide,
Freedom can’t reign.", ], imgUrl: `${prefix}coffin-negros-america.jpg`, link: `${prefix}coffin-negros-america.html`, poem: true, mainImg: false, }, ], "Children's Corner": [ { title: "The Magic Mound", "sub-title": "Chapter 20", author: "", description: [ "The group of twenty-four men, two boys, one girl and one white donkey made its way single file through the forest, more like a jungle in this part of Maxa, towards the Riovita. Alaram led the way followed by Sergio, then Mireya, Divino, Platero and the rest of the men.", "There was no trail, so the long file twisted and turned like a dragon with a long tail. At times they were blocked on all sides by vegetation, so Alto stepped forward and cut through with powerful swipes of his machete-like knife. It was difficult to converse, strung out as they were, but not impossible if they spoke loudly enough. This seemed to be a general desire and the result was a din which rivaled that of the monkeys at twilight.", "They moved along quickly and happily, relying on Alaram's unerring sense of direction, and reached the river at sundown of the second day. The next morning they found the raft tied to a tree on the river-bank, moss-covered but intact and seaworthy. Sergio noted that it was sturdily built and even handsome. It was obvious to him that Alaram was an excellent craftsman. The river was wider and swifter here than in the north where they had crossed it running.", ], imgUrl: `${prefix}magic-mound-cover.png`, link: `${prefix}magic-mound-20.html`, poem: false, mainImg: false, }, ], Fiction: [ { title: "And the Wall Came Tumbling Down", "sub-title": "", author: "Roberto Fox (as told to Frank Thomas Smith)", description: [ "He had the nerve to telephone and tell me to go to the American embassy. Actually he asked, but it amounted to the same thing. It was November 1989 and I was sitting on my third-floor balcony overlooking the public golf course in Belgrano Chico, Buenos Aires on a lovely afternoon. I don’t play golf. Call it ironic if you like, for any local golfer worth his putter would have given his eye-teeth to live here. I was trying to work on my new children’s book and a brilliant idea had just penetrated my writer’s block when the phone rang inside. I jumped and almost knocked over my portable typewriter but the only damage was a long line of zzzzzs when my finger slipped down from the a-key and stuck on z. It was the time of the month when my ex-wife often called from Germany to complain that she hadn’t received her alimony. It was hard to convince her that it was the fault of the Argentine bureaucratic banking system, that it would arrive, although late. I let it ring for the programed seven times until the answering machine took over. I fully expected to hear her exasperated whine, but nothing happened. No message, so it wasn’t her.", "Now what was that brilliant idea I had before the telephone interrupted it? Gone. I cursed and walked back and forth on the balcony, which was only five paces, but that didn’t help, so I went inside to the kitchen for a beer, which was likely to help even less, but I was thirsty. Spring had been short that year and it was already summery enough to warrant a cold beer. I poured so it had a decent head of foam, which isn’t easy with the homegrown brew, not like the German stuff, and drank it down before the foam dissolved completely. Then I stretched out on the couch thinking that a short siesta might bring back the idea.", ], imgUrl: `${prefix}fox-berlin.png`, link: `${prefix}berlin-wall-tumbling-down.html`, poem: false, mainImg: false, }, { title: "The Impostor Magi", "sub-title": "", author: "Frank Thomas Smith", description: [ "A boy from the village ran into our yard at lunchtime on the fifth of January and announced at the top of his lungs that the Three Kings were coming to the schoolhouse that night at nine o’clock. That’s how news in Las Chacras is announced – by word of mouth. I remembered that a neighbor had asked for a donation to buy sweets and balloons a few days before. Making enquiries on the main road, I found out that the Kings were scheduled to begin their descent to the school from the almacén at nine o’clock, which meant that they would more likely begin at nine-thirty and arrive at ten.", "My wife, twelve-year-old son and I left the house at nine-thirty for the fifteen minute walk to the one-room schoolhouse. We carried flashlights to light our way down the narrow dirt road. Although we know the road well, it is advisable not to walk without light in order to avoid the unpleasant surprise of stepping on a snake – poisonous or not – or a scorpion. My son is too old to believe that the Three Kings were coming to Las Chacras, but he wasn’t adverse to receiving a bag of sweets and witnessing the spectacle. It was a beautiful starlit evening, luckily not too warm.", ], imgUrl: `https://southerncrossreview.org/161/3-kings-2.jpg`, link: `https://southerncrossreview.org/161/fts-impostor-magi.html`, poem: false, mainImg: false, }, { title: "Teddy", "sub-title": "", author: "J. D. Salinger", description: [ "“I’LL EXQUISITE DAY you, buddy, if you don’t get down off that bag this minute. And I mean it,” Mr. McArdle said. He was speaking from the inside twin bed--the bed farther away from the porthole. Viciously, with more of a whimper than a sigh, he foot-pushed his top sheet clear of his ankles, as though any kind of coverlet was suddenly too much for his sunburned, debilitated-looking body to bear. He was lying supine, in just the trousers of his pajamas, a lighted cigarette in his right hand. His head was propped up just enough to rest uncomfortably, almost masochistically, against the very base of the headboard. His pillow and ashtray were both on the floor, between his and Mrs. McArdle’s bed. Without raising his body, he reached out a nude, inflamed-pink, right arm and flicked his ashes in the general direction of the night table. “October, for God’s sake,” he said. “If this is October weather, gimme August.” He turned his head to the right again, toward Teddy, looking for trouble. “C’mon,” he said. “What the hell do you think I’m talking for? My health? Get down off there, please.” Teddy was standing on the broadside of a new looking cowhide Gladstone, the better to see out of his parents’ open porthole. He was wearing extremely dirty, white ankle-sneakers, no socks, seersucker shorts that were both too long for him and at least a size too large in the seat, an overly laundered T shirt that had a hole the size of a dime in the right shoulder, and an incongruously handsome, black alligator belt. He needed a haircut – especially at the nape of the neck – the worst way, as only a small boy with an almost full-grown head and a reedlike neck can need one.", ], imgUrl: `${prefix}teddy-suitcase.jpg`, link: `${prefix}salinger-teddy.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 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); } function createMenuLinks() { //letters link const div = document.createElement("div"); const p = document.createElement("p"); const a = document.createElement("a"); a.href = "https://southerncrossreview.org/162/letters162.html"; a.style.color = "inherit"; a.style.textDecoration = "none"; p.className = "nav-menu-links"; a.innerText = "Letters to the Editor"; p.dataset.title = "letters"; p.appendChild(a); div.appendChild(p); navMenuElement.appendChild(div); //end letters link 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); } }); //createSingleLink("Letters to the Editor", "pic-nav-menu"); 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) => { if (link.dataset.title === "letters") return; 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) => { 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 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"); 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 = "40%"; 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"); }); //back to top button backToTop.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth", }); }); // 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"); backToTop.classList.remove("back-to-top-hide"); } else { navCol.classList.remove("fixed-nav-col"); backToTop.classList.add("back-to-top-hide"); } }; //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(); }; })();