(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 = "./"; const articles = { "Featured Art": [ { "title": "Adios Nonino", "sub-title": "", "author": "Astor Piazzolla", "description": [ 'Astor Pantaleón Piazzolla (March 11, 1921 – July 4, 1992) was an Argentine tango composer, bandoneon player, and arranger. His works revolutionized the traditional tango into a new style termed nuevo tango, incorporating elements from jazz and classical music. A virtuoso bandoneonist, he regularly performed his own compositions with a variety of ensembles.', 'In 1925 Astor Piazzolla moved with his family to Greenwich Village in New York City, which in those days was a violent neighbourhood inhabited by a volatile mixture of gangsters and hard-working immigrants. His parents worked long hours and Piazzolla soon learned to take care of himself on the streets despite having a limp. At home he would listen to his father\'s records of the tango orchestras of Carlos Gardel and Julio de Caro, and was exposed to jazz and classical music, including Bach, from an early age. He began to play the bandoneon after his father spotted one in a New York pawn shop in 1929.', 'After their return to New York City from a brief visit to Mar del Plata in 1930, the family moved to Little Italy in lower Manhattan. In 1932 Piazzolla composed his first tango, "La Catinga". The following year he took music lessons with the Hungarian classical pianist Béla Wilda, a student of Rachmaninoff who taught him to play Bach on his bandoneon. In 1934 he met Carlos Gardel, one of the most important figures in the history of tango, and played a cameo role as a paper boy in his movie El día que me quieras.Gardel invited the young bandoneon player to join him on his tour. Much to Piazzolla\'s dismay, his father decided that he was not old enough to go along. The disappointment of being forbidden to join the tour proved to be fortunate, as it was on this tour in 1935 that Gardel and his entire orchestra perished in a plane crash. In later years Piazzolla jokingly made light of this fateful event: had his father let him join the tour, Piazzolla would have played the harp instead of the bandoneon.', 'Inspired by Vardaro\'s style of tango, and still only 17 years old, Piazzolla moved to Buenos Aires in 1938 where, the following year, he realized a dream when he joined the orchestra of the bandoneonist Aníbal Troilo, which would become one of the greatest tango orchestras of that time.', 'By 1941 he was earning a good wage, enough to pay for music lessons with Alberto Ginastera, an eminent Argentine composer of classical music. It was the pianist Arthur Rubinstein, then living in Buenos Aires, who had advised him to study with Ginastera and delving into scores of Stravinsky, Bartók, Ravel, and others, Piazzolla rose early each morning to hear the Teatro Colón orchestra rehearse while continuing a gruelling performing schedule in the tango clubs at night. During his five years of study with Ginastera he mastered orchestration, which he later considered to be one of his strong points.', 'Piazzolla\'s new approach to the tango, nuevo tango, made him a controversial figure in his native land both musically and politically. However, his music gained acceptance in Europe and North America, and his reworking of the tango was embraced by some liberal segments of Argentine society, who were pushing for political changes in parallel to his musical revolution.', 'He received the news of the death of his father in October 1959 while performing in Puerto Rico and on his return to New York City a few days later, he asked to be left alone in his apartment and in less than an hour wrote his most famous and loveliest tango, Adiós Nonino, in homage to his father.', 'Piazzolla\'s nuevo tango was distinct from the traditional tango in its incorporation of elements of jazz, its use of extended harmonies and dissonance, its use of counterpoint, and its ventures into extended compositional forms. As Argentine psychoanalyst Carlos Kuri has pointed out, Piazzolla\'s fusion of tango with this wide range of other recognizable Western musical elements was so successful that it produced a new individual style transcending these influences. It is precisely this success, and individuality, that makes it hard to pin down where particular influences reside in his compositions, but some aspects are clear.', 'In his musical professionalism and open-minded attitude to existing styles he held the mindset of an 18th-century composing performer such as Handel or Mozart, who were anxious to assimilate all national "flavors" of their day into their own compositions, and who always wrote with both first-hand performing experience and a sense of direct social relationship with their audiences. This may have resulted in a backlash amongst conservative tango aficionados in Argentina, but in the rest of the West it was the key to his extremely sympathetic reception among classical and jazz musicians, both seeing some of the best aspects of their musical practices reflected in his work. Thanks to: Wikipedia', 'See and listen to Adios Nonino by Astor Piazzola and his quintet in Utrecht, Holland in 1984.', ], "imgUrl": `${prefix}piazzolla.jpg`, "link": `javascript:void(0)`, "poem": false, "mainImg": true, }, ], "Social Science": [ { "title": "Favela Children", "sub-title": "", "author": "Ute Creamer", "description": [ 'During the summer of 1979, I visited the large Waldorf School in Sao Paulo, Brazil. Previously a friend had told me that one of the teachers there intended to open a school in a favela (slum). I asked if I could speak with that teacher, Ute Craemer. Although she still taught in the Sao Paulo Waldorf School, her heart was in the "escolinha" (little school) situated about seven miles away in a favela inappropriately named Monte Azul (blue hill). The favela was not on a hill, but in a muddy depression; it wasn\'t blue either, but gray-brown. But names are mysterious things and somehow it fits in this case, at least now. And the school wasn\'t a school in the proper sense either. The escolinha was a barrack-like house on a small piece of land above the favela. It was divided into rooms where various activities took place: dance, painting, theater, cooking, sewing. There was also a carpentry, a kindergarten and a play room. The children, between three and sixteen years of age, attended the escolinha before or after their official school hours. They were the poorest of the poor and naturally could not pay for the lessons they received.', ], "imgUrl": `${prefix}favela-big.jpg`, "link": `${prefix}favela-intro.html`, "poem": false, }, ], "Poetry": [ { "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, }, { "title": "The Southern Cross", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "Gracefully the gaucho gallops through
The pampa’s waving windswept grasses;
From time to time he strokes his beard,
Black as the eyes of his woman’s lashes.", "Orion patiently makes its rounds,
Dripping dust in the River Plate,
While over the rancho, his destination,
The Southern Cross guards the gate.", ], "imgUrl":`${prefix}gaucho.jpg`, "link": `${prefix}southern-cross-poem.html`, "poem": true, }, { "title": "Reincarnation Blues - Cantos I to IX", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "Often I try to analyze
the reasons for being here and now,
today, kicking and alive,
swearing and forgetting my solemn vow.", "Once I was nothing, a bare-ass nude,
and in not too many years to go
again a nothing nada dude.
That's the way it goes, you know.", ], "imgUrl": `${prefix}ascent-bosch-2.jpg`, "link": `${prefix}reincarnation-blues-9.html`, "poem": false, }, ], "Political Science": [ { "title": "A Military Rich in Dollars, Poor in People", "sub-title": "", "author": "Andrea Mazzarino", "description": [ "The American military is now having trouble recruiting enough soldiers. According to the New York Times, its ranks are short thousands of entry-level troops and it’s on track to face the worst recruitment crisis since the Vietnam War ended, not long after the draft was eliminated.", "Mind you, it’s not that the military doesn’t have the resources for recruitment drives. Nearly every political figure in Washington, including House Speaker Nancy Pelosi and Senate Minority Leader Mitch McConnell, invariably agrees on endlessly adding to the Pentagon’s already staggering budget. In fact, it’s nearly the only thing they seem capable of agreeing on. After all, Congress has already taken nearly a year to pass a social-spending package roughly half the size of this year’s defense budget, even though that bill would mitigate the costs of health care for so many Americans and invest in clean energy for years to come. (Forget about more money for early childhood education.)", "Nor is the Pentagon shy about spending from its bloated wallet to woo new recruits. It’s even cold-calling possible candidates and offering enlistment bonuses of up to $50,000.", ], "imgUrl": `${prefix}top-gun.jpg`, "link": `${prefix}military-mazzarino.html`, "poem": false, }, { "title": "A Trail of Tears", "sub-title": "How Veterans Return From America's Wars", "author": "Ann Jones", "description": [ "In 2010, I began to follow U.S. soldiers down a long trail of waste and sorrow that led from the battle spaces of Afghanistan to the emergency room of the trauma hospital at Bagram Air Base, where their catastrophic wounds were surgically treated and their condition stabilized. Then I accompanied some of them by cargo plane to Ramstein Air Base in Germany for more surgeries at Landstuhl Regional Medical Center, or LRMC (pronounced Larm-See), the largest American hospital outside the United States.", "Once stabilized again, those critical patients who survived would be taken by ambulance a short distance back to Ramstein, where a C-17 waited to fly them across the Atlantic to Dover Air Base in Delaware. There, tall, multilayered ambulances awaited the wounded for the last leg of their many-thousand-mile journey to Walter Reed Army Medical Center in Washington D.C. or the Naval Hospital at Bethesda, Maryland, where, depending upon their injuries, they might remain for a year or two, or more.", "Now, we are in Germany, halfway home. This evening, the ambulance from LRMC heading for the flight line at Ramstein will be full of critical-care patients, so I leave the hospital early and board the plane to watch the medical teams bring them aboard. They’ve done this drill many times a week since the start of the Afghan War. They are practiced, efficient, and fast, and so we are soon in the air again. This time, with a full load.", ], "imgUrl": `${prefix}wounded-soldiers.png`, "link": `${prefix}jones-they-were-soldiers.html`, "poem": false, }, ], "Children's Corner": [ { "title": "The Magic Mound", "sub-title": "Chapter One", "author": "Frank Thomas Smith", "description": [ "It had rained the night before and the unpaved road had turned to reddish mud. After they reached the top of a hill and started down the other side, the minivan slipped on a curve and the back wheels got stuck in a ditch on the side of the road. Zeca drove back and forth in a rocking motion trying to free the wheels, but they only spun and sank deeper into the mud. Luckily a farmer from a nearby ranch happened to pass by with a tractor and pulled them out. It was great fun for the children, for it was part of the adventure of vacation. They were on their way to a house in the country which belonged to one of dona Ute's many friends.", "Sergio, Divino and the others lived in a favela, the Brazilian word for slum, in the great city of Sao Paulo. They were very poor and lived in one-room shacks without running water or electricity. The bright light in their lives was Dona Ute, who ran a school in the favela called the escolinha, which means little school. When Sergio's and Divino's mother died, dona Ute took them into her own house and gave them good food and decent clothes. Zeca, a young man from the favela who had also lived with Dona Ute when he was a child, now worked as her assistant. None of the children had ever been out of Sao Paulo before in their lives.", ], "imgUrl": `${prefix}magic-mound-3.jpg`, "link": `${prefix}magic-mound-1.html`, "poem": false, }, { "title": "The Seventh Birthday", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "Usually Nicky's mother has to call him at least three times, kiss him twice and pull his ear gently once before he gets up in the morning. But not today.", '"Nicky," she says, "it\'s time to get up. Do you remember what day it is?"', 'What day? Nicky thinks – Monday, Tuesday? Then he remembers: his birthday! He jumps out of bed and cries, "It\'s my birthday, I\'m seven years old!"', 'Before going to school, Nicky\'s mother and father and his little sister, Jeannie, sing Happy Birthday to You and he opens his presents, which have been placed around a candle on the living room table. They call it the "birthday table". It is covered with a light-green cloth on the children\'s birthdays and the only light is from the beeswax candle, which sheds a magical glow throughout the room.', "Their dog Frodo, who is very old, for a dog that is, watches everything and wags his tail slowly from time to time. He is happy when the children are happy, although you couldn't tell it from looking at his face, which always has the same expression.", ], "imgUrl": `${prefix}froddo-1.jpg`, "link": `${prefix}seventh-birthday.html`, "poem": false, }, ], "Anthroposophy": [ { "title": "Esoteric Lessons for the First Class of the School for Spiritual Science", "sub-title": "Lesson Five", "author": "Rudolf Steiner", "description": [ "My dear friends,", "We have seen the changes which take place in a person who encounters the Guardian of the Threshold. And whether he or she is able to approach and come to an understanding of the spiritual world in any form depends upon understanding the essence of this Guardian. In particular we have seen how what constitutes man’s inner self – thinking, feeling, willing – undergoes a substantial transformation in the Guardian of the Threshold’s domain. Especially in the last lesson here, it became clear to us how in a certain respect thinking, feeling and willing go different ways upon entering the spiritual world, how they enter into different relationships than those which usually prevail for earthly consciousness.", "We have seen how through his will man is greatly influenced by earthly conditions. At the moment when the person approaches the spiritual world, in a certain sense thinking, feeling and willing become separated. The will, now living much more independently than previously in the soul, shows itself to be much more related to the forces which attract man to the earth. Feeling shows itself to be related to the forces which hold man in the periphery of the earth through which the light penetrates when it shines upon the earth in the morning, and which disappears from sight on the opposite side in the evening. Thinking, however, is the force which relates upwards to the heavenly. So that in the moment that man stands before the Guardian of the Threshold, this Guardian draws his attention to how he belongs to the whole world: through his will the earth, through his feeling the periphery, through his thinking the higher powers.", ], "imgUrl": `${prefix}1goetheanum.jpg`, "link": `${prefix}steiner-class-5.html`, "poem": false, }, { "title": "Esoteric Cosmology", "sub-title": "Lesson Three", "author": "Rudolf Steiner", "description": [ "A week ago, I tried to explain the manner of thinking, so strange to western minds, through which the theosophist attains his insights and knowledge of the cosmos. The sketchy character these lectures necessarily have prevents me from delving more profoundly into theosophical cosmology. Nevertheless, I will attempt today to give you at least a picture in descriptive form of the origin of the world based on Theosophy. I beg those who have scientific bents to bear in mind that in the course of three short lectures it isn't possible to go into scientific explanations of what I will say today. These scientific explanations will be included in a subsequent lecture cycle, in which I will speak in more detail about this subject. Also, in the second volume of my Theosophy, which will soon be published, cosmology will be discussed.", "Allow me first of all to mention an important thought, which is basically very simple, but which must be clear to whoever wishes to understand evolution in the theosophical sense. When we speak of development, or evolution in a broad sense, we don't only mean the development of animal or plant life from a previous form, but we also mean the great transformations within the universe, and we include the origin of matter, the matter we can today perceive with our physical senses.", ], "imgUrl": `${prefix}big-bang.jpg`, "link": `${prefix}esoteric-cosmology-3.html`, "poem": false, }, ], "Fiction": [ { "title": "The Stranger", "sub-title": "", "author": "J. D. Salinger", "description": [ "The maid at the apartment door was young and snippy and she had a part-time look about her. “Who’d ya wanna see?” she asked the young man hostilely.", "The young man said, “Mrs. Polk.” He had told her four times over the squawky house phone whom he wanted to see.", "He should have come on a day when there wouldn’t be any idiots to answer the house phones and doors. He should have come on a day when he didn’t feel like gouging his eyes out, to rid himself of hay fever. He should have come - he shouldn’t have come at all. He should have taken his sister Mattie straight to her beloved, greasy chop suey joint, then straight to a matinee, then straight to the train - without stopping once to take out his messy emotions, without forcing them on strangers. Hey! Maybe it wasn’t to laugh like a moron, lie and leave.", ], "imgUrl": `${prefix}shell-shocked.jpg`, "link": `${prefix}salinger-stranger.html`, "poem": false, }, ], }; const articlesKeys = Object.keys(articles); const navChekboxes = Array.from(document.querySelectorAll("#nav-menu input")); // Uncheck all other hidden checkboxes when one is checked // colapses nav-menu dropdowns when a new one is expanded function createNavMenu(navMenuElement) { navChekboxes.forEach(input => { input.addEventListener("change", () => { navChekboxes.forEach(element => { if (element === input) return element.checked = false; }); }); }); 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); } }); } createMenuLinks(); //event listeners const navmenuLinkArray = Array.from( navMenuElement.querySelectorAll(".nav-menu-links") ); const scrollToTarget = target => { const headerOffset = 60; 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"; } }); }); } 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 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 link = articleDiv.querySelector("[data-article-link]"); articleInnerDiv.id = article["title"] .toLowerCase() .replace(/[^a-zA-Z0-9]/g, ""); titleElement.innerHTML = article["title"]; author.innerText = article["author"]; if (article["sub-title"] && article["sub-title"].length !== 0) { subTitle.innerText = article["sub-title"]; } img.src = article["imgUrl"]; link.href = article["link"]; // Special Atributes for "Featured Art" if (article["mainImg"]) { 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 = "left"; } 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(); }; })();