CSSUoB · MattyTheHacker · May 2, 2025 · Apr 26, 2025 · Apr 26, 2025 · Apr 26, 2025
@@ -0,0 +1,39 @@
+---
+layout: merch
+title: TeX Plushies
+slug: plushies
+url: https://www.guildofstudents.com/
+options:
+  - name: Plushie
+    quantity: 1
+    price: 13.99
+    note: Limited to members only
+gallery:
+  - url: /assets/images/tex-plushie/20250426_0008.jpg
+    alt: TeX reading a book
+  - url: /assets/images/tex-plushie/20250426_0055.jpg
+    alt: TeX reading about themself
+  - url: /assets/images/tex-plushie/20250426_0020.jpg
+    alt: TeX staring wistfully into the distance
+  - url: /assets/images/tex-plushie/20250426_0016.jpg
+    alt: TeX next to another TeX
+  - url: /assets/images/tex-plushie/20250426_0027.jpg
+    alt: Two TeX's having fun the robots in the CS Atrium
+  - url: /assets/images/tex-plushie/20250426_0042.jpg
+    alt: TeX sitting on a bench outside the CS building
+  - url: /assets/images/tex-plushie/20250426_0041.jpg
+    alt: TeX with Old Joe in the background
+  - url: /assets/images/tex-plushie/20250426_0044.jpg
+    alt: TeX looking down to the lower ground in CS
+  - url: /assets/images/tex-plushie/20250426_0025.jpg
+    alt: Two TeX plushies on the CS Atrium balcony
+thumbnail: /assets/images/tex-plushie/20250426_0042.jpg
+---
+
+Adopt a very special hand-made crochet [TeX](/tex) plushie!
+
+![Two TeX plushies together](/assets/images/tex-plushie/20250426_0004.jpg)
+
+These plushies have been hand crocheted by our very own Fearne. We hope you enjoy them!
+
+Approximate size dimensions: H: 15cm, W: 7.5cm, D: 12.5cm
@@ -54,6 +54,9 @@ collections:
   news:
     output: true
     permalink: /newsletter/:title
+  merch:
+    output: true
+    permalink: /merch/:slug
   clubs:
   events:
     sort_by: order

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>UoB Computer Science Society - {{ page.title }}</title>
+  <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
+  <meta name=viewport content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="{{ '/css/normalize.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/css/main.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/css/merch.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/css/fadein.css' | relative_url }}">
+
+  <script src="{{ '/js/hamburger.js' | relative_url }}" type="module"></script>
+
+  {% seo %}
+</head>
+<body>
+  {% include header.html %}
+  <main>
+    <div class="merch-container fadein-container">
+      <a class="merch-back fadein" href="/merch"><i class="fas fa-arrow-left-long"></i> See other merch</a>
+      <div class="merch-description fadein text-container">
+        <h1>{{ page.title }}</h1>
+        {{ content }}
+      </div>
+      {% if page.gallery %}
+        <div class="gallery fadein">
+          <h2>Gallery</h2>
+          {% for photo in page.gallery %}
+          <img src="{{ photo.url }}" alt="{{ photo.alt }}" />
+          {% endfor %}
+        </div>
+      {% endif %}
+      <div class="purchase fadein">
+        <h2>Purchase options</h2>
+        {% for option in page.options %}
+          <div class="purchase-option">
+            {% if option.quantity %}
+            <div class="option-label with-quantity">
+              <span class="quantity">{{option.quantity}}x</span> 
+            {% else %}
+            <div class="option-label">
+            {% endif %}
+              <span class="option">{{ option.name }}</span>
+              {% if option.note %}
+                <span class="note">{{ option.note }}</span>
+              {% endif %}
+            </div>
+            <span class="price">£{{ option.price }}</span>
+          </div>
+        {% endfor %}
+        {% if page.url %}
+          <a href="{{ page.url }}" class="button guild-button">Buy on Guild website <i class="fas fa-arrow-right"></i></a>
+        {% endif %}
+      </div>
+    </div>
+  </main>
+
+  {% include footer.html %}
+</body>
+</html>
diff --git a/assets/images/tex-plushie/20250426_0004.jpg b/assets/images/tex-plushie/20250426_0004.jpg
diff --git a/assets/images/tex-plushie/20250426_0008.jpg b/assets/images/tex-plushie/20250426_0008.jpg
diff --git a/assets/images/tex-plushie/20250426_0016.jpg b/assets/images/tex-plushie/20250426_0016.jpg
diff --git a/assets/images/tex-plushie/20250426_0020.jpg b/assets/images/tex-plushie/20250426_0020.jpg
diff --git a/assets/images/tex-plushie/20250426_0025.jpg b/assets/images/tex-plushie/20250426_0025.jpg
diff --git a/assets/images/tex-plushie/20250426_0027.jpg b/assets/images/tex-plushie/20250426_0027.jpg
diff --git a/assets/images/tex-plushie/20250426_0041.jpg b/assets/images/tex-plushie/20250426_0041.jpg
diff --git a/assets/images/tex-plushie/20250426_0042.jpg b/assets/images/tex-plushie/20250426_0042.jpg
diff --git a/assets/images/tex-plushie/20250426_0044.jpg b/assets/images/tex-plushie/20250426_0044.jpg
diff --git a/assets/images/tex-plushie/20250426_0055.jpg b/assets/images/tex-plushie/20250426_0055.jpg
@@ -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;
+      }
+    }
+  }
+}
@@ -0,0 +1,183 @@
+---
+---
+
+@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;
+  }
+}
+
+.guild-button {
+  display: inline-block;
+  padding: 10px;
+  font-weight: bold;
+  border-radius: 10px;
+  text-align: center;
+  text-decoration: none;
+  font-family: "Roboto", sans-serif;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #5bbaa2;
+  color: white;
+
+  i {
+    color: white;
+  }
+}
+
+.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%;
+    }
+  }
+}