(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 "./issue-number/" for root index file */ const prefix = "./"; const articles = { "Featured Book": [ { title: "Exile's End", "sub-title": "", author: "", description: [ 'The paperback book is now available for purchase in paperback and kindle at Amazon: Exile’s End – a Memoir and book stores.', "Exile's End
My faraway home is a land of lovers.
A greeting there is no touch of the hand,
No nod of the head, no Guten Tag, Herr ...
In that distant land my friends all embrace me
And kiss me and tell me: Estás en tu casa.
A cleansing wind blows in from the Pampas,
It swirls even now in the streets of my mind ...
… to be continued.", "In order to make an intelligent choice, or even a stupid one, you have to have reached a certain age, not necessarily a legal age, but at least one which allows thinking to function. On the other hand, according to some, including myself, your spirit exists both before birth and after death. And during the time between death and the future birth you train for the big moment, which includes choosing your future parents. If your future parents live in Brooklyn, NY as mine did, you will necessarily be born there — as I was. This implies that I made my first choice (possibly influenced by previous events and choices, intelligent or stupid) before I was even born. The way things turned out it was a very good choice. My parents were neither rich nor poor, originally working class, but after my father somehow became the U.S. sales representative for a Cuban tobacco company (before Castro), we at least approached middle class. When Castro took over Cuba the company lost its tobacco source, but the owners had moved their money and themselves to Florida. We stayed in Brooklyn and my father traveled a lot seeking tobacco in Mexico, and South and Central America. I had no sisters or brothers, don't know why. Neither my parents nor other relatives of that generation were intellectuals, nor did they have much faith in education, which they had lacked, having gone to work before finishing high school. So, they left me on my own in that respect.", "What follows is a description of choices I have made during my life on earth. I have sometimes wondered to what extent they are strictly true. You may see what I mean by that from what follows. The descriptions are not necessarily or completely true, for memory is never exact and egotism tends to bend events to bend events to favor oneself...", ], imgUrl: `${prefix}exiles-end-cover.jpg`, link: '', poem: false, mainImg: true, }, ], "Current Events": [ { title: "There Is Only One Spaceship Earth", "sub-title": "", author: "William J. Astore", description: [ "When I was in the U.S. military, I learned a saying (often wrongly attributed to the Greek philosopher Plato) that only the dead have seen the end of war. Its persistence through history to this very moment should indeed be sobering. What would it take for us humans to stop killing each other with such vigor and in such numbers?", "Song lyrics tell me to be proud to be an American, yet war and profligate preparations for more of the same are omnipresent here. My government spends more on its military than the next 10 countries combined (and most of them are allies). In this century, our leaders have twice warned of an “axis of evil” intent on harming us, whether the fantasy troika of Iraq, Iran, and North Korea cited by President George W. Bush early in 2002 or a new one — China, Russia, and North Korea — in the Indo-Pacific today. Predictably given that sort of threat inflation, this country is now closing in on a trillion dollars a year in “defense spending,” or close to two-thirds of federal discretionary spending, in the name of having a military machine capable of defeating “evil” troikas (as well as combatting global terrorism). A significant part of that huge sum is reserved for producing a new generation of nuclear weapons that will be quite capable of destroying this planet with missiles and warheads to spare.", ], imgUrl: `${prefix}astore-img.png`, link: `${prefix}astore-spaceship-earth.html`, poem: false, mainImg: false, }, { title: "The Distortion of Campus Protests over Gaza", "sub-title": "", author: "Helen Benedict", description: [ "Helicopters have been throbbing overhead for days now. Nights, too. Police are swarming the streets of Broadway, many in riot gear. Police vans, some as big as a city bus, are lined up along side streets and Broadway. ", "Outside the gates of the Columbia University campus, a penned-in group of pro-Israel demonstrators has faced off against a penned-in group of anti-genocide and pro-Palestinian protesters. These groups are usually small, often vastly outnumbered by the police around them, but they are loud and they are not Columbia students. They’ve been coming every day this April to shout, chant, and hold up signs, some of which are filled with hateful speech directed at the other side, equating protests against the slaughter in Gaza with being pro-Hamas, and calls to bring home the hostages with being pro-genocide.", "Inside the locked gates of the campus, the atmosphere is entirely different. Even as the now-notorious student tent encampment there stretches through its second week, all is calm. Inside the camp, students sleep, eat, and sit on bedspreads studying together and making signs saying, “Nerds for Palestine,” “Passover is for Liberation,” and “Stop the Genocide.” The Jewish students there held a seder on Passover. The protesters even asked faculty to come into the encampment and teach because they miss their classes. Indeed, it’s so quiet on campus that you can hear birds singing in the background. The camp, if anything, is hushed.", ], imgUrl: `${prefix}benedict-protests-gaza.png`, link: `${prefix}benedict-protests-gaza.html`, poem: false, mainImg: false, }, { title: "Dead on Arrival", "sub-title": "", author: "Ellen Cantarow", description: [ "Words can’t express the horrors of Israel’s genocide in Gaza. To actually feel the nightmare, you would have to be there under the bombs, fleeing with Palestinians desperately seeking a safe place that doesn’t exist; seeing building after building destroyed; treading through blood in one of the few, only partially standing hospitals; and witnessing children and other patients sprawled on hospital floors, limbs amputated without anesthesia (Israel having blocked all medical supplies).", "It has taken the Jewish state’s savagery to break decades of silence about its history of crimes against humanity. U.S. military historian Robert Pape has called the onslaught against Gaza “one of the most intense civilian punishment campaigns in history.” Former U.N. Assistant Secretary-General for Human Rights Andrew Gilmour has said that we are witnessing “probably the highest kill rate of any military… since the Rwandan genocide of 1994.”", ], imgUrl: `${prefix}cantarow-img.png`, link: `${prefix}cantarow-genocide.html`, poem: false, mainImg: false, }, { title: "Living on the Wrong World", "sub-title": "", author: "Tom Engelhardt", description: [ "On this planet of ours, it almost doesn’t matter who’s right and who’s wrong when it comes to our wars.", "Actually, let me correct that thought slightly: it certainly does matter, but what matters so much more is that we humans simply can’t stop fighting them. That is (or at least should be) a stunning and deeply saddening reality. What obvious lessons we seem congenitally incapable of learning! In the previous century, after all, there were two truly global wars, World War I and World War II, that were estimated to have left significantly more than 100 million military personnel and civilians dead, while decimating parts of the planet. The second of those conflicts ended with the obliteration of the Japanese cities of Hiroshima and Nagasaki on August 6th and 9th, 1945, with the loss of possibly 200,000 dead, and the arrival in our world of a shattering new weapon, the atomic bomb. After so many centuries of endless warfare, it finally brought humanity to the edge of future annihilation.", ], imgUrl: `${prefix}wrong-world.png`, link: `${prefix}engelhardt-wrong-world.html`, poem: false, mainImg: false, }, ], Anthroposophy: [ { title: "The Yearning of the Jews for Palestine", "sub-title": "", author: "Rudolf Steiner", description: [ "GA 31", 'Many intelligent people will find it superfluous to speak about the strange gathering that took place in Basel a few days ago under the name "Zionist Congress." The fact that a number of European Jews came together to promote the idea of establishing a new Palestinian empire and encouraging the Jews to emigrate to this new "promised land" was seen to be the insane idea of a morbidly excited fantasy. In this judgment, they calmed down. They did not discuss the matter anymore. I believe, however, that these wise men have lagged ten years behind in their judgments. And ten years is a small eternity in our time when events are flowing so fast. Ten years ago, with some justification, one could think that a Jew was half mad who had the idea of moving his people to Palestine. Today one may only consider him hypersensitive and vain; but in another ten years things can be very different.', ], imgUrl: `${prefix}steiner-jews-palestine.png`, link: `${prefix}steiner-jews-palestine.html`, poem: false, mainImg: false, }, ], Poetry: [ { title: "Christ Comes to Skopelos", "sub-title": "", author: "Frank Thomas Smith", description: [ "Christ consents to be called
To Skopelos
One Easter Sunday
Several years before his year
Two-thousand.", "They'd been calling him continually
In all their white-walled
Icon-laden churches,
Never expecting he'd hear their songs.", ], imgUrl: `${prefix}christ-skopelos-image.png`, link: `${prefix}fts-christ-skopelos.html`, poem: true, mainImg: false, }, { title: "Starlight Like Intuition Pierced the Twelve", "sub-title": "", author: "Delmore Schwartz", description: [ 'The starlight\'s intuitions pierced the twelve,
The brittle night sky sparkled like a tune
Tinkled and tapped out on the xylophone.
Empty and vain, a glittering dune, the moon
Arose too big, and, in the mood which ruled,
Seemed like a useless beauty in a pit;
And then one said, after he carefully spat,
"No matter what we do, he looks at it!"', '"I cannot see a child or find a girl
Beyond his smile which glows like that spring moon."
--"Nothing no more the same," the second said,
"Though all may be forgiven never quite healed
The wound I bear as witness, standing by,
No ceremony surely appropriate,
Nor secret love, escape or sleep because
No matter what I do, he looks at it--"', ], imgUrl: `${prefix}schwartz-starlight-img.png`, link: `${prefix}schwartz-starlight.html`, poem: true, mainImg: false, }, { title: "Coming Clean", "sub-title": "", author: "Lynn Strongin", description: [ "Georgia O’Keeffe as a child
always ate round the raisin in the cookie:
sought more sky than land in her world,
but held the jewel at core: renewal
saved best for last.", "I recall the black child
of nine or ten, a girl
who told me with gem-clear eyes
how her mother’d say “Always wear clean undies,
for you never know when you might get hit by a truck.”", ], imgUrl: `${prefix}strongin-poems-img.png`, link: `${prefix}strongin-poems.html`, poem: true, mainImg: false, }, { title: "Breathe", "sub-title": "", author: "Becky Hemsley", description: [ "She sat at the back and they said she was shy,
She led from the front and they hated her pride,
They asked her advice and then questioned her guidance,
They branded her loud, then were shocked by her silence,", "When she shared no ambition they said it was sad,
So she told them her dreams and they said she was mad,
They told her they'd listen, then covered their ears,
And gave her a hug while they laughed at her fears,", ], imgUrl: `https://southerncrossreview.org/141/forest.jpg`, link: `https://southerncrossreview.org/141/hemsley-breathe.html`, poem: true, mainImg: false, }, ], "Children's Corner": [ { title: "The Talking Trees", "sub-title": "", author: "by Frank Thomas Smith", description: [ 'Nicolás lives in a small town in the north of the country. The house he lives in is on the outskirts of the town near a forest. When Nicolás looks out of his bedroom window he sees the forest. It has been there as long as he can remember. In fact, it is one of the first things he ever saw, after his mother of course. When he was a baby she used to hold him up so he could look out the window at the forest.', "When Nicolás was old enough to walk he went with his mother into the forest along a footpath, but only as far as a Talking Tree. The tree didn't talk to him then naturally, because he wouldn't have understood. It was the tallest and thickest tree around and Nicolás's mother told him it was an oak.", 'Alma lives in another small town in the north of country. The house she lives in is on the outskirts of the town near the same forest. When Alma looks out her bedroom window she sees the forest. It has been there as long as she can remember. In fact, it is one of the first things she ever saw, after her father of course. When she was a baby he used to hold her up so she could look out the window at the forest.', "When Alma was old enough to walk she went with her father into the forest along a footpath, but only as far as a Talking Tree. The tree didn't talk to her then naturally, because she wouldn't have understood. It was the tallest and thickest tree around and Alma's father told her it was an oak.", ], imgUrl: "https://southerncrossreview.org/122/oak-tree.jpg", link: "https://southerncrossreview.org/122/talking-trees.html", poem: false, mainImg: false, }, { title: "Nature Spirits", "sub-title": "", author: "Frank Thomas Smith", description: [ "Nicolás and Carolina were lost in the woods and didn’t know which way to turn. Whichever way they went they seemed to get more lost. They sat down on the roots of a tree and Carolina began to cry. Her brother told her not to cry, that they would find their way out eventually, but the truth was that he felt like crying too.", "Suddenly, they heard a faint sound of someone moaning: “Oh, oh! help me! oh, oh!” They held their breath and waited. It happened again: “Oh, oh!”", "“Maybe it’s only the wind,” Nicolás said.", "“No, it’s someone crying for help,” Carolina objected. “What should we do?”", ], imgUrl: `${prefix}bosque1.jpg`, link: `${prefix}fts-nature-spirits.html`, poem: false, mainImg: false, }, ], "Social Science": [ { title: "Favela Children", "sub-title": "", author: "Ute Creamer", description: [ "Londrina, 16 January 1972", "Up and away to Marumbi!", "I rode the whole night in the bus. Luckily, Daiggers brought my two impossibly large suitcases to the station. In Apucarana I made the usual connection with the Viacao Londrinense, the Londrina bus company, famed for its busses breaking down after a few miles, which is exactly what happened. We all got out and sat at the side of the road waiting for the replacement bus. We were covered with dust by the time it arrived in a cloud of red dust an hour later. It got as far as Faxinal before giving up the ghost.", "Thank God I was only going that far, where a jeep was waiting to take me and my voluminous luggage the remaining fifteen miles to Cido's adobe hut. It flew over rocks and holes, at one point getting stuck in one, and had to be pulled out. When I finally arrived, children and dogs came running and jumping all over me. They were all happy that I had really come again. I was given something to eat right away: a cucumber, saved especially for me, rice, beans and a piece of smoked bacon. And everyone talked, talked, talked, the children about how they had counted the days to my arrival, how they listened to the sound of every jeep; I, about how I had run around Sao Paulo inquiring about schools and work and how I told everyone about their life at the sitio (home on the land) and that everybody gave me things for them: dresses, shoes, shirts, suits, school-books, notebooks, pencils, sweets and a chocolate Santa Claus which was divided into twenty parts so all could have a taste.", ], imgUrl: `${prefix}favela-cover.jpg`, link: `${prefix}favela-children-11.html`, poem: false, mainImg: false, }, ], Memoir: [ { title: "Exile's End - a Memoir", "sub-title": "", author: "Frank Thomas Smith", description: [ "In order to make an intelligent choice, or even a stupid one, you have to have reached a certain age, not necessarily a legal age, but at least one which allows thinking to function. On the other hand, according to some, including myself, your spirit exists both before birth and after death. And during the time between death and the future birth you train for the big moment, which includes choosing your future parents. If your future parents live in Brooklyn, NY as mine did, you will necessarily be born there — as I was. This implies that I made my first choice (possibly influenced by previous events and choices, intelligent or stupid) before I was even born. The way things turned out it was a very good choice. My parents were neither rich nor poor, originally working class, but after my father somehow became the U.S. sales representative for a Cuban tobacco company (before Castro), we at least approached middle class. When Castro took over Cuba the company lost its tobacco source, but the owners had moved their money and themselves to Florida. We stayed in Brooklyn and my father traveled a lot seeking tobacco in Mexico, and South and Central America. I had no sisters or brothers, don't know why. Neither my parents nor other relatives of that generation were intellectuals, nor did they have much faith in education, which they had lacked, having gone to work before finishing high school. So, they left me on my own in that respect.", "What follows is a description of choices I have made during my life on earth. I have sometimes wondered to what extent they are strictly true. You may see what I mean by that from what follows. The descriptions are not necessarily or completely true, for memory is never exact and egotism tends to bend events to bend events to favor oneself...", ], imgUrl: `${prefix}exiles-end-cover.jpg`, link: `${prefix}exiles-end-memoir.pdf`, poem: false, mainImg: false, }, ], Fiction: [ { title: "Judgments", "sub-title": "", author: "Gary Beck", description: [ "The minute they walked into the store I knew they were cops, but not locals. Some kind of state boys come up from Cheyenne by the look of them. I started for the bathroom to avoid them, but the meaner looking one, in a blue suit that looked like he found it in a thrift shop, called me.", "“Just a minute, sir. We’d like to talk to you.”", "I turned to my assistant, Bobby Runs-with-Elks.", "“Why don’t you help these gentlemen, Bobby.”", ], imgUrl: `${prefix}horses.jpeg`, link: `${prefix}beck-judgments.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 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 = "60%"; 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(); }; })();