+ See other merch
+
+
+ {% if page.gallery %}
+ {{ page.title }}
+ {{ content }} +
+ 
+ {% endfor %}
+
+ {% endif %}
+ Gallery
+ {% for photo in page.gallery %} +
+
+
+
+ {% include footer.html %}
+
+
\ No newline at end of file
diff --git a/_redirects b/_redirects
index 411c6645..1212aa94 100644
--- a/_redirects
+++ b/_redirects
@@ -65,6 +65,9 @@
/quack /ducks
/quak /ducks
+# Plushies
+/plushies /merch/plushies
+
# Voting
/vote https://vote.cssbham.com
/egm https://vote.cssbham.com
diff --git a/assets/images/tex-plushie/20250426_0004_lowres.jpg b/assets/images/tex-plushie/20250426_0004_lowres.jpg
new file mode 100644
index 00000000..ec6bf115
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0004_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0008_lowres.jpg b/assets/images/tex-plushie/20250426_0008_lowres.jpg
new file mode 100644
index 00000000..e712c235
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0008_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0016_lowres.jpg b/assets/images/tex-plushie/20250426_0016_lowres.jpg
new file mode 100644
index 00000000..75d654d7
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0016_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0020_lowres.jpg b/assets/images/tex-plushie/20250426_0020_lowres.jpg
new file mode 100644
index 00000000..dadc6c44
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0020_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0025_lowres.jpg b/assets/images/tex-plushie/20250426_0025_lowres.jpg
new file mode 100644
index 00000000..9bfb977c
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0025_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0027_lowres.jpg b/assets/images/tex-plushie/20250426_0027_lowres.jpg
new file mode 100644
index 00000000..457eacf9
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0027_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0041_lowres.jpg b/assets/images/tex-plushie/20250426_0041_lowres.jpg
new file mode 100644
index 00000000..42cf9242
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0041_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0042_lowres.jpg b/assets/images/tex-plushie/20250426_0042_lowres.jpg
new file mode 100644
index 00000000..d7129b11
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0042_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0042_lowres_square.jpg b/assets/images/tex-plushie/20250426_0042_lowres_square.jpg
new file mode 100644
index 00000000..37d5df6a
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0042_lowres_square.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0044_lowres.jpg b/assets/images/tex-plushie/20250426_0044_lowres.jpg
new file mode 100644
index 00000000..db7e8560
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0044_lowres.jpg differ
diff --git a/assets/images/tex-plushie/20250426_0055_lowres.jpg b/assets/images/tex-plushie/20250426_0055_lowres.jpg
new file mode 100644
index 00000000..6824ec35
Binary files /dev/null and b/assets/images/tex-plushie/20250426_0055_lowres.jpg differ
diff --git a/css/merch-listing.scss b/css/merch-listing.scss
new file mode 100644
index 00000000..6b64355f
--- /dev/null
+++ b/css/merch-listing.scss
@@ -0,0 +1,93 @@
+---
+---
+
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
+
+.merch-container {
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.merch-preview {
+ display: flex;
+ border-radius: 10px;
+ overflow: hidden;
+ margin-bottom: 20px;
+ text-decoration: none;
+ height: 120px;
+
+ .merch-thumbnail {
+ flex: 0 0 auto;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+ border: 2px white solid;
+ box-sizing: border-box;
+
+ width: 120px;
+ height: 120px;
+ object-fit: cover;
+ }
+
+ .merch-details {
+ flex: 1 1 auto;
+ padding-left: 1em;
+ width: calc(100vw - 150px - 5% - 1em);
+ background: white;
+
+ .merch-title {
+ color: black;
+ }
+
+ .merch-excerpt {
+ * {
+ color: black;
+ }
+ }
+
+ .merch-price {
+ font-family: "JetBrains Mono", "Inconsolata", monospace;
+ font-weight: bold;
+ font-style: italic;
+ font-size: smaller;
+ color: black;
+ }
+ }
+}
+
+@media only screen and (min-width: 600px) {
+ .merch-preview {
+ .merch-details {
+ .merch-title {
+ margin-top: 0.5em;
+ margin-bottom: 0.3em;
+ }
+ .merch-date {
+ margin-top: 0.3em;
+ margin-bottom: 0.5em;
+ }
+ .merch-excerpt p {
+ margin-top: 0.5em;
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ .merch-preview {
+ .merch-details {
+ .merch-title {
+ font-size: min(6vw, 27px);
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+ }
+ .merch-date {
+ font-size: min(5vw, 27px);
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+ }
+ .merch-excerpt p {
+ margin-top: 0.5em;
+ }
+ }
+ }
+}
diff --git a/css/merch.scss b/css/merch.scss
new file mode 100644
index 00000000..adfd2f05
--- /dev/null
+++ b/css/merch.scss
@@ -0,0 +1,194 @@
+---
+---
+
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
+
+.merch-container {
+ display: grid;
+ grid-template-areas:
+ "back ."
+ "description purchase"
+ "gallery purchase";
+ grid-template-rows: min-content 1fr;
+ width: 100%;
+ gap: 1rem;
+ justify-content: center;
+
+ .merch-back {
+ grid-area: back;
+ --child-index: 1;
+ color: white;
+
+ * {
+ text-decoration: underline;
+ }
+ }
+
+ .merch-description {
+ background-color: #fff;
+ border-radius: 10px;
+ padding: 15px;
+ width: 700px;
+ height: fit-content;
+ grid-area: description;
+ box-sizing: border-box;
+ --child-index: 2;
+ }
+
+ .gallery {
+ background-color: #fff;
+ border-radius: 10px;
+ padding: 15px;
+ width: 700px;
+ height: fit-content;
+ grid-area: gallery;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ --child-index: 4;
+
+ * {
+ color: black;
+ }
+ }
+}
+
+.purchase {
+ background-color: #fff;
+ width: 350px;
+ border-radius: 10px;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ height: fit-content;
+ grid-area: purchase;
+ box-sizing: border-box;
+ position: sticky;
+ top: 1rem;
+ --child-index: 3;
+
+ * {
+ color: black;
+ }
+
+ h2 {
+ margin-bottom: 0;
+ }
+}
+
+.purchase-option {
+ display: flex;
+ align-items: center;
+
+ .option-label {
+ flex-grow: 1;
+ display: grid;
+ grid-template-areas:
+ "option"
+ "note";
+ grid-template-columns: 1fr;
+ gap: 0.2em;
+
+ &.with-quantity {
+ grid-template-areas:
+ "quantity option"
+ "note note";
+ grid-template-columns: min-content 1fr;
+ }
+
+ .quantity {
+ grid-area: quantity;
+ }
+
+ .option {
+ grid-area: option;
+ }
+
+ .note {
+ grid-area: note;
+ font-style: italic;
+ font-size: small;
+ }
+ }
+
+ .price {
+ flex-shrink: 0;
+ font-size: larger;
+ font-family: "JetBrains Mono", "Inconsolata", monospace;
+ }
+}
+
+.button {
+ display: inline-block;
+ padding: 10px;
+ font-weight: bold;
+ border-radius: 10px;
+ text-decoration: none;
+ font-family: "Roboto", sans-serif;
+ width: 100%;
+ box-sizing: border-box;
+ color: white;
+ display: flex;
+ gap: 0.5rem;
+ justify-content: center;
+ align-items: center;
+
+ i {
+ color: white;
+ }
+}
+
+.guild-button {
+ background-color: #5bbaa2;
+}
+
+.unavailable-button {
+ background-color: gray;
+ cursor: not-allowed;
+}
+
+.gallery img,
+.merch-description img {
+ border-radius: 10px;
+ border-style: initial;
+ max-height: initial;
+ height: initial;
+ box-sizing: border-box;
+}
+
+.merch-description img {
+ width: 80%;
+ max-width: 80%;
+}
+
+.gallery img {
+ width: initial;
+ max-width: 100%;
+ max-height: 500px;
+}
+
+@media only screen and (max-width: 1100px) {
+ .merch-container {
+ display: grid;
+ grid-template-areas:
+ "back"
+ "description"
+ "purchase"
+ "gallery";
+
+ .purchase {
+ width: 100%;
+ top: -60px;
+ }
+
+ .merch-description {
+ width: 100%;
+ }
+
+ .gallery {
+ width: 100%;
+ }
+ }
+}
diff --git a/js/hamburger.js b/js/hamburger.js
index db71d698..612787b5 100644
--- a/js/hamburger.js
+++ b/js/hamburger.js
@@ -13,11 +13,11 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
-export function toggleShow(id) {
+window.toggleShow = function (id) {
let x = document.getElementById("hbdd_" + id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
-}
+};
diff --git a/merch.html b/merch.html
new file mode 100644
index 00000000..994dd79a
--- /dev/null
+++ b/merch.html
@@ -0,0 +1,36 @@
+---
+layout: page
+title: Merch
+styles:
+- /css/merch-listing.css
+- /css/fadein.css
+favicon: /favicon.ico
+---
+
+Purchase options
+ {% for option in page.options %} +
+ {% if option.quantity %}
+
+
+ {{option.quantity}}x
+ {% else %}
+
+ {% endfor %}
+ {% if page.purchase-url %}
+ Buy on Guild website
+ {% else %}
+ Currently unavailable
+ {% endif %}
+
+ {% endif %}
+ {{ option.name }}
+ {% if option.note %}
+ {{ option.note }}
+ {% endif %}
+
+ £{{ option.price }}
+
+
\ No newline at end of file
Merch
+ + {% if site.merch.size == 0 %} +There's nothing here yet...
+ {% endif %} + + +