(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 = { "Reincarnation Blues": [ { "title": "Reincarnation Blues", "sub-title": "", "author": "The Cantos", "description":[ "Voice: Frank Thomas Smith/María Teresa Gutiérrez
Music and tech: Nicolás Gawain Smith
Art: Celina MacKern", "Blues is associated with sad memories and, more importantly, hope. But hope is often enabled by \“eternal rest\” in a heavenly nirvana after death. No more slavery, no more suffering, no more pain. But reincarnation tells a different story. Death yes, but a merely temporary one in order to lick your wounds, get a grip and begin again on a long, difficult path of development.", "So the Blues of these verses is a kind of wake-up call, that it ain't so easy after all, that the quest is just beginning. And it's certainly not as boring as \“eternal rest\”. Start with Canto I. If you think it's worthwhile, continue, there are twelve. If not, don't forget to wave goodbye.", "Read and Listen", ], "imgUrl": `${prefix}reincarnation-blues-cover-2.jpg`, "link": `/reincarnation_blues/reincarnation-blues.html`, "poem": false, "mainImg": true, } ], "Anthroposophy": [ { "title": "The Brain and Thinking", "sub-title": "", "author": "Rudolf Steiner", "description":[ "This was the first lecture given to the workmen after the destruction of the Goetheanum by arson on New Years Eve 1922/23. As a demonstration of their sympathy, all present stood when Rudolf Steiner entered.", "Dr. Steiner: It is difficult to put into words the sorrow I feel. I know of your deep sympathy, so let me be brief. May I take this opportunity to call attention to the fact that as early as January 23, 1921, here in this hall, I read from a brochure a statement made by an opponent, indeed, one can already say an enemy, that went like this:", "There are plenty of spiritual sparks of fire that strike like lightning against the wooden mouse trap. It will require quite a bit of cleverness on Steiner's part to work in a conciliatory manner so as to prevent a real spark of fire from bringing the Dornach grandeur to an inglorious end some day.", ], "imgUrl": `${prefix}goetheanum1.jpg`, "link": `${prefix}steiner-brain-and-thinking.html`, "poem": false, "mainImg": false, }, { "title": "Course on World Economy", "sub-title": "Lecture 2", "author": "Rudolf Steiner", "description":[ "Ladies and gentlemen,", "It is precisely in this sphere of Political Economy that the first conceptions and ideas which we have to develop cannot but be a little complicated — and for a perfectly genuine reason. For you must imagine the economic process, considered even as a world-economy, as a thing of perpetual movement. As the blood flows through the human being, so do goods, as merchandise or commodities, flow by every conceivable channel through the whole economic body. And we must conceive, as the most important thing within this economic process, all that takes place in buying and selling. That, at least, is true of the economic life of today. Whatever else there may be — and we shall of course have to consider the most varied impulses contained in economic life — whatever else there may be, the subject of Economics comes home to a man directly when he has something to buy or sell. In the last resort the instinctive thinking of every naive person on economic matters culminates in the process taking place between buyer and seller. Fundamentally, this is what it all comes to.", ], "imgUrl": `${prefix}steiner-economy-2.jpg`, "link": `${prefix}steiner-world-economy-2.html`, "poem": false, "mainImg": false, }, { "title": "William Shakespeare", "sub-title": "", "author": "Rudolf Steiner", "description":[ "Friends who heard that notes existed of a lecture on Shakespeare given by Dr. Steiner in 1902 at the Workmen’s School in Berlin expressed the wish to read these notes. They were taken down by Johanna Mïcke, who did not know shorthand, so they do not claim to be complete. The 7 pages of typescript may correspond to about 25 pages of the original text of the lecture. But important points emerge even from these incomplete notes.", "Marie Steiner", "According to a remark by the famous writer Georg Brandes, we should include Shakespeare in the German classics. And if we consider the enormous influence Shakespeare has had on Goethe, schiller and the development of German literature in general since he was rediscovered in the middle of the eighteenth century, especially through Lessing, we must agree with that remark especially in view of the excellent translations of his work by Schlegel and Tieck.", ], "imgUrl": `${prefix}hamlet.jpg`, "link": `${prefix}steiner-shakespeare-eng.html`, "poem": false, "mainImg": false, }, { "title": "The Easter Festival and Its Background", "sub-title": "", "author": "Rudolf Steiner", "description":[ "Now let us think about the Easter Festival in connection with the Mystery of Golgotha. As you know, Easter is a movable festival — every year it is celebrated on a different date. Why is the date variable? Because it is determined, not by terrestrial but by celestial conditions. It is fixed by asking: When does spring begin? March 21st is always the beginning of spring and the Easter Festival takes place after this. Then there is a period of waiting until the moon becomes full, then another pause until the following Sunday, and Easter falls on the first Sunday after the first full moon after the beginning of spring. The first full moon can be on 22nd March, in which case Easter is very early; or the first full moon can be a whole twenty-nine days after 21st March. If, for example, there is a full moon on 19th March, spring has not yet begun and then after some twenty-eight days the moon is again full; the Easter Festival in that year will fall on the next Sunday — quite late in April.", ], "imgUrl": `${prefix}easter.jpg`, "link": `${prefix}steiner-easter.html`, "poem": false, "mainImg": false, }, ], "Poetry": [ { "title": "Mother Earth", "sub-title": "", "author": "Becky Hemsley", "description":[ "She’s mountains and she’s sunshine
She’s the moon, silvery bright
She’s the clouds and wind and rain
And she’s the dancing Northern Lights.", "She is deserts and savannahs
She’s the waves that fill the sea
She is birdsong and she’s flowers
She’s the blossom on the trees.", ], "imgUrl": `${prefix}mother-earth.jpg`, "link": `${prefix}hemsley-mother-earth.html`, "poem": true, "mainImg": false, }, ], "Fiction": [ { "title": "Love in the Life of Spies", "sub-title": "Chapter 1", "author": "Frank Thomas Smith", "description":[ "Paternostro
East Berlin, 1974", "Judith Baumgartner and Dr. Hans Staudenmaier were huddled over a map of West Berlin in a small basement room with no windows. A long florescent light on the ceiling hummed like a beehive. They were preparing a list of objectives that the Soviet Mission Military Patrol was to photograph on its next rounds. Actually they were suggesting, the Russians would decide. It was frustrating work for they seldom knew if their allies would approve their suggestions. Hans Staudenmaier, a robust middle-aged man with a goatee and rimless glasses, was doing the selecting and dictating to Judith, who made notes in German, which she would later translate into Russian in a stenographer's spiraled notebook made in West Germany. She was young and pretty and intense; there was a certain hardness about her which would have seemed unusual in one so young if we did not know that they were in the building in East Berlin that housed the STASI – East Germany’s State Security organization. It was difficult for them to think of objectives in West Berlin that hadn’t already been photographed.", ], "imgUrl": `${prefix}love-spies.jpg`, "link": `${prefix}love-spies-1.html`, "poem": false, "mainImg": false, }, { "title": "The Chinese Restaurant", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "I was in a rickety bus that had just reached the top of a mountain pass and started down the other side. I looked out the window and saw the floor of a valley far below. It was partly cultivated, the rest being forest-land and small villages bathed in soft twilight hues. The woman I loved occupied the seat next to me. She leaned against my shoulder to look out the window.", "\"Is that it?\" I asked her.", "\"Yes, that's Traslasierra\".", "I continued to smell the perfume of her hair after waking, but couldn't see her face clearly. Was she someone from my past, I asked myself, or was she still to come?", ], "imgUrl": `${prefix}chinese1.png`, "link": `${prefix}chinese-rest.html`, "poem": false, "mainImg": false, }, ], "Political Science": [ { "title": "Savage Capitalism", "sub-title": "", "author": "Noam Chomsky", "description":[ "The following is excerpted from David Barsamian’s recent interview with Noam Chomsky at AlternativeRadio.org.", "David Barsamian: On March 20th, the UN’s Intergovernmental Panel on Climate Change issued its latest report. The new IPCC assessment from senior scientists warned that there’s little time to lose in tackling the climate crisis. UN Secretary-General Antonio Guterres said, “The rate of temperature rise in the last half-century is the highest in 2,000 years. Concentrations of carbon dioxide are at their highest in at least 2 million years. The climate time bomb is ticking.” At COP 27 he said, “We are on a highway to climate hell with our foot still on the accelerator. It is the defining issue of our age. It is the central challenge of our century.” My question to you is: You’d think survival would be a galvanizing issue, but why isn’t there a greater sense of urgency in addressing it in a substantial way?", "Noam Chomsky: It was a very strong statement by Guterres. I think it could be stronger still. It’s not just the defining issue of this century, but of human history. We are now, as he says, at a point where we’ll decide whether the human experiment on Earth will continue in any recognizable form. The report was stark and clear. We’re reaching a point where irreversible processes will be set into motion. It doesn’t mean that everybody’s going to die tomorrow, but we’ll pass tipping points where nothing more can be done, where it’s just decline to disaster.", ], "imgUrl": `${prefix}burning-bill.jpg`, "link": `${prefix}chomsky-savage-capitalism.html`, "poem": false, "mainImg": false, }, { "title": "El camino de Adrian hacia el ingreso basico universal", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "No recuerdo quién fue el anfitrión la primera vez que Adrián y yo nos sentamos a la misma mesa, pero, luego de los habituales saludos y comentarios sobre la comida y el tiempo, comenzamos una conversación que a ambos nos resultó interesante, de modo que la retomamos cada vez que coincidíamos en ese lugar. En ese entonces, yo generalmente almorzaba en un restaurant vegetariano del centro de Buenos Aires. Aún está allí —con auto servicio y libre selección de mesa, lo que significa que uno podía y aún puede sentarse donde haya una silla vacía, un poco como en Europa. En Suiza y Alemania, si hay una silla vacía en la mesa de alguien, uno puede preguntar “Ist hier frei?” y la persona asentirá con la cabeza, a menos que esté esperando a alguien, entonces uno se sienta allí y come en silencio si así lo prefieren ambos, que es lo usual, o se entabla una conversación.", "Aunque Adrián dijo muy poco sobre sí mismo, supe por lo menos que vivía en San Luis —una provincia argentina— y que sólo venía a Buenos Aires ocasionalmente para hacer trámites. Supongo que a mí me gustaba más hablar de mí mismo que a él, así que, cuando me preguntó, a los postres, respondí, no textual pero sí básicamente:", "Nací en Argentina y ahora estoy viviendo aquí de nuevo después de hacer la universidad en los Estados Unidos y de pasar muchos años allí y en Europa. Y he podido observar (con ojos a lo sumo entreabiertos) las condiciones culturales, económicas y políticas en los países en que viví: Argentina, Suiza, Alemania y los Estados Unidos, y en muchos otros países (con ojos mayormente cerrados) por mi trabajo en la industria de las líneas aéreas.", ], "imgUrl": `https://southerncrossreview.org/143/ubi.jpg`, "link": `https://southerncrossreview.org/144/adrians-way-esp.html`, "poem": false, "mainImg": false, }, { "title": "Adrian's Way to a Universal Basic Income", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "I don't remember who was host the first time Adrian and I sat together at the same table, but after the usual nods and comments about the food and the weather, we began a conversation which we both found interesting, so it continued whenever we both happened to be there at the same time. Way back then, I usually ate lunch in a vegetarian restaurant in downtown Buenos Aires. It's still there – self-service and self-seating – which means you could and still can sit wherever a seat is available, sort of like in Europe. In Switzerland and Germany if a seat is available in someone else's table, you can ask “Ist hier frei?” and they'll nod, unless they're waiting for someone, and you sit there and eat in silence if both prefer, which is usually the case, or start a conversation.", "Although Adrian spoke very little about himself, I at least learned that he lived in San Luis – an Argentine province – and came to Buenos Aires only occasionally for untranslatable “trámites” [procedures]. I suppose I liked to talk about myself more than he did, so, when he asked, I said, over dessert, not verbatim, but basically:", "I was born in Argentina and live here again now after college in the United States and many years there and in Europe. I have been able to observe (with my eyes only half open, at most) cultural, economic and political conditions in the countries I have lived in: Argentina, Switzerland, Germany and the United States, and in many other countries (with eyes mostly closed) due to my employment in the airline industry.", ], "imgUrl": `https://southerncrossreview.org/143/ubi.jpg`, "link": `https://southerncrossreview.org/143/adrian-ubi.html`, "poem": false, "mainImg": false, }, ], "Current Events": [ { "title": "On Missing Dr. Strangelove", "sub-title": "", "author": "Andrew Bacevich", "description":[ "Bosley Crowther, chief film critic for the New York Times, didn’t quite know what to make of Dr. Strangelove at the time of its release in January 1964. Stanley Kubrick’s dark antiwar satire was “beyond any question the most shattering sick joke I’ve ever come across,” he wrote. But if the film had its hilarious moments, Crowther found its overall effect distinctly unnerving. What exactly was Kubrick’s point? “When virtually everybody turns up stupid or insane — or, what is worse, psychopathic — I want to know what this picture proves.”

We may find it odd for an influential critic to expect a movie to “prove” anything. Kubrick’s aim was manifestly not to prove, but to subvert and discomfit.", "With feature-length hyperbole — not a wisp of subtlety allowed — Dr. Strangelove made the case that a deep strain of madness had infected the entire U.S. national security apparatus. From the “War Room” that was the Pentagon’s holiest of holies all the way to the cockpit of a B-52 hurtling toward its assigned Russian target with a massive nuclear bomb in its belly, whack jobs were in charge.", ], "imgUrl": `${prefix}strangelove-2.jpg`, "link": `${prefix}bacevich-strangelove.html`, "poem": false, "mainImg": false, }, { "title": "Nuclear Armageddon Games in Ukraine", "sub-title": "", "author": "by Joshua Frank", "description":[ "In 1946, Albert Einstein shot off a telegram to several hundred American leaders and politicians warning that the “unleashed power of the atom has changed everything save our modes of thinking and we thus drift toward unparalleled catastrophe.” Einstein’s forecast remains prescient. Nuclear calamity still knocks.", "Even prior to Vladimir Putin’s bloody invasion of Ukraine, the threat of a nuclear confrontation between NATO and Russia was intensifying. After all, in August 2019, President Donald Trump formally withdrew the U.S. from the Intermediate-Range Nuclear Forces Treaty, long heralded as a pillar of arms control between the two superpowers.", "\“Russia is solely responsible for the treaty’s demise,” declared Secretary of State Mike Pompeo following the announcement. “With the full support of our NATO allies, the United States has determined Russia to be in material breach of the treaty and has subsequently suspended our obligations under the treaty.” No evidence of that breach was offered, but in Trump World, no evidence was needed.", ], "imgUrl": `${prefix}einstein-atom.jpg`, "link": `${prefix}frank-atomic-war.html`, "poem": false, "mainImg": false, }, ], "Spiritual Science": [ { "title": "The Gospel According to Mary Magdalene", "sub-title": "Chapter 4", "author": "", "description":[ "(Pages 1 to 6 of the manuscript, containing chapters 1 - 3, are lost.  The extant text starts on page 7...)", ". . . Will matter then be destroyed or not?", "The Savior said, All nature, all formations, all creatures exist in and with one another, and they will be resolved again into their own roots. For the nature of matter is resolved into the roots of its own nature alone. He who has ears to hear, let him hear.", "Peter said to him, Since you have explained everything to us, tell us this also: What is the sin of the world?", "The Savior said There is no sin, but it is you who make sin when you do the things that are like the nature of adultery, which is called sin. That is why the Good came into your midst, to the essence of every nature in order to restore it to its root.", ], "imgUrl": `${prefix}magdalene.jpg`, "link": `${prefix}gospel-mary-3.html`, "poem": false, "mainImg": false, }, { "title": "The Gospel of Thomas", "sub-title": "", "author": "", "description":[ "Elaine Pagels. Professor of Religion at Princeton University. is best known for her research into early Christianity and Gnosticism, explicated in The Gnostic Gospels, published in 1979, which explored conflicts in the early history of the Christian church revealed in the Nag Hammadi library, 13 leather-bound papyrus books discovered near the Egyptian town of Nag Hammadi in 1945.", "The Gospel of Thomas, the subject of Pagels’ 2003 book Beyond Belief: The Secret Gospel of Thomas, was found among the papyrus volumes. It contains a collection of sayings attributed to Jesus, some of which, according to Pagels, can be found in one or more of the other four official gospels but some of which stand entirely on their own.", "The subject of her talk concerned the differing portraits of Jesus that emerge when Thomas’ gospel is weighed against the synoptic gospels, especially the manuscript written by John, which Pagels suggests was drafted as a rebuttal to the picture of Jesus in Thomas, where Jesus is presented not as a divine entity but as a teacher seeking to help people discover the divine light within themselves.", ], "imgUrl": `${prefix}image-thomas.gif`, "link": `${prefix}gospel-thomas-2.html`, "poem": false, "mainImg": false, }, { "title": "The Gospel of John", "sub-title": "in relation to the other three gospels", "author": "", "description":[ "When a subject such as our present one is discussed from the standpoint of spiritual science, this is not done by basing the facts upon some document or other exposition come into being in the course of human development, and by then illuminating the facts in question on the authority of such a document. That is not the way of spiritual science. On the contrary, entirely independent of all documents, spiritual science investigates what has occurred in human evolution; and only then — after the spiritual scientist has completed his research by means independent of any documents, and knows how to describe what he has found — only then is the document in question examined with a view of discovering whether it agrees with what had first been disclosed without reference to any tradition whatever. So all the statements made in these lectures concerning the course of this or that event are by no means to be taken as merely deriving from the Bible, from one of the four Gospels, but rather as the conclusions arrived at by spiritual research independent of the Gospels. But no opportunity will be missed to show that everything the spiritual scientist can fathom and observe is to be found in the Gospels, particularly in the Gospel of John.", ], "imgUrl": `${prefix}rose-cross.jpg`, "link": `${prefix}gospel-john-2.html`, "poem": false, "mainImg": false, }, ], "Children's Corner": [ { "title": "The Magic Mound", "sub-title": "Cahpters 6 & 7", "author": "Frank Thomas Smith", "description":[ "The Queen asks the boys to rescue Mireya", "Queen Mamara continued to relate the history of Maxa. \"The first children grew up and had children of their own. These also grew up and had children until the community was about as big as it is today. Alam had prepared the Vidaluz according to Light's instructions, but he did not drink it himself. He was already very old and blind, a process which the Vitaluz cannot reverse. He was also sad and lonely without Ara and did not want to go on living. So he taught the Vidaluz recipe to his oldest son, Alaram.\"", "\"The same Alaram,\" Divino asked, \"or his father?\"", "\"The same Alaram. He was still a young man or course, because of the vidaluz.\"", ], "imgUrl": `${prefix}magic-mound-3.jpg`, "link": `${prefix}magic-mound-6-7.html`, "poem": false, "mainImg": false, }, { "title": "The Talking Trees", "sub-title": "", "author": "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 the 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 his mother told him it was an oak.", ], "imgUrl": `${prefix}talking-trees.jpg`, "link": `${prefix}talking-trees-espanol.html`, "poem": false, "mainImg": false, }, ], "Social Science": [ { "title": "Favela Children", "sub-title": "Chapter 4", "author": "Ute Creamer", "description":[ "Recently I had an interesting conversation with the GDS (German Development Service). As I was originally supposed to be working here as a teacher, but found upon arrival that there was already a school with six teachers, I suggested that we organize a kindergarten and a sewing circle. \"But that isn't social work,\" was the answer. Now, however, it has been recognized as social work and I am even to be allowed to take a three-week kindergarten course in Gramado (Rio Grande do sul). The GDS decisions are unfathomable. \"Impenetrable like the GDS\" has already become a slogan.", "Rio Grande do Sul is well suited to Europeans due to its temperate climate and having been mostly colonized by Germans - and, to a lesser extent, Italians and Poles. German or Platt dialect is mostly spoken, except in the big cities. It is a far cry from the real Brazil; no black faces, no openhearted sloppiness, no Brazilian giria (slang). Instead \"Cultivate the German heritage\" is the motto. Children, blue-eyed and blonder than in Germany, typical German farms with cackling hens on dung-hills and carefully cultivated beets, apple and pear trees instead of mamao and abacate, wine instead of cafezinho.", ], "imgUrl": `${prefix}favela-cover.jpg`, "link": `${prefix}favela-children-4.html`, "poem": false, "mainImg": 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 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"]) { titleElement.style.marginBottom = "1em"; link.style.display = "none"; img.style.maxWidth = "80%"; img.style.maxHeight = "100%"; img.style.marginLeft = "auto"; img.style.marginRight = "auto"; img.style.marginBottom = "1em"; img.style.float = "none"; img.insertAdjacentElement("afterend", author); } // if its a poem, make the div and link float (so the text doesn't go under the img) if (article["poem"]) { description.style.float = "left"; link.style.clear = "left"; link.style.float = "right"; } let i = 1; const className = article["title"] .replace(/[^a-zA-Z0-9]/g, "") .toLowerCase(); description.id = `${className}-paragraphs-div`; link.id = `${className}-main-link`; article["description"].forEach(descriptionParagraph => { const paragraph = document.createElement("p"); paragraph.innerHTML = descriptionParagraph; paragraph.className = `${className}-paragraph-${i}`; description.appendChild(paragraph); i++; }); mainPage.appendChild(articleDiv); checkAndReduce(); }); }); appendPicNavMenu(); } function mobilePortrait() { if (previousStylesheet.dataset.stylesheet == "mobile") return pageName.innerHTML = "Menu"; //create elements in mobile-navbar createNavMenu(navMobile); //get modify input and label "for" in mobile nav const navMobileInputs = Array.from(navMobile.querySelectorAll("input")); const navMobileLabels = Array.from(navMobile.querySelectorAll("label")); navMobileInputs.forEach(input => { input.id += "-mobile"; }); navMobileLabels.forEach(label => { label.htmlFor += "-mobile"; }); //append elements topBar.appendChild(navMobile); //create observer functions let observerMobileMenu = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type == "attributes") { if (menuBar.dataset.opened == "true") { navMobile.classList.add("open"); menuButton.classList.add("close"); } else { navMobile.classList.remove("open"); menuButton.classList.remove("close"); } } }); }); //create menu open button - three lines for (let i = 0; i < 3; i++) { const menuButtonLine = document.createElement("div"); menuButtonLine.className = "menu-button-line"; menuButton.appendChild(menuButtonLine); } //give new class to desktop menu navMobile.className = "nav-menu menu-mobile desktop-hide"; //observe for changes observerMobileMenu.observe(menuBar, { attributes: true, }); //menu button listener menuButton.addEventListener("click", () => { if (menuBar.dataset.opened === "false") { menuBar.dataset.opened = "true"; } else { menuBar.dataset.opened = "false"; } }); previousStylesheet.dataset.stylesheet = "mobile"; // musicLinks.innerHTML = "Words and Music" } //scroll to top on refresh window.onbeforeunload = function () { window.scrollTo(0, 0); }; //create elements for data-attributes // function to set data atributes acording to screen width function setStylesheetDataAttr() { if (screen.width <= 650) { if (stylesheetSelector.dataset.stylesheet == "mobile") return stylesheetSelector.dataset.stylesheet = "mobile"; } else if (screen.width >= 651 && screen.width < 1200) { if (stylesheetSelector.dataset.stylesheet == "medium") return stylesheetSelector.dataset.stylesheet = "medium"; } else { if (stylesheetSelector.dataset.stylesheet == "desktop") return stylesheetSelector.dataset.stylesheet = "desktop"; } } //execute on rezise window.addEventListener("resize", () => { setStylesheetDataAttr(); }); //ovserve changes on data-attributes and execute functions let observerStylesheetAttr = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type == "attributes") { if (stylesheetSelector.dataset.stylesheet === "mobile") { mobilePortrait(); } } }); }); observerStylesheetAttr.observe(stylesheetSelector, { attributes: true, }); //onload functions window.addEventListener("load", () => { setStylesheetDataAttr(); mainPage.offsetTop; introScreen.classList.add("fade-out"); setTimeout(() => { introScreen.style.display = "none"; document.querySelector("html").style.overflowY = "visible"; lightDarkWarning.classList.remove("desktop-hide", "mobile-hide"); }, 1000); //local storage - if exists change theme if (!localStorage.getItem("style")) return lightDarkWarning.style.display = "none"; const lightOrDark = localStorage.getItem("style"); if (lightOrDark === "dark") { stylesheet.href = `${prefix}css/dark.css`; } if (screen.width <= 650) { mobilePortrait(); } }); //remove light-and-dark warning onclick lightDarkWarning.addEventListener("click", () => { lightDarkWarning.style.display = "none"; }); // Toggle Stylesheets toggleStylesheetLightButton.addEventListener("click", () => { stylesheet.href = `${prefix}css/light.css`; localStorage.setItem("style", "light"); }); toggleStylesheetDarkButton.addEventListener("click", () => { stylesheet.href = `${prefix}css/dark.css`; localStorage.setItem("style", "dark"); }); // Sticky navbar const stickyFunc = () => { const limit = mainPage.offsetTop; const navCol = document.querySelector("#sticky-div "); if (window.pageYOffset + 50 >= limit) { navCol.classList.add("fixed-nav-col"); } else { navCol.classList.remove("fixed-nav-col"); } }; //observer function, scroll-in abnormal logo when footer is 50% visible let notFirstTime = 0; const observer = new IntersectionObserver( entries => { if (entries[0].isIntersecting === true) { if (notFirstTime > 0) return abnormalLogoStylesheet.href = `${prefix}css/logo2.css`; abnormalLogo.classList.add("logo-animation"); notFirstTime++; } }, { threshold: [0.5] } ); observer.observe(footerAbnormal); createNavMenu(navMenu); createArticlePeek(articles); window.onscroll = () => { stickyFunc(); }; })();