(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": "Self-portrait by Frida Kahlo",
"sub-title": "",
"author": "Frida Kahlo",
"description":[
"Frida Kahlo, born Magdalena Carmen Frida Kahlo y Calderón; 6 July 1907 – 13 July 1954) was a Mexican painter known for her many portraits, self-portraits, and works inspired by the nature and artifacts of Mexico. Inspired by the country's popular culture, she employed a naïve folk art style to explore questions of identity, postcolonialism, gender, class, and race in Mexican society. Her paintings often had strong autobiographical elements and mixed realism with fantasy. In addition to belonging to the post-revolutionary Mexicayotl movement, which sought to define a Mexican identity, Kahlo has been described as a surrealist or magical realist.",
"Born to a German father and a mestiza mother, Kahlo spent most of her childhood and adult life at La Casa Azul, her family home in Coyoacán, now publicly accessible as the Frida Kahlo Museum. Although she was disabled by polio as a child, Kahlo had been a promising student headed for medical school until a traffic accident at age eighteen, which caused her lifelong pain and medical problems. During her recovery, she returned to her childhood hobby of art with the idea of becoming an artist.",
"Kahlo's interests in politics and art led to her joining the Mexican Communist Party in 1927, through which she met fellow Mexican artist Diego Rivera. The couple married in 1928, and spent the late 1920s and early 1930s travelling in Mexico and the United States together. During this time, she developed her artistic style, drew her main inspiration from Mexican folk culture, and painted mostly small self-portraits which mixed elements from pre-Columbian and Catholic beliefs. Her paintings raised the interest of Surrealist artist André Breton, who arranged for Kahlo's first solo exhibition at the Julien Levy Gallery in New York in 1938.",
"Continue reading...",
],
"imgUrl": `${prefix}frida-1.jpg`,
"link": `javascript:void(0)`,
"poem": false,
"mainImg": true,
},
],
"Education": [
{
"title": "Education as a Social Question",
"sub-title": "Lecture 2",
"author": "by Rudolf Steiner",
"description":[
"If we wish to understand the task of anthroposophical spiritual science in the present and immediate future we must consider the character of mankind's evolution since the middle of the fifteenth century. Everything that happens now depends on the fact that since that time there lives in mankind the impulse for each single individuality to attain the pinnacle of personality, to become a whole personality. This was not possible, nor was it the task of mankind in earlier epochs of our post-Atlantean evolution. If we want to understand this great change in the middle of which we find ourselves, we must focus our attention still more precisely upon such matters as I characterized yesterday.",
"I said that in our spiritual life we still have a Greek constitution of soul. The way we form our thoughts, the manner in which we are accustomed to think about the world, is an echo of the Greek mind. And the way we are accustomed to look at civic rights and everything connected with them is an echo of the Roman mentality. In the State we still see the structure as it existed in the Roman Empire. Only if people will realize that the impulse of the threefold society must enter our chaotic present will there be clarity in thinking and willing.",
],
"imgUrl": `${prefix}waldirf-class.jpg`,
"link": `${prefix}education-social-question-2.html`,
"poem": false,
"mainImg": false,
},
],
"Social Science": [
{
"title": "Favela Children",
"sub-title": "Chapter 3",
"author": "by Ute Creamer",
"description":[
"Londrina, October 14",
"This evening I was again with the old Macumba priestess, Dona Jacinta. She is of imposing appearance, vital, strong, tolerant and unwavering. One can imagine that she would be honored in heathen Africa as a symbol of the Earth Mother. You feel well in her presence, she exudes calmness.",
"She led me into her Macumba-room. On one side are wooden benches, in the opposite corner stands her altar with its countless holy figures. Many gods have Christian as well as heathen names. For example St. George is Ogún, the god of war in the African religion. St. Michael corresponds to Xangó, the god of thunder and lightning. Yemanjá, the sea-goddess, is the Virgin Mary. Exú is the Devil and Oxalá, the god of life and fertility, corresponds to Jesus and the Holy Spirit."
],
"imgUrl": `${prefix}favela-cover.jpg`,
"link": `${prefix}favela-children-3.html`,
"poem": false,
"mainImg": false,
},
],
"Political Science": [
{
"title": "Can the Military-Industrial Complex Be Tamed?",
"sub-title": "Cutting the Pentagon Budget in Half Would Finally Force the Generals to Think",
"author": "WILLIAM J ASTORE",
"description":[
"My name is Bill Astore and I’m a card-carrying member of the military-industrial complex (MIC).",
"Sure, I hung up my military uniform for the last time in 2005. Since 2007, I’ve been writing articles for TomDispatch focused largely on critiquing that same MIC and America’s permanent war economy. I’ve written against this country’s wasteful and unwise wars in Iraq and Afghanistan, its costly and disastrous weapons systems, and its undemocratic embrace of warriors and militarism. Nevertheless, I remain a lieutenant colonel, if a retired one. I still have my military ID card, if only to get on bases, and I still tend to say “we” when I talk about my fellow soldiers, Marines, sailors, and airmen (and our “guardians,” too, now that we have a Space Force).",
"So, when I talk to organizations that are antiwar, that seek to downsize, dismantle, or otherwise weaken the MIC, I’m upfront about my military biases even as I add my own voice to their critiques. Of course, you don’t have to be antiwar to be highly suspicious of the U.S. military. Senior leaders in “my” military have lied so often, whether in the Vietnam War era of the last century or in this one about “progress” in Iraq and Afghanistan, that you’d have to be asleep at the wheel or ignorant not to have suspected the official story.",
],
"imgUrl": `${prefix}military-industrial-complex.png`,
"link": `${prefix}astore-m-i-complex.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Nuclear Fusion Won’t Save the Climate",
"sub-title": "But It Might Blow Up the World",
"author": "JOSHUA FRANK",
"description":[
"I awoke on December 13th to news about what could be the most significant scientific breakthrough since the Food and Drug Administration authorized the first Covid vaccine for emergency use two years ago. This time, however, the achievement had nothing to do with that ongoing public health crisis. Instead, as the New York Times and CNN alerted me that morning, at stake was a new technology that could potentially solve the worst dilemma humanity faces: climate change and the desperate overheating of our planet. Net-energy-gain fusion, a long-sought-after panacea for all that’s wrong with traditional nuclear-fission energy (read: accidents, radioactive waste), had finally been achieved at the Lawrence Livermore National Laboratory in California.",
"“This is such a wonderful example of a possibility realized, a scientific milestone achieved, and a road ahead to the possibilities for clean energy,” exclaimed White House science adviser Arati Prabhakar.",
],
"imgUrl": `${prefix}atomic-blast.jpeg`,
"link": `${prefix}frank-fusion.html`,
"poem": false,
"mainImg": false,
},
{
"title": "American Exceptionalism on Full Display",
"sub-title": "Why This Country Might Want to Lower Its Expectations",
"author": "Rebecca Gordon",
"description":[
"Let me start with a confession: I no longer read all the way through newspaper stories about the war in Ukraine. After years of writing about war and torture, I’ve reached my limit. These days, I just can’t pore through the details of the ongoing nightmare there. It’s shameful, but I don’t want to know the names of the dead or examine images caught by brave photographers of half-exploded buildings, exposing details — a shoe, a chair, a doll, some half-destroyed possessions — of lives lost, while I remain safe and warm in San Francisco. Increasingly, I find that I just can’t bear it.",
"And so I scan the headlines and the opening paragraphs, picking up just enough to grasp the shape of Vladimir Putin’s horrific military strategy: the bombing of civilian targets like markets and apartment buildings, the attacks on the civilian power grid, and the outright murder of the residents of cities and towns occupied by Russian troops. And these aren’t aberrations in an otherwise lawfully conducted war. No, they represent an intentional strategy of terror, designed to demoralize civilians rather than to defeat an enemy military. This means, of course, that they’re also war crimes: violations of the laws and customs of war as summarized in 2005 by the International Committee of the Red Cross (ICRC).",
"The first rule of war, as laid out by the ICRC, requires combatant countries to distinguish between (permitted) military and (prohibited) civilian targets. The second states that “acts or threats of violence the primary purpose of which is to spread terror among the civilian population” — an all-too-on-target summary of Russia’s war-making these last 10 months — “are prohibited.” Violating that prohibition is a crime.,"
],
"imgUrl": `${prefix}exceptionalism.webp`,
"link": `${prefix}gordon-exceptional.html`,
"poem": false,
"mainImg": false,
},
],
"Anthroposophy": [
{
"title": "The Gospel of John in Relation to the Other Three Gospels",
"sub-title": "Lecture One of Fourteen - The Johannine Christians",
"author": "Rudolf Steiner",
"description":[
"My dear Friends:",
"A special festival has long been celebrated on this particular day of the year by a great number of those seeking higher wisdom; and many friends of our anthroposophical movement here in this city have wished this series of lectures to commence on this day, St. John's Day.",
"The day of the year bearing this name was a festival as far back as the time of ancient Persia. There, on a day corresponding to a June day as we know it, the so-called Festival of the Baptism by Water and Fire was celebrated. In ancient Rome the Festival of Vesta was held on a similar day in June, and that again was a festival of baptism by fire. Going back to the time of pre-Christian culture in Europe and including the period before Christianity had become widely disseminated, we find a similar June festival coinciding with the time when the days are longest and the nights shortest, when the days start to become shorter again, when the sun once more begins to lose some of the power that provides for all earthly growth and thriving. This June festival seemed to our European forefathers like a retrogression, a gradual evanescence, of the God Baldur who was thought of as associated with the sun. Then in Christian times this June festival gradually became the Festival of St. John in memory of the Forerunner of the Christ Jesus. In this way it can form the starting point, as it were, for our discussions during the coming days of that most significant event in human evolution which we call the deed of the Christ Jesus. This deed, its whole significance for the development of mankind, the way it is revealed primarily in the most important Christian document, the Gospel of St. John — and then a comparison of this with the other Gospels — a study of all this will form the subject of this lecture cycle.",
],
"imgUrl": `${prefix}rose-cross.jpg`,
"link": `${prefix}gospel-john-1.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Course on World Economy",
"sub-title": "Lecture 1",
"author": "Rudolf Steiner",
"description":[
"Ladies and Gentlemen,",
"Today I intend a kind of introduction. In tomorrow's lecture we shall begin and try to give a more or less complete picture of the questions of social and political economy which man today must set before himself.",
"The subject of Economics, as we speak of it today, is in reality a very recent creation. It did not arise until the time when the economic life of modern peoples had become extraordinarily complicated in comparison with earlier conditions. As this Course is intended primarily for students of Political Economy, it is necessary by way of introduction to point out this peculiarity of the economic thinking of today.",
],
"imgUrl": `${prefix}steiner-economy-1.jpg`,
"link": `${prefix}steiner-economy-1.html`,
"poem": false,
"mainImg": false,
},
],
"Biology and Evolution": [
{
"title": "Evolution as it was meant to be",
"sub-title": "How the World Lends Itself to Our Knowing",
"author": "Stephen L. Talbott",
"description":[
"All physical scientists, in an effort to understand reality, take their stand upon a tiny island of knowledge, surrounded by an immense, fathomless sea of ignorance. The island is forever threatened and re-shaped by revelatory eruptions from the surrounding deep.",
"According to the celebrated physicist, Richard Feynman, \"we have no knowledge of what energy is\" (Feynman et al. 1963). Nor, for that matter, do we know what a force is. And the same is true of all the foundational terms of physics. Matter, the supposedly solid ground of material reality, remains an enigma that has only grown more perplexing along with advances in quantum physics. Other basic terms such as “space”, “time”, and “field” — while perfectly workable as conceptual black boxes in the context of the physicist’s narrow mathematical aspirations — are not themselves so much elements of adequate explanation as they are perplexities in need of explanation.",
],
"imgUrl": `${prefix}nature.gif`,
"link": `https://bwo.life/bk/epist2.htm`,
"poem": false,
"mainImg": false,
},
],
"Fiction": [
{
"title": "The Intelligence Analyst",
"sub-title": "",
"author": "Frank Thomas Smith",
"description":[
"Roberto Fox was kicked out of Military Intelligence unceremoniously, and he wanted to know why. I was reminded of Roberto's story when reading about and sympathizing with Bradley Manning, that private-first-class who sent all the so-called “secret” information to WikiLeaks. I was reminded of how stupid, that's the best word for it, but one could also say inept, bureaucratic, clumsy and a whole list of adjectives from the thesaurus to describe the United States Army – or, probably, any army. It's just that my experience is with the American version. Just think: a private-first-class sitting in front of a computer somewhere in the desert in Iraq with access to the electronic messages sent from embassies all over the world to the State Department in Washington. Note, however, that Manning is an “intelligence analyst”. Why does he have such an important sounding MOS (Military Occupation Specialty) and still be only a Pfc? It's because he's intelligent and maybe he knows a foreign language, it doesn't matter which one; the path to being an intelligence analyst is to know a foreign language. They give you IQ tests when you enter the army, and if your IQ is higher than a baboon's they call you out of formation for duty as something cooler than an infantry grunt.",
"What I'm about to tell you happened to Roberto Fox when there was still a draft and therefore much smarter people were in the service; in fact draftees were often so much more intelligent than officers that it was embarrassing. I could tell you some anecdotes to prove it, but now isn't the time. Maybe later, or in another life.",
],
"imgUrl": `${prefix}spy.jpg`,
"link": `${prefix}fts-analyst.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Love in the Life of Spies",
"sub-title": "Foreword",
"author": "by Frank Thomas Smith",
"description":[
"Florida, Buenos Aires, Argentina",
"Cerrado read the sign hanging slightly askew inside the upper glass part of Die Glocke’s door. What the hell, Jacks thought, it’s lunch time, how can they be closed. Something’s wrong. He peered through the glass and saw the old waiter sitting alone at a table reading the Freie Presse, a fascist German-language daily. He knocked on the window. The waiter looked up, startled and stared wide-eyed at the door. When he recognized Marvin Jacks he put down the paper, smiled, stood up heavily and opened the door after unlocking it.",
"“You called for a reservation,” he said in German, “nicht wahr?”",
"Jacks nodded. “Why is the restaurant closed? Has something happened?”",
],
"imgUrl": `${prefix}love-spies.jpg`,
"link": `${prefix}love-life-spies-forward.html`,
"poem": false,
"mainImg": false,
},
{
"title": "A Streetcar Named Karma",
"sub-title": "",
"author": "by Frank Thomas Smith",
"description":[
"A lecture wasn't exactly what I had in mind for the evening, but there we were, Katrina and I, approaching the hall where it was to take place. A full moon shone into the narrow cobblestoned street. Its presence more or less guaranteed that there would be no more snow that night.",
"That same day, I think it was early afternoon, I had boarded a streetcar and found a spot among the standees, when the clasp on my briefcase somehow opened as we rounded a sharp curve and the books and papers tumbled out. I bent to retrieve them and fell against another standee, knocking her over and falling almost on top of her. I stammered apologies in German, my native tongue, instead of Czech. My reaction was automatic, but the fact is that in that enlightened age all educated people in Prague spoke German. Hers was lightly accented. She helped me pick up my things, which were strewn around and soiled by the slush the passengers' shoes had tracked into the car. An elderly couple vacated a double seat at the next stop and I quickly grasped the hand-guard and invited her to sit next to the window. I took my place next to her on the aisle. She wasn't a beautiful woman, at least not in the usual sense. You could have called her attractive though. Her most salient feature was her smile, wide and spontaneous, lighting up her face. Though she wore a heavy fur coat against the cold, I could tell that she was somewhat plump, which was to my taste.",
],
"imgUrl": `${prefix}streetcar-small.jpg`,
"link": `${prefix}streetcar-karma.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Dear Dhriti",
"sub-title": "",
"author": "by S.F.Wright",
"description":[
"Dear Dhriti,",
"I am writing, as a colleague and as a friend, to ask you to return to Voragine High School.",
"I understand why you left—or why you felt that you had to leave. But, Dhriti, you must consider the fact that the world changes and that we must adapt to its changes. Long ago, schools were gender segregated. Now, almost all schools are coeducational. For years, teachers taught with pencils and notebooks. Today, we use computers and Google Docs. Once upon a time, the idea of teachers’ carrying firearms in school was not only absurd but inconceivable. As of recently, we teachers are required to be armed during working hours.",
"As with the other policies, we are adjusting to this new one. And I know that if you gave it a little time, Dhriti, you would adjust to this change as well.",
],
"imgUrl": `${prefix}armed-teacher.jpg`,
"link": `${prefix}wright-dhriti.html`,
"poem": false,
"mainImg": false,
},
],
"Children's Corner": [
{
"title": "The Magic Mound",
"sub-title": "Chapter 4 - Vitaluz, the Youth Potion",
"author": "Frank Thomas Smith",
"description":[
"A girl dressed like Mara came through the palace's front gate and walked towards them. She was smiling and had her hands stretched out in a gesture which obviously meant welcome. Sergio and Divino thought she must be Mara's sister because they looked so much alike they could have been twins.",
"\"This is Sergio and the little one is Divino,\" Mara told her.",
"\"What lovely names!\" she said in a voice somewhat deeper than Mara's. Sergio was pleased that not only Divino's name had been praised.",
"\"Come.\" She put her arms around the boys' shoulders and led them into the palace grounds.",
"\"Are we going to meet Queen Mamara now?\" Divino asked her.",
],
"imgUrl": `${prefix}mound-map.jpg`,
"link": `${prefix}magic-mound-4.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Journey to the Stars",
"sub-title": "",
"author": "Frank Thomas Smith",
"description":[
"One evening Nicky and his little sister Caroline were sitting in the meadow near their home at the edge of the forest. The sky overhead was like a cape of black silk encrusted with brilliant jewels.",
"\“How many stars are there in the sky, Nicky\”, Caroline asked.",
"“A lot.”",
"“Yes, I can see that, but how many?” she insisted.",
"“Billions. Nobody knows.”",
"“Let’s count them.”",
"Nicky laughed. “Fine, you count them and tell me how many there are.”",
],
"imgUrl": `https://southerncrossreview.org/149/journey-to-stars.jpg`,
"link": `https://southerncrossreview.org/149/journey-to-stars.html`,
"poem": false,
"mainImg": false,
},
],
"Spiritual Science": [
{
"title": "Intergalactic Reincarnation",
"sub-title": "",
"author": "by Frank Thomas Smith",
"description":[
"Beyond the highest, Aconcagua's peak,
Lives a lady of fragile health,
Known by the name Mireya.",
"Her glance, her smile are all I seek,
Are more to me than worlds of wealth,
The ailing lady, Mireya.",
"Her steps are slower now, embraces weak,
So I will pray for her in stealth,
For the life of my love Mireya.",
],
"imgUrl": `${prefix}intergalactic.jpg`,
"link": `${prefix}mireya-intergalactic.html`,
"poem": true,
"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();
};
})();