From 1aa7c404dae63c9518468fe9b579fad819f8d871 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 13 Sep 2026 18:32:43 +0000
Subject: [PATCH] =Single Event page setup done through the new Event block. Currently working on the Simple Calendar block setup

---
 src/menu/style.scss |  212 +++++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 174 insertions(+), 38 deletions(-)

diff --git a/src/menu/style.scss b/src/menu/style.scss
index f54b2a5..51a9d93 100644
--- a/src/menu/style.scss
+++ b/src/menu/style.scss
@@ -1,15 +1,20 @@
-.info h4 {
-	margin: 0;
-	font-weight: var(--fw-h);
-	font-size: var(--txt-medium);
+@media (min-width: 600px) {
+	#wpadminbar ~ .wp-site-blocks nav.menu {
+		top: calc(var(--btn) + 1rem + 16px);
+	}
 }
-
-.field.quantity.quantity > label {
-	position: absolute;
-	left: var(--offScreen);
+.scroll-up nav.menu {
+	top: -2rem;
 }
 nav.menu {
 	max-width: 100%;
+	position: sticky;
+	top: calc(var(--btn));
+	z-index: 5;
+	grid-column: full;
+	background-color: rgba(var(--base-50), var(--op-6));
+	box-shadow: var(--shdw-down) rgba(var(--base), var(--op-45));
+
 	ul {
 		--justify: flex-start;
 		li {
@@ -31,41 +36,172 @@
 	}
 }
 
-	.menu-item.menu-item {
-		margin: var(--sp2);
-		max-width: none;
-		&:target {
-			outline: none;
-			background: transparent;
-			border: 1rem solid rgb(var(--action-0));
-			h3 {
-				color: rgb(var(--action-0));
-			}
+.menu-item.menu-item {
+	margin: var(--sp2);
+	padding-top: var(--sp4);
+	max-width: none;
+	&:target {
+		outline: none;
+		background: transparent;
+		border: 1rem solid rgb(var(--action-0));
+		h3 {
+			color: rgb(var(--action-0));
 		}
-		+.menu-item {
-			padding-top: var(--sp4);
-			border-top: 1px solid rgb(var(--base-200));
-		}
+	}
 
-		.header {
-			flex-wrap:nowrap;
-			figure {
-				max-width: 30vw!important;
-				aspect-ratio: 1;
-				object-fit: cover;
-			}
-			h3, p {
-				margin: 0;
-				width: max-content;
-			}
-		}
+	+.menu-item {
+		border-top: 1px solid rgb(var(--base-200));
+	}
 
-		.gallery figure {
-			max-width: 15vw!important;
+
+
+
+
+	.price s {
+		font-size: var(--txt-small);
+		vertical-align: top;
+		display: inline-block;
+		padding-right: 1rem;
+	}
+	.price:has(s) {
+		color: rgb(var(--secondary-0));
+
+		s {
+			color: rgb(var(--contrast));
+		}
+	}
+
+	.tags.left {
+		left: -1rem;
+
+		.sale, .featured {
+			display: flex;
+			--gap: .5rem;
+			padding: .125rem .5rem;
+			text-transform: uppercase;
+			font-weight: var(--fw-h-bold);
+			width: max-content;
+		}
+		.sale {
+			background-color: rgb(var(--secondary-0));
+			color: rgb(var(--secondary-contrast));
+		}
+		.featured {
+			background-color: rgb(var(--action-0));
+			color: rgb(var(--action-contrast));
+		}
+	}
+
+	.header {
+		flex-wrap:nowrap;
+		figure {
+			max-width: 30vw!important;
 			aspect-ratio: 1;
 			object-fit: cover;
 		}
-		figcaption {
-			display: none;
+		h3, p {
+			margin: 0;
+			width: max-content;
 		}
 	}
+
+	.gallery figure {
+		max-width: min(15vw, 8rem) !important;
+		aspect-ratio: 1;
+		object-fit: cover;
+	}
+	figcaption {
+		display: none;
+	}
+
+	.info {
+		--gap: 0.5rem 0;
+		h4 {
+			margin: 0;
+			font-weight: var(--fw-h);
+			font-size: var(--txt-medium);
+		}
+		.row {
+			--gap:1rem;
+
+			> a, figure, h4 {
+				position: sticky;
+				top: calc(var(--btnbtn) + 2.5rem);
+				background-color: rgb(var(--base-50));
+				z-index: 1;
+			}
+			>div {
+				flex: 1;
+			}
+			> a {
+				white-space: nowrap;
+				width: max-content;
+			}
+			figure {
+				max-width: min(10vw, 5rem) !important;
+				aspect-ratio: 1;
+				object-fit: cover;
+				margin: 0;
+				margin-inline: 0;
+			}
+		}
+
+		.sale-until,
+		.out-of-stock {
+			font-size: var(--txt-x-small);
+			font-style: italic;
+
+			i.icon {
+				vertical-align: top;
+				padding-right: 1rem;
+				color: rgb(var(--secondary-0));
+			}
+		}
+	}
+
+	.field.quantity.quantity > label {
+		position: absolute;
+		left: var(--offScreen);
+	}
+
+	@media (max-width: 768px) {
+		&:target {
+			border: 0;
+		}
+		.header.row {
+			flex-direction:column;
+
+			> figure {
+				aspect-ratio: 16/9;
+				max-width: 100%!important;
+			}
+		}
+		.info {
+			padding-top: 1rem;
+
+			.row {
+				--gap: 0;
+
+				&.nowrap.nowrap {
+					--wrap: wrap!important;
+				}
+				+ .row {
+					border-top: 1px solid rgb(var(--base-200));
+					padding-top: .5rem;
+				}
+				> figure {
+					order: 2;
+					max-width: min(25vw, 6rem)!important;
+				}
+				> a {
+					order: 3;
+				}
+			}
+
+		}
+
+		.gallery {
+			gap: .25rem;
+		}
+	}
+}

--
Gitblit v1.10.0