(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": "Marin Fierro's advice to his sons", "sub-title": "", "author": "José Hernández", "description":[ "A father who gives advice
More than father is a friend;
Your ears to me a moment lend,
Be careful nights as well as days:
No one knows in which dark place
An enemy he'll have to fend.", "I never had another schooling
Than life itself so full of suffring,
So don't be surprised if now and then
A mistake I make, or maybe two,
Cause he don't know less than nothing
Who never learned to make a few.", `Continue Reading!`, ], "imgUrl": `${prefix}gaucho-sweetheart.jpg`, "link": `${prefix}hernandez-martin-fierro.html`, "poem": false, "mainImg": true, }, ], "Poetry": [ { "title": "Reincarnation Blues", "sub-title": "The Cantos", "author": "Frank Thomas Smith", "description":[ "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.", ], "imgUrl": `/151/reincarnation-blues-cover-2.jpg`, "link": `/reincarnation_blues/reincarnation-blues-intro.html`, "poem": false, "mainImg": false, }, { "title": "The Nighthawk", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "The Nighthawk ponders how and why
Now is today, will be yesterday,
And was once tomorrow.", "Tackle time (he says to himself)
As a bouquet of roses, which,
Like so many other beauties
Will, quicker than a lie,
Whimper, lie down and die.
Oh, they lived for a time,
An eternally recurring instant.", ], "imgUrl": `${prefix}nighthawk.jpg`, "link": `${prefix}nighthawk.html`, "poem": true, "mainImg": false, }, { "title": "The School Teacher", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "A picture of Evita wreathed in flowers
Adorns the bus's runny windshield.
The driver in his mirror glowers
At the Pampa's wind-blown field.", "A line of passengers waits to board,
School kids, tired workers poor.
And there she is, praise the Lord,
To salve my soul, evermore.", ], "imgUrl": `${prefix}evita.jpg`, "link": `${prefix}school-teacher.html`, "poem": true, "mainImg": false, }, ], "Current Events": [ { "title": "Living on a Smoke-Bomb of a Planet", "sub-title": "", "author": "Tom Engelhardt", "description":[ "As it turns out, it’s never too late. I mention that only because last week, at nearly 79, I managed to visit Mars for the first time. You know, the red planet, or rather — so it seemed to me — the orange planet. And take my word for it, it was eerie as hell. There was no sun, just a strange orange haze of a kind I had never seen before as I walked the streets of that world (well-masked) on my way to a doctor’s appointment.", "Oh, wait, maybe I’m a little mixed up. Maybe I wasn’t on Mars. The strangeness of it all (and perhaps my age) might have left me just a bit confused. My best hunch now, as I try to put recent events in perspective, is that I wasn’t in life as I’d previously known it. Somehow — just a guess — that afternoon I might have become a character in a science-fiction novel. As a matter of fact, I had only recently finished rereading Walter M. Miller,Jr.’s sci-fi classic A Canticle for Leibowitz, last visited in 1961 at age 17. It’s about a world ravaged by humanity (using nukes, as a matter of fact) and, so many years later, still barely in recovery mode.", ], "imgUrl": `${prefix}smoke-liberty.jpeg`, "link": `${prefix}engelhardt-smoke.html`, "poem": false, "mainImg": false, }, { "title": "War, What Is It Good For?", "sub-title": "", "author": "Tom Engelhardt", "description":[ "I was born on July 20, 1944, amid a vast global conflict already known as World War II.  Though it ended with the atomic bombings of Hiroshima and Nagasaki in August 1945 before I could say much more than “Mama” or “Dada,” in some strange fashion, I grew up at war. ", "Living in New York City, I was near no conflict in those years or in any since. My dad, however, had volunteered for the Army Air Corps at age 35 on December 8, 1941, the day after the Japanese attack on Pearl Harbor. He fought in Burma, was painfully silent about his wartime experiences, and died on Pearl Harbor Day in 1983. He was the operations officer for the 1st Air Commandos and his war, in some strange sense, came home with him. ", "Like so many vets, then and now, he was never willing to talk to his son about what he had experienced, though in my early years he still liked his friends to call him “Major,” his rank on leaving the military.  When his war did come up in our house, it was usually in the form of anger — because my mother had shopped at a nearby grocery store whose owners, he claimed, had been “war profiteers” while he was overseas, or because my first car, shared with a friend, was a used Volkswagen (German!), or my mom was curious to go — god save us! — to a Japanese restaurant! ", ], "imgUrl": `${prefix}engelhardt-war-img.png`, "link": `${prefix}engelhardt-war.html`, "poem": false, "mainImg": false, }, { "title": "Blindman’s Buff", "sub-title": "", "author": "Karen J. Greenberg", "description":[ "In the Blindman’s Buff variation of tag, a child designated as “It” is tasked with tapping another child while wearing a blindfold. The sightless child knows the other children, all able to see, are there but is left to stumble around, using sounds and knowledge of the space they’re in as guides. Finally, that child does succeed, either by bumping into someone, peeking, or thanks to sheer dumb luck.", "Think of us, the American public, as that blindfolded child when it comes to our government’s torture program that followed the 9/11 disaster and the launching of the ill-fated war on terror. We’ve been left to search in the dark for what so many of us sensed was there.", "We’ve been groping for the facts surrounding the torture program created and implemented by the administration of President George W. Bush. For 20 years now, the hunt for its perpetrators, the places where they brutalized detainees, and the techniques they used has been underway. And for 20 years, attempts to keep that blindfold in place in the name of “national security” have helped sustain darkness over light.", ], "imgUrl": `${prefix}guantanamo-rally.jpg`, "link": `${prefix}greenberg-blindmans-buff.html`, "poem": false, "mainImg": false, }, ], "Anthroposophy": [ { "title": "Course on World Economy", "sub-title": "Lecture 3", "author": "Rudolf Steiner", "description":[ "Ladies and Gentlemen,", "In Economic Science, as I explained yesterday, it is essential to take hold of something that is for ever fluctuating — namely: the circulation of values and the mutual interplay of fluctuating values in the forming of Price. Bearing this in mind, you say to yourselves: Our first need is to discover what is really the proper form of the science of Economics. For a thing that fluctuates cannot be taken hold of directly. There is no real sense in trying to take hold by direct observation of something that is forever fluctuating. The only sensible procedure is to consider it in connection with what really lies beneath it.", "Let us take an example. For certain purposes in life we use a thermometer. We use it to read the degrees of temperature, which we have grown accustomed in a certain sense to compare with one another. For instance, we estimate 20° of warmth in relation to 5° and so on. We may also construct temperature curves. We plot the temperatures for instance during the winter, followed by the rising temperatures in summer. Our curve will then represent the fluctuating level of the thermometer. But we do not come to the underlying reality till we consider the various conditions which determine the lower temperature in the winter, the higher temperature in the summer months, the temperature in one district, the different temperature in another, and so forth. We only have something real in hand, so to speak, when we refer the varying levels of the mercury to that which underlies them. To record the readings of the thermometer is in itself a mere statistical procedure. And in Economics it is not much more than this when we merely study prices and values and so forth. It only begins to have a real meaning when we regard prices and values much as we regard the positions of the mercury — as indications, pointing to something else. Only then do we arrive at the realities of economic life. This consideration will lead us to the true and proper form of Economic Science.", ], "imgUrl": `${prefix}steiner-economy-2.jpg`, "link": `${prefix}steiner-world-economy-3.html`, "poem": false, "mainImg": false, }, { "title": "El cerebro y el pensar", "sub-title": "", "author": "Rudolf Steiner", "description":[ "Conferencia de Rudolf Steiner para los obreros que construyeron el primer Goetheanum", "5 de enero de 1923, Dornach - GA 348", "Esta fue la primera conferencia pronunciada ante los obreros tras la destrucción del Goetheanum por un incendio provocado en la Nochevieja de 1922/23. Como muestra de su apoyo, todos los presentes se pusieron en pie cuando entró Rudolf Steiner.", "Dr. Steiner: Es difícil expresar con palabras el dolor que siento. Sé de su profunda solidaridad, así que permítanme ser breve. Permítanme aprovechar esta oportunidad para llamar la atención sobre el hecho de que ya el 23 de enero de 1921, aquí en esta sala, leí de un folleto una declaración hecha por un oponente, de hecho, ya se puede decir un enemigo, que decía así:", ], "imgUrl": `${prefix}first-goetheanum.jpg`, "link": `${prefix}steiner-cerebro-pensar-final.html`, "poem": false, "mainImg": false, }, ], "Fiction": [ { "title": "The Man Who Shot Stonewall Jackson", "sub-title": "", "author": "Gary Beck", "description":[ "It happened once before, when I was a young man. The newspapers clamored for war, self-appointed know-it-alls told us why we had to fight and everyone believed them, especially the youngsters like me who got all fired up to join the army. So now, when those big headlines screamed ‘Remember The Maine,’ there wasn’t any more doubt that there would be war with Spain. And off they went to enlist, just like they were going to a picnic, as irreverent and ignorant as we were back in 1861. My eldest son told me he had to join up and I tried to discourage him. I told him how crazy it was for two groups of men to stand and blaze away at each other, but he wouldn’t listen. All he said was: \"War’s not fought that way anymore, Pa .\"", "So I held my peace and watched him go, like my pa watched me go. When he died of yellow fever, before he even fought in a battle, it was another terrible affliction that I had to accept. But I guess he was right about it being a new kind of war, because it was over pretty quick and we got all these new places; Cuba, Puerto Rico, The Philippines and Guam. I never even heard of Guam. So I kept on farming and doing my chores but I was pretty much empty inside. I had been that way ever since the surrender at Appomattox, which ended my daily suffering, but left me a hollow man. I went through all the motions of the living and tried my best to be a good husband and father, and I never told anyone how I felt. How could anyone who hadn’t been there understand? Sometimes, when I went to town and saw the few old hands who survived the entire war, like me, there was nothing we could say. We just looked at each other for a moment, nodded in recognition that we were still alive and moved on.", ], "imgUrl": `${prefix}stonewall-dies-2.jpg`, "link": `${prefix}beck-stonewall.html`, "poem": false, "mainImg": false, }, { "title": "Love in the Life of Spies", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "Camp Breckinridge, Kentucky, 1974", "Not that we were going anywhere or there was any reason for the march, except that it was in the training schedule: ten-mile night march with weapons and full field pack. That was during one of the hardest parts of the Vietnam war when we were getting the shit kicked out of us by the Vietcong. That meant that there were very few noncoms and officers around to train new guys like us. In fact, we only had the Company Commander, Captain Nugent, who was an Enlisted Man at heart, but couldn’t help it if they gave him a battlefield commission for being a hero in Vietnam. He was full of shrapnel and stuff, which must have hurt a lot, so he consumed quite a bit of whiskey – you know, to ease the pain. Then there was First Sergeant Quinn, also a battle-scarred veteran. He ran the company, but I guess First Sergeants run most companies. The Field First Sergeant – the one who did the actual training – was Silas Taylor, a wiry little guy from Georgia who had spent a lot of time in Vietnam, was wounded a few times, and even had a Silver Star. I was surprised – we all were – when I learned that he was only twenty-one years old, because he had eyes that looked a lot older.", ], "imgUrl": `${prefix}love-spies.png`, "link": `${prefix}love-spies-2.html`, "poem": false, "mainImg": false, }, { "title": "Knock On Wood", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "When I got to be a real boy I thought life was going to be a bed of roses. Growing up in wartime Italy, and afterwards in America, wasn't easy though, and I sometimes thought it would have been better to remain a puppet. Now that it's all over I know that's not so. In spite of everything, I wouldn't go back to being the old innocent Pinocchio who couldn't tell a lie from the truth.", "After my old man died I became an orphan. My Fairy Godmother and that cricket weren’t around anymore to jump in when things got tough. I guess they figured that once I was a real boy their job was done and they could relax, for which I don't blame them. If Disney does the sequel they'll probably be included, but those boys aren't averse to taking liberties as far as the truth is concerned.", "When the American troops took Palermo there wasn't much else to do but steal bicycles. You'd think I'd have learned by then not to get mixed up with that kind of stuff. I did learn, but real boys gotta eat. You remember the sly Fox and that miserable Cat who repeated everything he said? They were in pretty bad shape back when I became a real boy, but they bounced back right into the black market, which was like their natural habitat. They got me into the bicycle stealing business, which I'd probably still be doing if an American soldier hadn't adopted me. He was a nice guy, soft heart and all, kinda dumb. He left his flashy American bike on the street in front of a bar, chain-locked of course, but what were chains to me. I had it cut through in no time and was on my way when an MP who didn’t have anything better to do stepped out of the whorehouse next door and I crashed into him. He grabbed me by the neck and asked me where I got the bike, which he knew I stole because no Italian kid had a bike like that, and I said my friend loaned it to me. I said it in Italian, which he didn’t understand, so he whistled for an Italian cop who asked me the same thing in Italian and I gave the same answer. \"What friend?\" he asked. I pointed to the bar and they dragged me in, bike and all, and demanded that I point out my friend. I was thinking about the odds being all against me. Even if I made a lucky guess and pointed to the bike owner among the twenty or so soldiers in the bar, what’s he going to say? Just then a guy turned around and saw us.", ], "imgUrl": `${prefix}pinnochio-fox-cat.jpeg`, "link": `${prefix}fts-knock-on-wood.html`, "poem": false, "mainImg": false, }, { "title": "Don Antonio's Last Meeting", "sub-title": "", "author": "Frank Thomas Smith", "description":[ "No one knew Don Antonio's full name. Some people asked him frequently enough, but he always smiled and didn't answer, as if to say – \"What does it matter?\" I am not even sure that his real name was Antonio. And what did it matter? Don Antonio was a \"sabio\", a wise man. He came to the Plaza San Martín in the center of Buenos Aires twice a month, Sundays, sat on one of the benches with his knapsack alongside him and waited.", "Soon the word would spread that he was there and his devotees – myself among them – as well as curious onlookers, flocked to question him and hear his answers. And he had answers to everything under the sun. After attending these impromptu meetings several times, I began to take notes (Don Antonio didn't permit recordings, he didn't say why, simply shut up when someone clicked \"record\", and until they shut off the machine.) During the \"Proceso de Reconciliación Nacional\" , that is, the military dictatorship, he was arrested and \"disappeared\". He had foreseen that this would happen, even told us that it would. He could have stopped the meetings and saved himself, but he didn't. The following is the conversation, reconstructed from my notes, of that last meeting.", ], "imgUrl": `${prefix}viejo-sabio-2.jpg`, "link": `${prefix}fts-don-antonio.html`, "poem": false, "mainImg": false, }, ], "Social Science": [ { "title": "Favela Children", "sub-title": "Chapter 5", "author": "Ute Creamer", "description":[ "Londrina, June 1966", "This is a time of intense activity in the kindergarten. The school vacation period has begun and the children come in droves to do needlework, even the boys. So, with barely a pause for breath, I am busy teaching them how to manipulate the needles, stitch and undo the stitches again, unravel thread. Some also learn to knit.", "After my vacation in July, I might start an arithmetic class. Mental arithmetic or, for example, how to construct a cube with certain dimensions, is not taught in the marginal schools. They don't know how to draw a three-inch line with a ruler. Very few vendors know how to multiply. In secondary school, however, they learn more mathematics than in Germany.'", "God protect us from missionaries. A missionary has been in the favela since yesterday scaring people into church with loud, croaking music. No method is too dumb to lure the people to church: German and American military music, Mozart's A Little Night Music, The River Kwai March pour over the huts in ear-splitting waves from loud-speakers. No sooner is mass over than canvassing for the next event begins: meetings with married women and widows, then for single girls, then come the fathers and widowers. (They shouldn't beget so many children, the priest tells them - but how?!) Marriages and baptisms are diligently performed, but in heaven's name not for illegitimate children, who were conceived in sin. The church considers such details un-Christian. But it seems to be Christian when a Catholic priest says that we should only distribute medicine in our favela, and send the other sick people home.", ], "imgUrl": `${prefix}favela-cover.jpg`, "link": `${prefix}favela-children-5.html`, "poem": false, "mainImg": false, }, ], "Children's Corner": [ { "title": "El misterio del fantasma sin cabeza", "sub-title": "", "author": "Nicolás Gawain Smith", "description":[ "Esta historia fue culpa de mi perro Duque. Yo soy Gawain. Si Duque no hubiera olfateado ese rastro... Bueno, será mejor que empiece desde el principio.", "Era un lunes y yo estaba yendo a la escuela. Ese día fue muy bueno en la escuela. La maestra de inglés había faltado, así que tuvimos como una hora más de recreo. Al volver a casa, Duque no estaba. Lo busqué por adentro y por afuera, por el patio trasero y delantero. Luego salí a la calle a buscarlo. Al fin lo encontré en la casa abandonada de al lado, ladrándole a algo. Lo llamé y no vino. Le silbé y no vino. Me revolqué por el piso y no vino. \"Qué extraño --me dije--. Siempre que me revuelco por el piso, viene corriendo y me salta encima\". Volví a casa y le pedí permiso a mi papá para ponerle la correa a Duque. A mi papá no le gusta que le ponga la correa. Cuando al fin logré ponerle la correa, lo llevé a casa.", "Esa semana fue muy buena en la escuela. Muchas veces faltaba alguna maestra y teníamos más recreo.", ], "imgUrl": `${prefix}headless.webp`, "link": `${prefix}fantasma-sin-cabeza.html`, "poem": false, "mainImg": false, }, ], "Spiritual Science": [ { "title": "Buddhism", "sub-title": "", "author": "Jorge Luis Borges", "description":[ "The subject today will be Buddhism. I’m not going into the long story that began two thousand five hundred years ago in Benares, when a prince of Nepal – Siddharta or Gautama – who had become Buddha, spun the wheel of the law, proclaimed the four noble truths and the eightfold path. I will speak of the essential in this religion, the most prevalent in the world. The elements of Buddhism have been preserved since the fifth century before Christ: that is, since the epoch of Heraclites, of Pythagoras, of Xenon, until our times when Dr. Suzuki expounds it in Japan. The elements are the same. Now the religion is encrusted with mythology, astronomy, strange beliefs, magic, but because the subject is complex, I will limit myself to what the various sects have in common. They may correspond to Hinayana or the small vehicle. Let us first consider the longevity of Buddhism.", "This longevity can be explained for historical reasons, but such reasons are fortuitous or, rather, they are debatable, fallible. I think there are two fundamental causes. The first is Buddhism’s tolerance. That strange tolerance does not correspond, as is the case with other religions, to distinct epochs: Buddhism was always tolerant.", ], "imgUrl": `${prefix}buddha.jpg`, "link": `${prefix}borges-buddhism.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(); }; })();