(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": "A woman in the Sun", "sub-title": "", "author": "", "description":[ "Edward Hopper, (July 22, 1882 - May 15, 1967) was a prominent American realist painter and printmaker. While he was most popularly known for his oil paintings, he was equally proficient as a watercolorist and printmaker in etching. Both in his urban and rural scenes, his spare and finely calculated renderings reflected his personal vision of modern American life. One of his teachers, artist Robert Henri, taught life class. Henri encouraged his students to use their art to \"make a stir in the world\". He also advised his students, \"It isn't the subject that counts but what you feel about it\" and \"Forget about art and paint pictures of what interests you in life.\" He encouraged them to imbue a modern spirit in their work. Some artists in Henri's circle, including John Sloan, became members of \"The Eight\", also known as the Ashcan School of American Art. Hopper's first existing oil painting to hint at his famous interiors was Solitary Figure in a Theater (c.1904). During his student years, he also painted dozens of nudes, still life studies, landscapes, and portraits, including his self-portraits. Not until he was 41 did he receive recognition for his work. His financial stability now secured, Hopper would live a simple, stable life and continue creating art in his distinctive style for four more decades."], "imgUrl": `${prefix}hopper-woman-sun.jpg`, "link": "", "poem": false, "mainImg": true, }, ], "Social Science": [ { "title": "Basic Issues of the Social Question - Unresolved", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "I. Beyond Capitalism and Socialism", "Juancito is nine years old but looks six. He lives on the streets of a Latin American city and lives by the laws of the streets. He is already a criminal of sorts because begging is illegal and he is a beggar. In a year or two he will graduate to petty thievery and then on to violent crime. More than likely he will become a drug addict, thereby making his own violent end at the hands of the police or disease inevitable. Members of the middle and upper classes will shake their heads at the depravity of the poor or in commiseration, consciously or not will wish him good riddance and carry on as before. Juancito’s name is legion; he can be found in virtually all regions of the world. He is a victim of social injustice – a euphemism for greed.", "Society is at a point in history where it must decide upon the path it wishes to follow. A crossroads is usually thought of as an either-or decision. One road goes in one direction, the other in a different direction. Modern history has, in fact, drawn two apparently different paths: Communism or Capitalism. One part of the world chose one of these paths and came upon a dead-end, hurled itself forward and crashed into a wall, aptly symbolized in Berlin, drenched in blood and misery. The other part kept to its chosen path of Capitalism, only slightly modified, and fought to defeat or at least contain the hegemonic ambitions of the Soviets. The Communists lost and logic seems to conclude that the other path was the correct one all along, and on which the whole world must now tread. The danger of this conclusion lies in the possibility that socialist criticism of Capitalism will only lead to a repetition of the Communist or some other ideological experiment, with similar and foreseeable disastrous consequences. The fact that Communism has been found, in practice, to be worse than the evil it wished to supplant, does not necessarily mean that its criticisms of Capitalism are not, at least to a large extent, correct and that the Juancitos of the world’s suffering is indeed the result of capitalist indifference.", ], "imgUrl": `${prefix}favela.jpg`, "link": `${prefix}fts-threefold.html`, "poem": false, "mainImg": false, }, { "title": "Favela children", "sub-title": "Chapters 10 and 11", "author": "Ute Creamer", "description":[ "Diary 1970-1975", "November 24, 1970", "In view of the Brazilian coast. Another day and the ocean journey will be over. We are really carefree here on the ship, our Brazilian duties receding more every day instead of approaching. Since Las Palmas we have had beautiful weather, sunny and warm. We lay all day on deck, the ocean's vastness ahead, the mild wind over us and the officers' gaze on us. They observe our every movement with binoculars from the bridge. The poor fellows aren't allowed to come down and mix with the common folk.", ], "imgUrl": `${prefix}favela-cover.jpg`, "link": `${prefix}favela-children-9.html`, "poem": false, "mainImg": false, }, ], "Anthroposophy": [ { "title": "Toward a Threefold Society", "sub-title": "Preface to the Fourth German Edition", "author": "Rudolf Steiner", "description":[ "The challenges which contemporary society presents will be misunderstood by those who approach them with utopian ideas. It is of course possible to believe that any one of diverse theories, arrived at through personal observation and conviction, will result in making people happy. Such a belief can acquire overwhelming persuasive power. Nevertheless, as far as the social question of the times is concerned, it becomes irrelevant as soon as the attempt is made to assert it.", "The following example, although seeming to carry this proposition to an extreme, is nevertheless valid. Let us assume that someone is in possession of a perfect, theoretical solution to the social question. In spite of this, in attempting to offer it to the public he becomes the victim of an unpractical belief. We no longer live in an age in which public life can be influenced in this way. People's minds are simply not disposed to accept the ideas of another as far as this subject is concerned. They will not say: here is someone who knows how society should be structured, so we will act according to his opinions.", ], "imgUrl": `${prefix}toward-threefold-book-cover.png`, "link": `${prefix}basic-issues-preface.html`, "poem": false, "mainImg": false, }, { "title": "Anththroposophy – an Introduction", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "There is nothing secret about anthroposophy. An enormous literature on the subject exists, including many books and lectures (more than 6,000) by Rudolf Steiner, published in German. A relatively small portion has been translated into Spanish, but what is available is more than sufficient for anyone who desires to be well informed. Literature by other authors also exists.", "As anthroposophy is intimately connected with Rudolf Steiner, it will be convenient to say a few words about him before going into the material itself. Steiner was born in 1861 in what was then a part of the Austro-Hungarian Empire, then became Yugoslavia and is now Croatia. His father, a hunter by profession, was chief of a railroad station in a small rural town. Steiner was a gifted child, so his parents later moved close to Vienna so he could continue his studies. Aside from his intellectual capacities, he had other gifts. He could “see” elemental beings in nature, for example. When, however, he realized that no one else shared these clairvoyant experiences, he decided to remain silent about them.", ], "imgUrl": `${prefix}steiner4.jpg`, "link": `${prefix}fts-anthroposophy-introduction.html`, "poem": false, "mainImg": false, }, { "title": "Anthroposophical Guidelines", "sub-title": "", "author": "Rudolf Steiner", "description":[ "These Guidelines were written from February 1924 through March 1925. Rudolf Steiner died on March 30, 1925", "5. The human being needs spiritual self-knowledge for inner peace. He finds himself in his thinking, feeling and willing. He sees how thinking, feeling and willing are dependent upon the natural human being. Where health and illness are concerned, they must follow the physical body in its strength and debilitation. Sleep extinguishes them. Life’s experiences show how dependent spiritual experience is on the physical body. One may therefore come to the conclusion that self-knowledge is lost midst these everyday experiences. Then the essential question arises: whether self-knowledge and therewith certainty about the true self beyond ordinary experience, is even possible. Anthroposophy wishes to answer this question based upon sound spiritual experience. It is not based on mere opinion or belief, but on experience of the spirit, which is as certain as the experience of the body.", ], "imgUrl": `${prefix}guidelines-image.jpg`, "link": `${prefix}guidelines-5-12.html`, "poem": false, "mainImg": false, }, { "title": "My Esoteric Education", "sub-title": "How I Became an Anthroposophist, and How To Know Higher Worlds", "author": "Monique Sanchíz de Mihalitsianos", "description":[ "It’s one of those nights again where I can’t get any sleep. I’ve been thinking about this lately and decided to use this time under the disappointingly clouded night-sky to type it all down. Heeereeee it goes:", "I was re-introduced to esoterism at the age of 14. I say reintroduced because I’m sure I’ve studied it before, in my past lives. I was raised Protestant Christian (my mother’s influence on the household) in a Catholic country, with a non-practicing Catholic father. I grew up religious. I read a lot of fantasy books growing up, a lot of epic novels. I played a lot of sports (still do so). I was a normal kid with a happy, healthy life.", "The shift came when my first boyfriend lent me a few of his books on Metaphysics.", "There was one fundamental idea in those books that changed the way I looked at things, and it was this: There’s another reality beyond the physical reality that we can approach in the form of ideas, and when we engage with these ideas, new neural pathways are formed in the brain, which in turn influences how we behave, which directly affects our reality. In other words, our thoughts create our reality.", ], "imgUrl": `${prefix}monique-2.jpg`, "link": `${prefix}monique-anthroposophist.html`, "poem": false, "mainImg": false, }, ], "Fiction": [ { "title": "The Girl in the Floppy Hat", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "My infrequent trips to the States, on family business or just business, were almost always uneventful. But the last two had been the most eventful journeys of my life. The first began with a four-hour bus ride from my home in a remote corner of Argentina to the city of Cordoba, where I entered a travel agency a few minutes after three in the afternoon and approached Luciano’s desk. He stood up, smiled automatically and held out his hand. As I took it his smile vanished as quickly as it had appeared and he said, “You traveling today…or tomorrow?” and I knew something was wrong.", "“Today, of course.”", "He looked at me, obviously puzzled, then shrugged. “Correct, no problem. For some reason I thought it was tomorrow.” (The customer is always right, even when he isn’t.)", "Part of my work as a consultant to agricultural cooperatives is to analyze misunderstandings. Do you know what the problem is? People don’t listen. Luciano sat down and clicked away at his computer. I sat across from him and glanced at the calendar on his desk: Friday, January 8. I was about to say, Hey, Luciano, you should keep your calendar up to date and you’d know when your clients were traveling, but instead I opened the newspaper I’d bought at a kiosko outside the agency just before entering and looked at the date: Friday, January 8. My face felt hot and I was glad that Luciano was busy changing my reservation and couldn’t notice my embarrassment. I had left home a day early. It made no difference for what I had to do in Florida, except that I wanted to leave on Saturday and arrive on Sunday morning in order to rest one day and get busy on Monday. Now I’d have a Saturday on my hands. Still, it was the first time something like that had happened to me. I might misplace my glasses now and then, but a whole day!  ", ], "imgUrl": `${prefix}floppy-hat.png`, "link": `${prefix}girl-floppy-hat.html`, "poem": false, "mainImg": false, }, { "title": "Tram 13 to Opernplatz", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "Smith awoke from his siesta and felt like he’d just parachuted into enemy territory, something he actually did once, into France on D-Day. He couldn’t remember the jump itself, only the jolt of the landing. It was like waking up. He went into the bathroom to urinate and splash cold water on his face. Then he opened the door to the living room, which looked familiar. There were a few people sitting around, but the only ones he recognized were Fleur and Rafael. Fleur, although aging (at last), still as tall and beautiful as ever, Rafael taller still, balding, bearded (today – the beard comes and goes), silent as usual. No one paid attention to Smith’s entrance, he sat in an armchair and watched them but they didn’t watch him.", "“If we want to get to the opera on time, we should leave,” Fleur called out to someone not in the room in the Queen's English tinted —or tainted if you prefer— by the South African veld.", "Ya voy, Smith’s wife called from the kitchen, where she was washing dishes or something. A moment later she entered the living room and they all stood up, except Smith. Let’s go, the wife said, she pecked Smith on the forehead and they all marched out the door. The last one out, Rafael, stopped at the door and said Ciao to Smith, who was staring down at the floor. Ciao, he answered without looking up. He was offended that they hadn’t asked him to go along, but he also had a vague remembrance that he might have mentioned that he didn’t like opera, which wouldn’t have been true if he’d indeed said it. He stood up and went into the kitchen intending to make coffee, something he always did after his siesta. He couldn't find the coffee though.", "Fuck ‘em, he mumbled, I’ll go to the opera alone.", ], "imgUrl": `/125/tram13.jpg`, "link": `/125/tram13.html`, "poem": false, "mainImg": false, }, ], "True Tales": [ { "title": "JFK's Lost Suitcase", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "It was 1960. I worked as an American Airlines ticket and ramp agent at New York's LaGuardia Airport. It was a time of DC 3s and 6s, Convairs and later the Lockheed Electra turboprops - which began to fall out of the sky at around that time because of torque pressure on the wings.", "We did everything. Nowadays you buy your ticket on the internet or from a travel agent. Then you were more likely to have bought it from us at the airport. That means that we didn't only give you a boarding pass and sling your bag onto a belt, but we also issued your ticket by hand, which made us tariff experts as well. And fares were complicated those days – there were “open jaw” constructions, which meant that you could travel from A to B but return from C to A (the open jaw being from B to C) and still get the round-trip discount, by calculating one-half the round trip fares A-B and C-A. There were also “triangular” fares – A to B to C to A, for example: New York-Paris-Buenos Aires-New York.", ], "imgUrl": `${prefix}jfk-jackie.jpg`, "link": `${prefix}editorial-jfk.html`, "poem": false, "mainImg": false, }, ], "Poetry": [ { "title": "The Working Stiff", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "You were a working stiff then
in a free market world – when
you were hungry, cold and wet,
cheated of all except your sweat.", "You hoped for insurrection,
you dreamed of resurrection.
Then they told you about where
those bad guys were over there.", "To fight for your country is what you ought,
Which sounded right so you went and fought.
You didn't know then that you fought
for it – the same old market force.", ], "imgUrl": `${prefix}simpsons-working-stiff.jpg`, "link": `${prefix}working-stiff.html`, "poem": true, "mainImg": false, }, ], "Current Events": [ { "title": "The False Promise of ChatGPT", "sub-title": "", "author": "Noam Chomsky, Ian Roberts and Jeffrey Watumull", "description":[ "Jorge Luis Borges once wrote that to live in a time of great peril and promise is to experience both tragedy and comedy, with “the imminence of a revelation” in understanding ourselves and the world. Today our supposedly revolutionary advancements in artificial intelligence are indeed cause for both concern and optimism. Optimism because intelligence is the means by which we solve problems. Concern because we fear that the most popular and fashionable strain of A.I. — machine learning — will degrade our science and debase our ethics by incorporating into our technology a fundamentally flawed conception of language and knowledge.", "OpenAI’s ChatGPT, Google’s Bard and Microsoft’s Sydney are marvels of machine learning. Roughly speaking, they take huge amounts of data, search for patterns in it and become increasingly proficient at generating statistically probable outputs — such as seemingly humanlike language and thought. These programs have been hailed as the first glimmers on the horizon of artificial general intelligence — that long-prophesied moment when mechanical minds surpass human brains not only quantitatively in terms of processing speed and memory size but also qualitatively in terms of intellectual insight, artistic creativity and every other distinctively human faculty.", ], "imgUrl": `${prefix}chat-gpt.png`, "link": `${prefix}chomsky-a-i.html`, "poem": false, "mainImg": false, }, { "title": "Roses Dressed in Black", "sub-title": "America's War Economy and the Urgent Call for Peace in the Middle East", "author": "Liz Theoharis", "description":[ "On September 19, 2001, eight days after 9/11, as the leaders of both parties were already pounding a frenzied drumbeat of war, a diverse group of concerned Americans released a warning about the long-term consequences of a military response. Among them were veteran civil rights activists, faith leaders, and public intellectuals, including Rosa Parks, Harry Belafonte, and Palestinian-American Edward Said. Rare public opponents of the drive to war at the time, they wrote with level-headed clarity:", "Twenty-three years and more than two wars later, this statement reads as a tragic footnote to America’s Global War on Terror that left an entire region of the planet immiserated. It contributed to the direct and indirect deaths of close to 4.5 million people, while costing Americans almost $9 trillion and counting.", "The situation is certainly different today. Still, over the last few weeks, those prophetic words, now 22 years old, have been haunting me, as the U.S. war machine kicks into ever higher gear following the horrific Hamas massacre of Israeli civilians and the brutal intensification of the decades-long Israeli siege of civilians in Gaza. Sadly, the words and actions of our nation’s leaders have revealed a staggering, even willful, historical amnesia about the disastrous repercussions of America’s twenty-first-century war-mongering.", ], "imgUrl": `${prefix}black-rose.jpg`, "link": `${prefix}theoharis-black-roses.html`, "poem": false, "mainImg": false, }, ], "Social Science": [ { "title": "Favela children", "sub-title": "Chapter 9", "author": "Ute Creamer", "description":[ "Diary 1970-1975", "November 24, 1970", "In view of the Brazilian coast. Another day and the ocean journey will be over. We are really carefree here on the ship, our Brazilian duties receding more every day instead of approaching. Since Las Palmas we have had beautiful weather, sunny and warm. We lay all day on deck, the ocean's vastness ahead, the mild wind over us and the officers' gaze on us. They observe our every movement with binoculars from the bridge. The poor fellows aren't allowed to come down and mix with the common folk.", "December 1970", ], "imgUrl": `${prefix}favela-cover.jpg`, "link": `${prefix}favela-children-9.html`, "poem": false, "mainImg": false, }, { "title": "Basic Issues of the Social Question - Unresolved", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "I. Beyond Capitalism and Socialism", "Juancito is nine years old but looks six. He lives on the streets of a Latin American city and lives by the laws of the streets. He is already a criminal of sorts because begging is illegal and he is a beggar. In a year or two he will graduate to petty thievery and then on to violent crime. More than likely he will become a drug addict, thereby making his own violent end at the hands of the police or disease inevitable. Members of the middle and upper classes will shake their heads at the depravity of the poor or in commiseration, consciously or not will wish him good riddance and carry on as before. Juancito’s name is legion; he can be found in virtually all regions of the world. He is a victim of social injustice – a euphemism for greed.", "Society is at a point in history where it must decide upon the path it wishes to follow. A crossroads is usually thought of as an either-or decision. One road goes in one direction, the other in a different direction. Modern history has, in fact, drawn two apparently different paths: Communism or Capitalism. One part of the world chose one of these paths and came upon a dead-end, hurled itself forward and crashed into a wall, aptly symbolized in Berlin, drenched in blood and misery. The other part kept to its chosen path of Capitalism, only slightly modified, and fought to defeat or at least contain the hegemonic ambitions of the Soviets. The Communists lost and logic seems to conclude that the other path was the correct one all along, and on which the whole world must now tread. The danger of this conclusion lies in the possibility that socialist criticism of Capitalism will only lead to a repetition of the Communist or some other ideological experiment, with similar and foreseeable disastrous consequences. The fact that Communism has been found, in practice, to be worse than the evil it wished to supplant, does not necessarily mean that its criticisms of Capitalism are not, at least to a large extent, correct and that the Juancitos of the world’s suffering is indeed the result of capitalist indifference.", ], "imgUrl": `${prefix}favela.jpg`, "link": `${prefix}fts-threefold.html`, "poem": false, "mainImg": false, }, ], "Children's Corner": [ { "title": "The Magic Mound", "sub-title": "Chapter 10 and 11", "author": "Frank Thomas Smith", "description":[ "They walked in single file through the forest on their way to Urmaxa. There was hardly any path to speak of because it hadn't been used in so long. They were constantly turning to avoid fallen trees or dense underbrush. Sergio lost his sense of direction and asked Mara to stop for a moment.", "\"How do you know we're still going in the right direction?\" he asked her.", "\"That's easy,\" she said. \"At the beginning of the day the sun is over there.\" She pointed to the northeast, on their right. During the day it rises in the sky until it is overhead and a little to the front of us, then it crosses to the left and goes down.\" She described an arc with her arm across the sky. \"So all we have to do is keep going in the right direction in relation to the sun.\"", "\"What if there is no sun?\" Divino, who was listening intently, asked.", ], "imgUrl": `${prefix}magic-mound-cover.png`, "link": `${prefix}magic-mound-10-11.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 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(); }; })();