diff --git a/assets/css/index.css b/assets/css/index.css
index af7ff00..d72a5a8 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -199,7 +199,8 @@ ul {
padding: 0;
}
ul li {
- /* padding-left: var(--gutter); */
+ padding-left: 30px;
+ position: relative;
}
ul li {
@@ -213,6 +214,9 @@ ul li::before {
display: inline-block;
margin-right: 8px;
/* spacing between the bullet and text */
+ position: absolute;
+ left: 0;
+ top: 0;
}
li:has(> a):hover::before {
@@ -252,7 +256,8 @@ button.button__link.button__submit::before,
font-size: 1em;
height: 1em;
width: 1em;
- margin-right: 0.75rem;
+ /* margin-right: 0.75rem; */
+ margin-right: 12px;
text-align: start;
font-family: var(--ff-primary);
font-style: normal;
@@ -265,56 +270,6 @@ button.button__link.button__submit:hover::before,
content: "\25cb";
}
-/*
-============
-elements
-============
-*/
-
-.anchor-point {
- position: absolute;
- top: 2em;
- left: 18.5%;
- width: 1rem;
- height: 1rem;
-}
-figure {
- margin: 0;
-}
-
-button {
- background: none;
- font: inherit;
- cursor: pointer !important;
- pointer-events: auto !important;
-}
-
-.button__link {
- display: inline-block;
- padding: 0.05em 0.5em;
- text-align: center;
- text-decoration: none;
- border-radius: 0.25em;
- background-color: var(--cc-primary-light);
- color: var(--cc-bg);
- font-family: var(--ff-serif);
- /* transition: background-color 0.1s ease-in-out, color 0.5s; */
- /* border: var(--cc-primary-light) 2px solid; */
- /* background-color: var(--cc-blue); */
-}
-.button__link:hover {
- background-color: var(--cc-primary);
- /* background-color: var(--cc-orange); */
-}
-
-button#togglePlainTextView {
- border: none;
-}
-button#togglePlainTextView:hover {
- /* background-color: var(--cc-primary); */
- /* color: var(--cc-bg); */
-}
-
/*
============
dot2dot and settings
@@ -418,7 +373,7 @@ menu overlay
background-color: var(--cc-bg);
opacity: 0;
visibility: hidden;
- transition: opacity 0.5s, visibility 0.5s;
+ /* transition: opacity 0.5s, visibility 0.5s; */
z-index: 10;
display: none;
justify-content: end;
@@ -477,12 +432,13 @@ header desktop
.mobile__section-subtitle {
font-family: var(--ff-serif);
font-style: italic;
- /* margin-left: 2em; */
- margin-left: 1em;
- padding: 0 !important;
+ margin-left: 1.75em;
+ /* margin-left: 1em; */
+ /* padding: 0 !important; */
}
.dates-container .mobile__section-subtitle {
margin-left: 2em;
+ display: none;
}
@media (min-width: 769px) {
@@ -537,17 +493,15 @@ header desktop
margin-right: 1em;
}
- .mobile__section-subtitle {
- display: none;
+ .section-header.mobile__section-subtitle {
+ /* display: none; */
+ position: absolute;
+ transform: translateY(-1em);
}
.dates li {
width: fit-content;
pointer-events: auto;
display: block;
- /* display: inline; */
- /* display: flex;
-
- flex-direction: column; */
}
.dates li .time {
display: block;
@@ -555,8 +509,6 @@ header desktop
}
.ae-subtitle {
grid-column: 1 / -1;
-
- /* width: 66.66%; */
}
ul.menu-container {
@@ -595,10 +547,12 @@ header mobile
right: 0;
}
.menu-toggle.toggle.pseudo-list-item {
+ /* width: auto; */
width: 100%;
margin: 0;
height: 1.5em;
padding: 0;
+ background-color: var(--cc-bg);
}
.menu-header-container button,
#togglePlainTextView {
@@ -621,7 +575,7 @@ header mobile
/* left: 0.3rem; */
/* left: 1em; */
width: calc(100% - 2em);
- width: 100%;
+ /* width: 100%; */
left: 0;
right: 0;
bottom: 0;
@@ -632,6 +586,9 @@ header mobile
display: flex;
justify-content: center;
align-items: center;
+
+ height: 2.5em;
+ /* align-items: start; */
}
.plain-text-container {
z-index: 10000;
@@ -681,6 +638,10 @@ main {
.content-container {
display: flex;
flex-direction: column;
+ width: auto;
+ }
+ .desktop__section.fixed {
+ display: none;
}
}
@@ -773,20 +734,14 @@ ul li.first-item {
padding-left: 0;
}
ul li.first-item button {
- padding-left: var(--gutter);
+ /* padding-left: var(--gutter); */
+ padding-left: 30px;
}
#dates-event-times {
position: fixed;
top: 0;
}
-/* todo revise */
-/* ul.items:not(.dates) {
- padding: 0;
-} */
-ul.items li:hover {
- list-style: circle;
-}
/* mobile layout */
@media (max-width: 768px) {
@@ -802,9 +757,20 @@ ul.items li:hover {
}
.pagination {
text-align: end;
+ /* !review 24-03-13 */
+ /* top: 2em;
+ position: fixed; */
+ top: 0;
+ position: absolute;
+
+ right: 0;
+ }
+ .pagination .pseudo-list-item {
+ padding-right: 1em;
}
.menu-header-container .menu-toggle {
- float: right;
+ /* float: right; */
+ padding-left: 30px !important;
}
}
button.toggle {
@@ -812,8 +778,13 @@ button.toggle {
position: relative;
}
-.first-item.list-style-circle::marker {
- list-style: circle;
+.first-item.list-style-circle::before {
+ /* list-style: circle; */
+ /* unicode hollow dot */
+ content: "\25cb";
+}
+.menu-toggle.list-style-circle.pseudo-list-item::before {
+ /* list-style: circle; */
/* unicode hollow dot */
content: "\25cb";
}
@@ -866,6 +837,11 @@ layout
#col2 > *:not(ul),
#col3 > *:not(ul) {
padding: 0 2.3rem;
+ padding: 0 30px;
+}
+.section-header {
+ padding: 0 !important;
+ font-size: var(--fs-med);
}
/* #col1 > *,
#col2 > *,
@@ -875,7 +851,8 @@ layout
/* mobile layout order */
@media (max-width: 768px) {
- .content-container {
+ .content-container,
+ main {
max-height: unset;
margin: 0;
margin-bottom: 1em;
@@ -883,7 +860,8 @@ layout
.ae-title {
margin-top: 2rem;
- margin-bottom: 1rem;
+ z-index: 100;
+ /* margin-bottom: 1rem; */
}
ul {
/* --gutter: 1rem; */
@@ -895,7 +873,7 @@ layout
#col2 > *:not(ul),
#col3 > *:not(ul) {
/* padding: 0 1rem; */
- margin-right: 1rem;
+ /* margin-right: 1rem; */
}
.mobile__section-subtitle {
margin-left: 1.75em;
@@ -955,9 +933,7 @@ img {
.menu-items {
margin-left: 0;
}
-.menu-items li {
- padding: 0;
-}
+
ul li::before {
margin-right: 8px;
}
@@ -965,9 +941,9 @@ ul li::before {
.menu-items {
margin-left: 0;
}
- .menu-items li {
+ /* .menu-items li {
padding: 0;
- }
+ } */
ul li::before {
margin-right: 8px;
}
@@ -1122,3 +1098,88 @@ input[type="range"]:focus::-webkit-slider-runnable-track,
input[type="range"]:focus::-moz-range-track {
background: var(--cc-primary-light);
}
+
+/*
+============
+elements
+============
+*/
+
+.anchor-point {
+ position: absolute;
+ top: 2em;
+ left: 18.5%;
+ width: 1rem;
+ height: 1rem;
+}
+figure {
+ margin: 0;
+}
+
+button {
+ background: none;
+ font: inherit;
+ cursor: pointer !important;
+ pointer-events: auto !important;
+}
+
+.button__link {
+ display: inline-block;
+ padding: 0.05em 0.5em !important;
+ text-align: center;
+ text-decoration: none;
+ border-radius: 0.25em;
+ background-color: var(--cc-primary-light);
+ color: var(--cc-bg);
+ font-family: var(--ff-serif);
+ /* transition: background-color 0.1s ease-in-out, color 0.5s; */
+ /* border: var(--cc-primary-light) 2px solid; */
+ /* background-color: var(--cc-blue); */
+}
+.button__link:hover {
+ background-color: var(--cc-primary);
+ /* background-color: var(--cc-orange); */
+}
+
+button#togglePlainTextView {
+ border: none;
+}
+button#togglePlainTextView:hover {
+ /* background-color: var(--cc-primary); */
+ /* color: var(--cc-bg); */
+}
+
+.dates.items li {
+ padding-left: 30px;
+}
+
+.event-schedule.pseudo-list-item {
+ padding-left: 30px;
+}
+@media (max-width: 768px) {
+ .menu-header-container .menu-toggle {
+ left: 0;
+ padding-right: 1em;
+ width: 100%;
+ text-align: start;
+ }
+ button.menu-toggle,
+ button#togglePlainTextView {
+ color: var(--cc-primary);
+ }
+ button.menu-toggle {
+ background: transparent;
+ }
+ .menu-toggle::before {
+ position: absolute;
+ left: 0;
+ }
+
+ .menu-header-container .menu-toggle {
+ padding-right: 1em !important;
+
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ }
+}
diff --git a/assets/css/templates/about.css b/assets/css/templates/about.css
index ac278e3..17a74e9 100644
--- a/assets/css/templates/about.css
+++ b/assets/css/templates/about.css
@@ -21,3 +21,11 @@
ul li p {
display: inline;
}
+@media screen and (max-width: 768px) {
+ main {
+ margin: 0;
+ }
+ section.contact {
+ margin-bottom: 2em;
+ }
+}
diff --git a/assets/css/templates/home.css b/assets/css/templates/home.css
new file mode 100644
index 0000000..7d432e6
--- /dev/null
+++ b/assets/css/templates/home.css
@@ -0,0 +1,6 @@
+@media (max-width: 768px) {
+ .menu-toggle.toggle.pseudo-list-item {
+ padding-left: 30px;
+ width: auto;
+ }
+}
diff --git a/assets/css/templates/nightschool.css b/assets/css/templates/nightschool.css
index bf894a6..adb5202 100644
--- a/assets/css/templates/nightschool.css
+++ b/assets/css/templates/nightschool.css
@@ -44,3 +44,9 @@ menu
.button__link {
background-color: var(--cc-primary-highlight);
}
+
+/* items */
+ul.items:not(.dates),
+#artists-items {
+ padding: 0 0 0 2.3rem;
+}
diff --git a/assets/css/templates/satellite.css b/assets/css/templates/satellite.css
new file mode 100644
index 0000000..0de472e
--- /dev/null
+++ b/assets/css/templates/satellite.css
@@ -0,0 +1,5 @@
+/* items */
+#artists-items,
+ul.items:not(.dates) {
+ padding: 0 0 0 2.3rem;
+}
diff --git a/assets/css/templates/supporters.css b/assets/css/templates/supporters.css
index 11ef5f0..def5693 100644
--- a/assets/css/templates/supporters.css
+++ b/assets/css/templates/supporters.css
@@ -29,7 +29,8 @@ Layout
}
#col2 {
- margin-right: 1.5rem !important;
+ margin-right: 0;
+ padding: 0 30px;
}
.logos img {
/* margin: 2em; */
@@ -40,6 +41,8 @@ Layout
display: flex;
align-content: center;
justify-content: center;
+
+ flex-direction: column;
}
}
diff --git a/assets/js/ae24-squig.js b/assets/js/ae24-squig.js
index f7a94b6..51a458f 100644
--- a/assets/js/ae24-squig.js
+++ b/assets/js/ae24-squig.js
@@ -124,7 +124,10 @@ function setupHoverInteractions(data) {
const svg = d3.select("#lineCanvas");
const liOffset = 14;
- d3.selectAll(".dates li, .events-container li, .artists-container li")
+ // d3.selectAll(".dates li, .events-container li, .artists-container li")
+ d3.selectAll(
+ ".dates li:not(.first-item), .events-container li:not(.first-item), .artists-container li:not(.first-item)"
+ )
.on("mouseover", function (event, d) {
const element = d3.select(this);
const elementId = element.attr("data-id");
@@ -174,23 +177,45 @@ function setupHoverInteractions(data) {
});
data.artists[elementId].events.forEach((eventId) => {
- const eventElement = document
- .querySelector(`[data-id="${eventId}"][data-type="events"]`)
- .getBoundingClientRect();
- points.push({
- x: eventElement.left - liOffset,
- y: eventElement.top + liOffset,
- });
-
- const dateId = data.events[eventId].date;
- const dateElement = document
- .querySelector(`[data-id="${dateId}"][data-type="date"]`)
- .getBoundingClientRect();
+ const eventElement = document.querySelector(
+ `[data-id="${eventId}"][data-type="events"]`
+ );
- points.push({
- x: dateElement.left - liOffset,
- y: dateElement.top + liOffset,
- });
+ if (eventElement) {
+ const rect = eventElement.getBoundingClientRect();
+ points.push({
+ x: rect.left - liOffset,
+ y: rect.top + liOffset,
+ });
+ const dateId = data.events[eventId].date;
+ const dateElement = document
+ .querySelector(`[data-id="${dateId}"][data-type="date"]`)
+ .getBoundingClientRect();
+ points.push({
+ x: dateElement.left - liOffset,
+ y: dateElement.top + liOffset,
+ });
+ } else {
+ // Handle the case where the event is not on the current page
+ // Determine if the event belongs to 'satellite' or 'nightschool' by checking the eventId
+ if (eventId.startsWith("satellite")) {
+ const satelliteElement = document
+ .getElementById("page__satellite")
+ .getBoundingClientRect();
+ points.push({
+ x: satelliteElement.left - liOffset,
+ y: satelliteElement.top + liOffset,
+ });
+ } else if (eventId.startsWith("nightschool")) {
+ const nightschoolElement = document
+ .getElementById("page__nightschool")
+ .getBoundingClientRect();
+ points.push({
+ x: nightschoolElement.left - liOffset,
+ y: nightschoolElement.top + liOffset,
+ });
+ }
+ }
});
} else if (elementType === "date") {
// fetch related events, draw line from date to each event, then to event's artists
diff --git a/assets/js/menu-overlay.js b/assets/js/menu-overlay.js
index 498f494..4d23333 100644
--- a/assets/js/menu-overlay.js
+++ b/assets/js/menu-overlay.js
@@ -12,10 +12,12 @@ document.addEventListener("DOMContentLoaded", function () {
// toggle body scroll
if (window.innerWidth <= 768) {
- if (!isOpen) {
- document.body.style.overflowY = "hidden";
- } else {
- document.body.style.overflowY = "scroll";
+ if (!document.body.classList.contains("plain-text")) {
+ if (!isOpen) {
+ document.body.style.overflowY = "hidden";
+ } else {
+ document.body.style.overflowY = "scroll";
+ }
}
}
});
diff --git a/assets/js/script.js b/assets/js/script.js
index ea41d81..fc1f437 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,7 +1,83 @@
document.addEventListener("DOMContentLoaded", function () {
+ const handleTouchStart = function (e) {
+ this.touchStartY = e.touches[0].clientY;
+ };
+
+ const touchContext = { touchStartY: 0 };
+
+ const handleTouchMove = function (e) {
+ e.preventDefault();
+ const touchEndY = e.touches[0].clientY;
+ const deltaY = this.touchStartY - touchEndY;
+ const col3 = document.getElementById("col3");
+ col3.scrollTop += deltaY;
+ this.touchStartY = touchEndY;
+ }.bind(touchContext);
+
+ const handleWheel = function (e) {
+ e.preventDefault();
+ const col3 = document.getElementById("col3");
+ col3.scrollTop += e.deltaY;
+ };
+
+ let customScrollHandlingAdded = false;
+
+ // add custom scroll handling
+ function addCustomScrollHandling() {
+ // early exit
+ if (customScrollHandlingAdded) return;
+
+ window.addEventListener("touchstart", handleTouchStart.bind(touchContext), {
+ passive: false,
+ });
+ window.addEventListener("touchmove", handleTouchMove, { passive: false });
+ window.addEventListener("wheel", handleWheel, { passive: false });
+
+ customScrollHandlingAdded = true;
+ }
+
+ function removeCustomScrollHandling() {
+ if (!customScrollHandlingAdded) return;
+
+ window.removeEventListener(
+ "touchstart",
+ handleTouchStart.bind(touchContext),
+ { passive: false }
+ );
+ window.removeEventListener("touchmove", handleTouchMove, {
+ passive: false,
+ });
+ window.removeEventListener("wheel", handleWheel, { passive: false });
+
+ customScrollHandlingAdded = false;
+ }
+
+ // desktop check
+ if (window.innerWidth >= 768) {
+ addCustomScrollHandling();
+ }
+
+ // handle window resizing
+ window.addEventListener("resize", function () {
+ if (window.innerWidth >= 768 && !customScrollHandlingAdded) {
+ addCustomScrollHandling();
+ } else if (window.innerWidth < 768 && customScrollHandlingAdded) {
+ removeCustomScrollHandling();
+ }
+ });
+
// function to toggle styles
const togglePlainText = document.getElementById("togglePlainTextView");
const settingsButton = document.getElementById("settingsButton");
+ const settingsContainer = document.getElementById("settingsContainer");
+
+ const body = document.body;
+ const menuHeaderContainer = document.querySelector(
+ ".menu-header-container-global"
+ );
+ const menuToggleButton = document.querySelector(".menu-toggle");
+ const menuItems = document.getElementById("menu-items");
+ const ulElements = document.querySelectorAll("ul");
// update button text based on the new state
const isDisabledStyles = localStorage.getItem("stylesDisabled") === "true";
@@ -9,6 +85,60 @@ document.addEventListener("DOMContentLoaded", function () {
? "Plain Text View"
: "Styled Text View";
+ function applyPlainTextStyles(enable) {
+ if (enable) {
+ body.classList.add("plain-text");
+ body.style.maxWidth = "60em";
+ if (menuHeaderContainer) {
+ menuHeaderContainer.style.position = "fixed";
+ menuHeaderContainer.style.right = "0.3rem";
+ menuHeaderContainer.style.top = "2em";
+ }
+
+ // if (menuToggleButton.attributes.expanded) {
+ if (!body.classList.contains("home") && menuToggleButton) {
+ menuToggleButton.setAttribute("expanded", "false");
+ menuItems.style.visibility = "hidden";
+ menuItems.style.opacity = "0";
+ menuItems.style.pointerEvents = "none";
+ }
+ if (settingsContainer) {
+ settingsButton.style.display = "none";
+ settingsContainer.style.display = "none";
+ }
+
+ ulElements.forEach((ul) => {
+ ul.style.margin = "0";
+ ul.style.padding = "0";
+ });
+
+ // Remove custom scroll handling in plain text mode
+ removeCustomScrollHandling();
+ } else {
+ body.classList.remove("plain-text");
+ body.style.maxWidth = "";
+ if (menuHeaderContainer) {
+ menuHeaderContainer.style.position = "";
+ menuHeaderContainer.style.right = "";
+ menuHeaderContainer.style.top = "";
+ }
+ if (settingsContainer) {
+ settingsButton.style.display = "block";
+ settingsContainer.style.display = "flex";
+ }
+ ulElements.forEach((ul) => {
+ ul.style.margin = "";
+ ul.style.padding = "";
+ });
+ // add custom scroll handling in styled text mode
+ addCustomScrollHandling();
+ }
+ }
+
+ if (isDisabledStyles) {
+ applyPlainTextStyles(true);
+ }
+
togglePlainText.addEventListener("click", function () {
const isDisabled = localStorage.getItem("stylesDisabled") === "true";
// Toggle the disabled state based on the opposite of the current state
@@ -18,6 +148,9 @@ document.addEventListener("DOMContentLoaded", function () {
// Save the new state in localStorage
localStorage.setItem("stylesDisabled", !isDisabled);
+ // Apply or remove plain text styles
+ applyPlainTextStyles(!isDisabled);
+
if (settingsButton) {
settingsButton.style.display = !isDisabled
? "block !important"
@@ -61,6 +194,9 @@ document.addEventListener("DOMContentLoaded", function () {
if (parent) {
parent.classList.toggle("list-style-circle", isExpanded);
}
+ if (button.classList.contains("menu-toggle")) {
+ button.classList.toggle("list-style-circle", isExpanded);
+ }
}
// attach event listeners to all toggle buttons
@@ -78,25 +214,6 @@ function initSections() {
const sectionId = button.getAttribute("aria-controls");
const sectionItems = document.getElementById(sectionId);
- // if (isMobile) {
- // // collapse section items & set aria-expanded to false on mobile
- // sectionItems.style.display = "none";
- // button.setAttribute("aria-expanded", "false");
-
- // // style collapsed sections
- // const parent = button.closest("li.first-item");
- // if (parent) {
- // parent.classList.add("list-style-circle");
- // }
- // } else {
- // // style collapsed sections for desktop
- // const isExpanded = button.getAttribute("aria-expanded") === "true";
- // const parent = button.closest("li.first-item");
- // if (parent) {
- // parent.classList.toggle("list-style-circle", !isExpanded);
- // }
- // }
-
// style collapsed sections for desktop
const isExpanded = button.getAttribute("aria-expanded") === "true";
const parent = button.closest("li.first-item");
diff --git a/site/config/config.php b/site/config/config.php
index a80977e..9bed4c7 100644
--- a/site/config/config.php
+++ b/site/config/config.php
@@ -76,8 +76,8 @@ function generateRelationsJson()
* all config options: https://getkirby.com/docs/reference/system/options
*/
return [
- // 'debug' => true,
- 'debug' => false,
+ 'debug' => true,
+ // 'debug' => false,
'panel' => [
'install' => true
],
diff --git a/site/snippets/event-content.php b/site/snippets/event-content.php
index 7a5f0b2..2996acd 100644
--- a/site/snippets/event-content.php
+++ b/site/snippets/event-content.php
@@ -1,13 +1,20 @@
+
-Event:
-
+
+
-
= $page->title()->html() ?>
+
+
+
+
ticketed()->toBool()) : ?>
@@ -71,9 +78,11 @@
-Lineup:
+
+
+
artist_link()->toPages();
foreach ($artists as $artist) : ?>
@@ -142,7 +151,7 @@
accessibility())) : ?>
- Accessibility
+ Accessibility:
= $accessibility ?>
@@ -161,6 +170,6 @@
= js([
- 'assets/js/gallery.js',
- 'assets/js/scroll.js',
+ 'assets/js/gallery.js'
+ // 'assets/js/scroll.js',
]) ?>
\ No newline at end of file
diff --git a/site/snippets/footer.php b/site/snippets/footer.php
index 5e04320..aa999a2 100644
--- a/site/snippets/footer.php
+++ b/site/snippets/footer.php
@@ -14,16 +14,19 @@