(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");
const backToTop = document.querySelector("#back-to-top");
/*change prefix from "./" for test page inside the issue's
folder to "./issue-number/" for root index file */
const prefix = "./163/";
const articles = {
"Mystery Drama": [
{
"title": "",
"sub-title": "",
"author": "",
"description": [
"HeyZeus
",
"A Modern Mystery Drama
",
" by Frank Thomas Smith
",
"Setting: Park bench left of center.",
"At Rise: Spring, the stage is in darkness when the introductory music begins. A spot shines on THOMAS, standing downstage a few paces right of center. As he speaks, the light gradually expands to reveal the park bench.",
"Continue HeyZeus
",
],
"imgUrl": `${prefix}heyzeus-1-main.png`,
"link": `${prefix}heyzeus-1.html`,
"poem": false,
"mainImg": true,
},
],
"Memoir": [
{
"title": "Exiles End",
"sub-title": "Episode Six",
"author": "Frank Thomas Smith",
"description": [
"At the end of the Russian course, we had thirty days leave before shipping overseas according to the language we had studied: Europeans (German, Russian, Serbo-Croatian, etc.) from New York to Germany; Asiatics (Chinese, Korean, Japanese, etc.) from San Francisco to Tokyo — for further assignment. Spanish wasn't taught; I guess we had more than enough Spanish speakers at home. We received travel expenses to home, New York for me. The expenses were calculated according to distance, so we could either use the money to buy an airline ticket, for example, or drive by car, if you had one, and save the money. Someone — I'll call him Sgt. Krankenhauser because I forget his name — put a notice on the bulletin board that he was driving to New York and could take two passengers to share gas costs and driving time. I jumped at it. Sgt. Krankenhauser said okay, he was leaving in two days, did I know anyone else. I was the only one who answered. I told Jim McCrea, who said sure, he could take a bus or train for the short trip from New York to Washington. We intended to drive the northern route across the United States. But on the day before we were to leave a tremendous snowstorm hit most of the northern United States making it impossible to drive across safely for at least a week. Sgt. Krankenhauser said that he had intended to go via the north because the highways are better, but since that is no longer possible, we can go via the southern route. He realized that this could be problematic due to Jim's color, but if we all drove, we could drive right across without stopping. I was fine with that because I had no idea what it meant. Jim was unsure, but finally agreed, thereby showing his confidence in us.",
"We had to stop outside Phoenix to fix a tire. While Sgt. Krankenhauser waited while the tire was being fixed, Jim and I went into a bar. We were the only customers. I said to the bartender: “Two beers, please.” He replied, without looking at us, “We don't serve colored people here.” I was shocked. My God, I thought, and this is Arizona, cowboys and Indians, not the deep south. We walked out and back to the car.",
],
"imgUrl": `${prefix}exiles-end-main.png`,
"link": `${prefix}exiles-end-6.html`,
"poem": false,
"mainImg": false,
},
],
"Children's Corner": [
{
"title": "The Magic Mound",
"sub-title": "Chapters 21 and 22",
"author": "Frank Thomas Smith",
"description": [
"They headed straight for the palace and reached its outskirts after dark on the third day. As they got closer Alaram's mood changed. When Sergio asked him why he suddenly seemed so preoccupied, he said that the animals were trying to warn him that something was wrong.",
"\"I don't know what,\" he explained. \"The animals can't really speak, but they can express things like...\"",
"\"Like what?\" Mireya asked when he hesitated.",
"\"Like danger.\"",
"\"Danger?\" Sergio repeated. He stopped walking forward and the others stopped with him. \"We better be careful. Alaram, let's go on ahead to scout and leave the others here until we find out what the danger may be.\"",
"\"What about me?\" Divino asked.",
"\"Come along. You can be our messenger,\" Sergio said.",
"\"I will go too,\" Alto said.",
"\"No, Alto,\" Alaram told him, \"you will be in charge here.\"",
],
"imgUrl": `${prefix}magic-mound-cover.png`,
"link": `${prefix}magic-mound-21-22.html`,
"poem": false,
"mainImg": false,
},
],
"Anthroposophy": [
{
"title": "The Artificial Anthroposophical Society",
"sub-title": "a continuation",
"author": "Frank Thomas Smith",
"description": [
"In The Artificial Anthroposophical Society I describe the current situation of the problematic General Anthropsophical Society, without recommending a possible solution. Why not? Because I knew of none. Now, however, after some further study, certain concepts which I would like to share with you have fallen into my lap, so to speak.",
"In February 1935 Ita Wegman wrote to Maria Röschl:",
"“All the old forms, also the very last one for Anthroposophy (the Christmas Meeting Society 1923) have been basically broken, and it seems to me now that one should no longer seek a form for the life of Anthroposophy, but that every individual is the form with whom Anthroposophy wants unite. Where this is the case, others will find it and join to become members of the true spiritual association. The Anthroposophical Society is no longer necessary because Anthroposophy is already on the earth. It depends now on the individuals and they must together form a higher association, by means of their own development, that has its roots in the spiritual world…”",
"In March 1935 she wrote in a letter to Herbert Hahn:",
"“With the Christmas Meeting Dr. Steiner anticipated an organization that was not possible to implement because the old forces did not yet permit it … Perhaps a future form can be possible once some people free themselves from the Society.”"
],
"imgUrl": `${prefix}ita-wegman-main.png`,
"link": `${prefix}ita-wegman.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Rudolf Steiner",
"sub-title": "A Biographical Sketch",
"author": "Alfred Heidenreich",
"description": [
"One spring day in 1860, an autocratic Hungarian magnate, a certain Count Hoyos, who owned several large estates in Austria, dismissed his game-keeper, because this game-keeper, Johannes Steiner wanted to marry Franziska Blie, one of the Count's innumerable housemaids. Perhaps the old Count had a foreboding as to what a great spiritual revolution would be born of this marriage. (The baroque palace of Hom, where it happened, is still in the possession of the Hoyos family, and stands today just as it was one hundred years ago.) So Johannes Steiner had to look for another occupation, and got himself accepted as a trainee telegraphist and signalman by the recently opened Austrian Southern Railway. He was given his first job in an out-of-the-way request stop called Kraljevic (today in Croatia), and there his first child, Rudolf, arrived on February 27, 1861. On the same day the child was taken for an emergency baptism to the parish Church of St. Michael in the neighboring village of Draskovec. The baptismal register was written in Serbo-Croat and Latin, and the entry still can be read today as of one Rudolfus Josephus Laurentius Steiner. “Thus it happened,” Rudolf Steiner writes in his autobiography, “that the place of my birth is far removed from the region where I come from.”",
"In later life, particularly in his lectures on education, Steiner frequently made the point that the most prodigious feat any man achieves at any time is accomplished by him in the first two or three years of his life, when he lifts his body into the upright position and learns to move it in perfect balance through space, when he forms a vital part of his organism into an instrument of speech and when he begins to handle and indeed to fashion his brain as a vehicle for thought. In other words, when the child asserts his human qualities which set him dramatically apart from the animals.",
],
"imgUrl": `${prefix}rs-heidenreich-main.png`,
"link": `${prefix}rs-heidenreich.html`,
"poem": false,
"mainImg": false,
},
{
"title": "The Christian Mystery",
"sub-title": "Lecture 1",
"author": "Rudolf Steiner",
"description": [
"12 February 1906, Cologne GA 97",
"The first 12 chapters in the gospel of John",
"In modern theology, clear distinction is made between the first three gospels and the gospel of John. The first three are called the synoptic gospels, whilst the latter is often said to be a composition for teaching purposes and of no historical value. What matters is, however, that everything said relating to the Christ in the gospels is a profound symbol which at the same time is an important historical fact. In reality the first three gospels differ from the gospel of John because they were written by disciples who were less profoundly initiated, whereas the gospel of John was written by the most deeply initiated disciple.",
"The gospel of John actually makes no direct mention of John, only referring to him as the disciple whom Jesus loved. This is a key word for the one who was most deeply initiated. To indicate that some disciples were the most intimate initiates it would be said that the master loved them.",
],
"imgUrl": `${prefix}steiner-christian-mystery-main.png`,
"link": `${prefix}steiner-christian-mystery.html`,
"poem": false,
"mainImg": false,
},
{
"title": "The Christian Mystery",
"sub-title": "Lecture 2",
"author": "Rudolf Steiner",
"description": [
"13 February 1906, Cologne – GA 97",
"The second part of the gospel of John",
"The experiences John described from the 13th chapter onward refer to the devachanic level. John indicated this by saying he had been raised from the dead. John was Lazarus raised from the dead. We can understand therefore why it is only now that mention is made of the disciple whom the Lord loved. This is the secret at the center of the gospel, that the writer was Lazarus raised from the dead.",
"John then went through experiences with the Christ in the world of the spirit. The second part in particular does not merely tell what has happened on some particular level but describes the things every human being can inwardly experience. The way in which one can inwardly know oneself to be at the level John spoke of is the following. From a certain point in his development the individual no longer feels separate from all things. He enters wholly into the things that are around him. This is to expand one's self into a universe. John felt himself to be part of the whole world around him. This comes to expression in the spiritual image of the washing of the feet. John experienced this in the world of the spirit, though it was at the same time also a historical event.",
],
"imgUrl": `${prefix}steiner-christian-mystery-main.png`,
"link": `${prefix}steiner-christian-mystery-2.html`,
"poem": false,
"mainImg": false,
},
{
"title": "The Christian Mystery",
"sub-title": "Lecture 3",
"author": "Rudolf Steiner",
"description": [
"3 February 1907, Heidelberg",
"Christian theologians are calling the gospel of John into question today. They say the first three gospels, the synoptic gospels according to Matthew, Mark and Luke, are consistent in the way they speak of Jesus. Any variations between them are considered unimportant. It is said that on the basis of the synoptic gospels one can have a consistent idea of Jesus. The gospel of John differs greatly from them, speaking of the founder of Christianity in a very different tone and apparently a very different way. It is therefore considered less credible. The synoptics, people say, were intended to tell the life of Christ, whilst the writer of John's gospel lived at a later period and wrote a kind of hymn to express how he felt. Theologians see John's gospel as the fictional work of a believer. The times have gone when a theologian like Bunsen might write: ‘If the gospel of John does not tell the historical truth, Christianity simply will not be tenable.’ It is the task of spiritual science to show the significance of John's gospel again to the people of today.",
],
"imgUrl": `${prefix}steiner-christian-mystery-main.png`,
"link": `${prefix}steiner-christian-mystery-3.html`,
"poem": false,
"mainImg": false,
},
{
"title": "The Fifth Gospel",
"sub-title": "Lecture 2",
"author": "Rudolf Steiner",
"description": [
"Our considerations will begin with the so-called Pentecost event. For this event presents itself to clairvoyance as a kind of awakening which the personalities on a certain day, Pentecost, experienced: the personalities normally called the apostles or disciples of the Christ Jesus. It is not easy to evoke an exact perception of all those extraordinary events, and we will have to recall – from the depths of our souls, so to speak – much of what we have already gained from our anthroposophical considerations if we want to combine exact perceptions with all which our lecture cycle has to say about this subject.",
"The apostles felt like awakened individuals who had lived for a long time in an unusual state of consciousness. It was really like a kind of awakening from a deep sleep, from a strange, dream-filled sleep, in which one carries out the everyday tasks of life as reasonable people do, so that others do not notice that one is in a different state of consciousness. Then came the moment when it seemed to the apostles that they had lived through a long time as in a dream from which they awoke with the Pentecost event. And they experienced this awakening in an extraordinary way: they really felt as though something we can only call the substance of all-encompassing love had descended on them from out of the universe. The apostles felt impregnated by all-encompassing love and awakened from the described dream-like state. As though they had been awakened by all that the source of the power of love pervades and warms the universe, as though this source of the power of love had penetrated the soul of each one of them.",
],
"imgUrl": `${prefix}fifth-gospel-2-main.png`,
"link": `${prefix}fifth-gospel-2.html`,
"poem": false,
"mainImg": false,
},
],
"Current Events": [
{
"title": "Trump Faces Palestine",
"sub-title": "The Colonial View of the World Never Dies",
"author": "Aviva Chomsky",
"description": [
"In the colonial view of the world — and, in its own strange fashion, Donald Trump’s view couldn’t be more colonial — White European colonizers were embattled beacons of civilization, rationality, and progress, confronting dangerous barbaric hordes beyond (and even, sometimes, within) their own frontiers. Colonial violence then was a necessary form of self-defense needed to tame irrational eruptions of brutality among the colonized. To make sense of the bipartisan U.S. devotion to Israel, including the glorification of Israeli violence and the demonization of Palestinians, as well as the Trump administration’s recent attacks on Black South Africa, student activists, and immigrants, it’s important to grasp that worldview.",
"On the Caribbean island of Barbados, Great Britain’s 1688 Act “For the Governing of Negroes” proclaimed that “Negroes… are of a barbarous, wild, and savage nature, and such as renders them wholly unqualified to be governed by the Laws, Customes, and Practices of our Nation: It is therefore becoming absolutely necessary, that such other Constitutions, Laws and Orders, should be… framed and enacted for the good regulating or ordering of them, as may both restrain the disorders, rapines, and inhumanities to which they are naturally prone and inclined.”",
],
"imgUrl": `${prefix}chomsky-palestine-main.png`,
"link": `${prefix}chomsky-palestine.html`,
"poem": false,
"mainImg": false,
},
{
"title": "The Jewish State of Israel and Me",
"sub-title": "Why I changed my mind",
"author": "Frank Thomas Smith",
"description": [
"Love affairs are seldom permanent. Nor was mine with Israel. Actually, I should call it a unilateral admiration affair, for I admired Israel greatly, but Israel didn’t know of my existence. It’s like being in love with a movie star, like my relationship with Ingrid Bergman.",
"My admiration affair with Israel probably began with the book (1958) and movie (1960) Exodus staring Paul Newman and Eva Marie Saint and a star-studded cast of notables, directed by Otto Preminger. The movie’s influence on Americans was immense, and on many more the world over. Its historical accuracy was debatable.",
"In 1958, when I probably read the book, I was 26 years old and had already spent four years in US Army military intelligence based in Germany, so I knew something about Germany’s recent history and the holocaust. Many years later I visited the Buchenwald concentration camp near Weimar. Just before a lecture explaining the place and its history, a bus arrived with German tourists from Bavaria. They entered the lecture room smiling and chatting. By the time the speaker, a Polish woman speaking in German, had finished, many were in tears. We were then led around the camp, and saw the building containing a row of about six ovens, where the victims remains were incinerated.",
],
"imgUrl": `${prefix}israel-and-me-main.png`,
"link": `${prefix}israel-and-me.html`,
"poem": false,
"mainImg": false,
},
{
"title": "An All-American Nightmare",
"sub-title": "How to Build a Deportation Machine in the Age of Trump",
"author": "Michael Gould-Wartofsky",
"description": [
"“Flights to Guantánamo Bay have begun. The worst of the worst have no place in our homeland.”",
"On a military base in El Paso, Texas, masked men in combat fatigues paraded a group of young Venezuelan immigrants, their hands cuffed and their ankles shackled, in front of the cameras, before loading them onto a waiting Air Force C-17, which was to deliver its human cargo to Naval Station Guantánamo Bay overnight.",
"Once there, they were to be incarcerated in the infamous Camp 6, held incommunicado in the same cells where al-Qaeda suspects were once held in indefinite detention, and guarded by the 1st Battalion, 6th Marine Regiment. Meanwhile, a tent city, which could ultimately house as many as 30,000 detainees, rises around the prison.",
],
"imgUrl": `${prefix}all-american-nightmare-main.jpg`,
"link": `${prefix}all-american-nightmare.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Courage Is Contagious",
"sub-title": "Moving from Fear to Action in a Disturbing World",
"author": "Frida Berrigan",
"description": [
"“It is pretty wild how you can make someone mad by just holding a sign,” my 18-year-old Ro told me, as an irate driver peeled out of the intersection, shaking both his middle fingers at us but managing not to hit us. Phew! ",
"Ro was right. It didn’t take much to turn a perpetually busy intersection in New London, Connecticut, into a discussion forum on presidential overreach, cruelty, and immigration politics — with all the excesses, including those fingers, of the Age of Trump. In fact, all it took was four of us, four signs, and a little midday coordination. Oh, and some noise makers! Our signs said: “New London cares about our neighbors” and “ICE Not Welcome” and two versions of “Vecinos, no tienen que abrirle la puerta a ICE.” The translation: “Neighbors, you do not have to open the door to ICE.”",
"We stood there for an hour or so, clanging noise makers, waving those signs, and telling our neighbors to be careful about the rumored activity of the U.S. Immigration and Customs Enforcement agency (ICE) in our community. Cars slowed and beeped, drivers waved — mostly their whole hands, but sometimes just that one lone finger — and some called out “Thank you” or “Gracias!” To our surprise, even a reporter and photographer from our local paper showed up.",
],
"imgUrl": `${prefix}berrigan-courage-main.jpg`,
"link": `${prefix}berrigan-courage.html`,
"poem": false,
"mainImg": false,
},
],
"Social Science": [
{
"title": "Favela Children",
"sub-title": "Chapter 17",
"author": "Ute Craemer",
"description": [
"1979: The year began with a new boy from Paraná . How modest and awkward they are at first. He sits sideways at the table with the plate so far away that the way to his mouth is sown with rice and other food. The laborious path towards civilization begins: table manners, toilet use, cleaning up, etc.",
"You have to offer him every item of food, or he doesn't eat and then it seems to stick in his throat, so timidly does he sit there. As answers to carefully thought-out questions, all you get is a yes or a no. Like all newcomers he is extremely willing to work, but free time is that much more of a strain. They can't occupy themselves alone because they are never alone in their homes and normally free time there consists of football and television. We don't have a television here and Francisco can't always be playing football, if only because he doesn't know anyone here yet. He discovered the bicycle and enthusiastically practices equilibrium on it. When he sees me he becomes shy at once. When the other boys are around he is a bit braver and says something on his own now and then. It is strange how we so carefully feel each other out, neither knows the other, but this will soon be his home and I must like him and he must trust me. With the help of the other children and the daily rhythm of school and work, it will come relatively soon. Only the first days are so difficult.",
],
"imgUrl": `${prefix}favela-cover.jpg`,
"link": `${prefix}favela-children-17.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 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);
}
function createLettersLink() {
const div = document.createElement("div");
const p = document.createElement("p");
const a = document.createElement("a");
a.href = "https://southerncrossreview.org/163/letters163.html";
a.style.color = "inherit";
a.style.textDecoration = "none";
p.className = "nav-menu-links";
a.innerText = "Letters to the Editor";
p.dataset.title = "letters";
p.appendChild(a);
div.appendChild(p);
navMenuElement.appendChild(div);
}
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);
}
});
//createSingleLink("Letters to the Editor", "pic-nav-menu");
createSingleLink("Other Sections", "pic-nav-menu");
createSingleLink("Subscribe", "subscribe");
createLettersLink();
}
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) => {
if (link.dataset.title === "letters") return;
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) => {
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 div1 = articleDiv.querySelector("div");
div1.cloneNode(true);
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"]) {
// doubleFeaturedArt({
// div1,
// div2,
// titleElement,
// subTitle,
// articleInnerDiv,
// img,
// description,
// });
titleElement.style.marginBottom = "1em";
link.style.display = "none";
img.style.maxWidth = "40%";
img.style.minWidth = "30%";
img.style.maxHeight = "100%";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
img.style.marginBottom = "1em";
img.style.float = "none";
img.insertAdjacentElement("afterend", author);
description.style.width = "80%";
description.style.marginLeft = "auto";
description.style.marginRight = "auto";
}
// 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");
});
//back to top button
backToTop.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
// 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");
backToTop.classList.remove("back-to-top-hide");
} else {
navCol.classList.remove("fixed-nav-col");
backToTop.classList.add("back-to-top-hide");
}
};
//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();
};
})();